Vorschaubild in der Galerie einfach erklärt

Ein aktuelles Handyfoto hat leicht 4000 × 3000 Pixel und wiegt mehrere Megabyte. In der Übersicht Ihrer Galerie erscheint es aber nur so groß wie eine Briefmarke, vielleicht 200 Pixel breit. Würde der Browser dafür das ganze Foto laden, holte er zwölf Millionen Bildpunkte, um am Ende 30.000 davon anzuzeigen. Ein Vorschaubild in der Galerie ist deshalb eine eigene, kleine Datei: eine verkleinerte Kopie des Fotos, die nur für die Übersicht gedacht ist. Erst wer darauf klickt, bekommt die große Fassung zu sehen.

Vorschaubilder einer Ostsee-Kategorie im Rahmen 200 × 200 Pixel: Querformate 200 × 133, Hochformat 133 × 200, nichts abgeschnitten

Warum ein Vorschaubild eine eigene Datei ist

Nehmen wir eine Kategorie mit 30 Herbstfotos, jedes Original rund 4 MB groß. Zeigte die Übersicht die Originale nur verkleinert an, müsste ein Besucher 120 MB laden, bevor er überhaupt etwas auswählen kann. Mit eigenen Vorschaubildern von je etwa 15 KB sind es zusammen rund 450 KB. Das ist weniger als ein Zweihundertstel. Optisch ist kaum ein Unterschied zu sehen, denn bei 200 Pixeln Breite kann niemand die zwölf Millionen Bildpunkte des Originals wahrnehmen.

In einer gut gebauten Galerie gibt es von jedem Foto deshalb mehrere Fassungen, und jede hat ihren eigenen Moment:

Fassung	Beispielmaße	Wann der Browser sie lädt
Vorschaubild	200 × 150 Pixel	sofort, für jedes Foto der Übersicht
Kopie für die große Ansicht	1024 × 768 Pixel	erst nach dem Klick, nur für dieses eine Foto
Original	4000 × 3000 Pixel	je nach Galerie gar nicht oder nur, wenn kein verkleinerter Ersatz da ist

Die mittlere Fassung wird oft vergessen. Sie verhindert, dass nach dem Klick doch wieder vier Megabyte durch die Leitung müssen, obwohl der Bildschirm des Besuchers nur einen Bruchteil davon darstellen kann.

Einpassen oder zuschneiden

Beim Verkleinern muss eine Galerie entscheiden, was mit unterschiedlichen Formaten passiert. Es gibt zwei Wege. Beim Einpassen wird das ganze Foto so verkleinert, dass es in einen Rahmen passt. Querformate werden dadurch niedriger, Hochformate schmaler, aber nichts geht verloren. Beim Zuschneiden schneidet die Galerie aus jedem Foto einen gleich großen Ausschnitt, meist ein Quadrat aus der Mitte. Die Übersicht wirkt dann wie aus einem Guss, dafür fehlen Ränder.

Welcher Weg besser ist, hängt von Ihren Motiven ab. Zeigen Sie Landschaften, Möbel oder Werkstücke, bei denen das ganze Objekt zählt, ist Einpassen sicherer. Bei Porträts im Hochformat kann ein mittiger Zuschnitt dagegen die Stirn oder das Kinn abschneiden. Ein Quadrat aus der Mitte eines Gruppenfotos zeigt im schlimmsten Fall nur die beiden Personen in der Mitte, die anderen fehlen. Wer gleichmäßige Kacheln möchte, ohne dass die Galerie selbst schneidet, bringt seine Fotos vor dem Hochladen im Bildprogramm auf dasselbe Seitenverhältnis und wählt den Ausschnitt dabei selbst.

Woran Sie ein schlechtes Vorschaubild erkennen

Die meisten Probleme mit Vorschaubildern fallen erst auf, wenn die Galerie schon online ist. Diese Anzeichen deuten auf eine bestimmte Ursache:

Die Übersicht baut sich zeilenweise auf: Vermutlich lädt sie die Originale statt kleiner Kopien. Öffnen Sie eine Vorschau per Rechtsklick in einem neuen Tab, dann sehen Sie, wie groß die angezeigte Datei wirklich ist.
Die Vorschau ist matschig: Das Original war kleiner als der Rahmen und wurde hochgerechnet. Ein Foto mit 160 Pixel Breite wird in einem 200-Pixel-Rahmen nicht schärfer.
Ein Handyfoto liegt quer: Das Telefon hat die Drehung nur als Angabe in der Datei vermerkt, und die Galerie hat sie beim Verkleinern nicht beachtet. Das Bildergalerie-Script beachtet diese Angabe seit Version 3.15 und erneuert falsch gedrehte Vorschauen älterer Versionen beim nächsten Aufruf selbst.
Die Motive sind nicht zu erkennen: Der Rahmen ist zu klein gewählt. Unter etwa 120 Pixeln Breite verschwinden Gesichter und Schrift.
Die Vorschau zeigt noch das alte Motiv: Das Foto wurde ersetzt, die Vorschau aber nicht neu erzeugt, oder der Browser zeigt seine gespeicherte Fassung.

Vorschaubilder richtig beschriften und bemaßen

Jedes Vorschaubild in der Galerie braucht einen Alternativtext, das alt-Attribut im HTML. Screenreader lesen ihn blinden Besuchern vor, und Suchmaschinen erfahren daraus, was auf dem Foto zu sehen ist. „IMG_4711“ hilft dabei niemandem. „Kürbisse vor der Scheune“ sagt in drei Wörtern, worum es geht. Schreiben Sie, was zu sehen ist, nicht, dass es ein Bild ist: „Foto von …“ oder „Bild zeigt …“ sind überflüssig, das weiß der Screenreader schon.

Fast genauso wichtig sind feste Maße. Steht im HTML, wie breit und hoch das Vorschaubild ist, kann der Browser den Platz reservieren, bevor die Datei eintrifft. Fehlen die Angaben, springt die Seite beim Laden, und wer gerade auf ein Foto tippen wollte, trifft das daneben.

So entsteht das Vorschaubild in der Galerie des Bildergalerie-Scripts

Im Bildergalerie-Script entsteht das Vorschaubild sofort beim Hochladen, ebenso beim FTP-Import. Die Galerie legt es im Ordner bilder/tn/ unter dem Namen tn<Kategorie-ID>_<Dateiname> ab, zum Beispiel bilder/tn/tn3_kuerbisse-vor-der-scheune.jpg. Das Original in bilder/<Ordner der Kategorie>/ bleibt unverändert. Ein Klick öffnet die Lightbox, die bei großen Fotos beim Standard eine zweite verkleinerte Kopie mit höchstens 1024 × 1024 Pixeln lädt (ob_<Kategorie-ID>_<Dateiname>). Wie die Vorschau aussieht, bestimmen vier Felder unter „Einstellungen“ im Abschnitt „Vorschaubilder“.

Feld	Standard	Erlaubt
Breite der Vorschaubilder	200 Pixel	20 bis 1000
Höhe der Vorschaubilder	200 Pixel	20 bis 1000
Vorschaubilder pro Zeile	2	1 bis 20; bis 600 Pixel Bildschirmbreite immer zwei Spalten
Vorschaubilder neu erstellen nach	0 (aus), in älteren Installationen oft 2 Tage	0 oder 1 bis 3650 Tage; 0 erneuert nur bei geänderten Maßen oder neuem Original

Größe und Einpassen

Das Script geht den Weg des Einpassens. Breite und Höhe bilden einen Rahmen, in den die Galerie jedes Foto setzt, ohne etwas abzuschneiden. Ein Querformat mit 4000 × 3000 Pixeln wird beim Standard 200 × 150 Pixel groß, ein Hochformat mit 3000 × 4000 Pixeln 150 × 200 Pixel. Wie aus einem Original die beiden Kopien werden, zeigt das Diagramm.

Animiertes Diagramm: Ein Foto mit 4000 × 3000 Pixeln wird in den Rahmen 200 × 200 eingepasst und als tn3_laub.jpg mit 200 × 150 gespeichert, ein Hochformat wird 150 × 200; daneben entsteht die Kopie ob_3_laub.jpg für die große Ansicht — Einpassen statt Zuschneiden: Aus einem Original entstehen Vorschaubild und Lightbox-Kopie, das Original bleibt unverändert.

Stellen Sie den Rahmen auf 300 × 300 Pixel, wird dasselbe Querformat 300 × 225 Pixel groß. Ein Original, das kleiner als der Rahmen ist, bringt die Galerie ebenfalls auf Rahmengröße. Laden Sie deshalb keine winzigen Dateien hoch, wenn die Vorschau scharf sein soll. JPEG-Vorschauen speichert die Galerie mit der Qualität 85.

Jedes Vorschaubild trägt feste Maße (width und height), damit die Seite beim Laden nicht springt, und die Beschreibung des Bildes als Alternativtext. Ist „Dateiname als Beschreibung“ eingeschaltet, entsteht diese Beschreibung beim Hochladen aus dem Dateinamen. Kameranamen wie IMG_1234 ergeben dabei keine Beschreibung, tragen Sie dann unter „Bilder verwalten“ selbst einen Text ein. Auf der Startseite dient das Vorschaubild des ersten Bildes einer Kategorie als Titelbild ihrer Kachel.

Neu erzeugen, Browser-Cache und Schreibrechte

Ändern Sie die Maße, müssen Sie nichts löschen. Passt ein vorhandenes Vorschaubild nicht mehr, erzeugt die Galerie es beim nächsten Aufruf der Seite neu. Das gilt auch für ein ersetztes Original und für Handyfotos, die laut EXIF-Angabe gedreht werden müssen. Bei einer Kategorie mit vielen Bildern dauert dieser erste Aufruf etwas länger. Damit Besucher keine veraltete Fassung aus dem Browser-Cache sehen, hängt die Galerie an die Adresse einen Zeitstempel wie ?v=1728720000 an.

Darf das Script nicht in bilder/tn/ schreiben, zeigt es in der Übersicht das verkleinert dargestellte Original. Die Seite sieht dann fast gleich aus, lädt aber die vollen Dateien, genau der erste Fall aus der Liste oben. Geben Sie dem Ordner per FTP Schreibrechte, meist 755 oder 775. Den Ordnernamen tn können Sie für eine Kategorie übrigens nicht vergeben, er ist für die Vorschaubilder reserviert.

Zwei Dinge bringt das Script nicht mit. Ein Nachladen beim Scrollen gibt es nicht, eine Kategorie zeigt alle Vorschaubilder auf einer Seite. Bei mehreren hundert Bildern verteilen Sie die Fotos deshalb besser auf mehrere Kategorien. Und WebP-Dateien nimmt der Upload nicht an, erlaubt sind JPEG, PNG und GIF. Wie das Vorschaubild in der Galerie mit Ihren eigenen Motiven wirkt, sehen Sie am schnellsten im Test: Das Bildergalerie-Script lässt sich kostenlos herunterladen und mit ein paar Fotos ausprobieren.

Häufige Fragen

Wer eine Galerie einrichtet, fragt meist zuerst nach der passenden Größe und danach, was bei vielen Fotos schnell bleibt.

Wie groß sollte ein Vorschaubild sein?

Für ein Vorschaubild in der Galerie passen meist 150 bis 300 Pixel an der längeren Seite. Darunter werden Gesichter und Details schwer erkennbar, darüber passen auf dem Handy kaum noch zwei Fotos nebeneinander. Als Datei sollte ein JPEG-Vorschaubild dieser Größe deutlich unter 50 KB bleiben.

Muss ich Vorschaubilder selbst erstellen?

Bei einem Galerie-Script nicht. Sie laden das Original hoch, die Vorschau rechnet das Script selbst aus. Selbst Hand anlegen lohnt sich nur, wenn Sie einen bestimmten Ausschnitt zeigen möchten. Dann schneiden Sie das Foto vorher im Bildprogramm zu und laden diese Fassung hoch.

Wie lädt eine Galerie mit vielen Vorschaubildern schnell?

Am meisten bringt es, die Zahl der Vorschaubilder je Seite zu begrenzen, also Fotos auf mehrere Kategorien oder Alben zu verteilen. Danach zählen kleine Dateien und feste Maße im HTML. Lazy Loading, also das Nachladen erst beim Scrollen, hilft zusätzlich, wenn die Galerie es unterstützt.

Warum sind im Bildergalerie-Script manche Vorschaubilder schmaler als andere?

Die Galerie passt jedes Foto in den eingestellten Rahmen ein, ohne etwas abzuschneiden. Beim Standard von 200 × 200 Pixeln wird ein Querformat 200 Pixel breit, ein Hochformat nur 150 Pixel. Gleich große Kacheln erreichen Sie, indem Sie die Fotos vor dem Hochladen auf dasselbe Seitenverhältnis zuschneiden.