Bildvergrößerung beim Klick: die Zoom-Funktion

Auf einer Kachel von 200 × 150 Pixeln erkennt man, dass auf dem Vereinsfoto Menschen vor einem Zelt stehen. Wer genau dort steht, sieht man nicht. Also klickt der Besucher, und erst dann bekommt er eine Fassung, auf der Gesichter, Trikotnummern und das Plakat im Hintergrund lesbar sind. Diese Bildvergrößerung beim Klick ist der Kern jeder Galerie: Die Übersicht zeigt, was es gibt, der Klick zeigt, was darauf zu sehen ist. Für Sie als Betreiber steckt dahinter eine einfache Frage mit großer Wirkung, nämlich welche Datei bei diesem Klick eigentlich geladen wird.

Bildvergrößerung beim Klick: Ein Mausklick auf ein Vorschaubild öffnet es groß über dem abgedunkelten Raster, daneben zwei Pfeile

Ein Foto, drei Fassungen

Eine gut eingerichtete Galerie hält von jedem Foto mehrere Fassungen bereit. Das klingt nach verschwendetem Speicherplatz, rechnet sich aber schnell. Nehmen wir eine Kategorie mit 30 Handyfotos, jedes 4032 × 3024 Pixel groß und als JPEG etwa 3 MB schwer. Zeigte die Übersicht direkt die Originale und ließe sie nur kleiner darstellen, müsste das Handy des Besuchers rund 90 MB laden, bevor die Seite vollständig ist. Mit Vorschaubildern von 200 × 150 Pixeln und grob 10 KB je Datei sind es etwa 300 KB.

Die große Fassung kommt erst beim Klick. Schaut sich der Besucher acht der dreißig Fotos genauer an, lädt er acht Dateien für die große Ansicht und dazu die Nachbarbilder, die eine gute Lightbox im Hintergrund schon vorlädt. Ist jede dieser Dateien etwa 200 KB groß, kommen zu den 300 KB der Übersicht rund 2 MB hinzu. Statt 90 MB fließen also gut 2 MB, und auf dem Bildschirm sieht das Ergebnis genauso aus.

Fassung	Maße im Beispiel	Bildpunkte	wofür
Original vom Handy	4032 × 3024	rund 12,2 Millionen	Archiv, Druck, Download
Kopie für die große Ansicht	1024 × 768	rund 786.000, ein Fünfzehntel	Anzeige nach dem Klick
Vorschaubild	200 × 150	30.000, ein Vierhundertstel	Übersicht, Auswahl

Auf die mittlere Zeile kommt es an. Sie entscheidet, ob die große Ansicht scharf und trotzdem schnell erscheint. Ist die Kopie zu klein, wirkt das Foto am Monitor matschig. Ist sie zu groß oder fehlt sie ganz, wartet der Besucher auf dem Handy und bezahlt mit seinem Datenvolumen.

Bildvergrößerung beim Klick: vier Varianten

Nicht jede Webseite löst die Vergrößerung gleich. Welche Variante zu Ihrer Galerie passt, hängt davon ab, ob Besucher eher blättern, einzelne Details prüfen oder Bilder weitergeben wollen.

Variante	So sieht es aus	passt gut, wenn	Schwachstelle
Lightbox	Bild schwebt über der abgedunkelten Seite	Besucher ganze Serien durchsehen	einzelnes Bild nicht direkt verlinkbar
Datei direkt öffnen	Bild allein auf weißer oder grauer Fläche	Bilder geteilt oder gespeichert werden sollen	zum nächsten Bild nur über die Zurück-Taste
Lupe beim Überfahren	Ausschnitt wird vergrößert, wo die Maus steht	Produktdetails wie Stoff oder Naht zählen	am Handy gibt es kein Überfahren
Aufklappen in der Seite	Kachel wird an Ort und Stelle breiter	nur wenige Bilder im Text stehen	Inhalt darunter springt nach unten

Für eine Foto- oder Vereinsgalerie mit vielen Bildern je Anlass ist die Lightbox fast immer die beste Wahl, weil sie Blättern ohne Umwege erlaubt. Die Lupe gehört eher in einen Onlineshop, das Aufklappen passt zu einzelnen Abbildungen in einem Artikel.

Woran Sie eine misslungene Vergrößerung erkennen

Prüfen Sie die Bildvergrößerung beim Klick selbst, einmal am großen Monitor und einmal auf dem Handy im Mobilfunknetz, nicht im heimischen WLAN. Vier Befunde treten immer wieder auf.

Großes Bild wirkt weich: Die hochgeladene Datei war kleiner als die Fläche, auf der sie gezeigt wird. Ein Foto mit 800 Pixeln Breite, das auf 1024 Pixel gezogen wird, verliert sichtbar an Schärfe.
Ladekreis dreht sich lange: Der Klick lädt das unveränderte Original mit mehreren Megabyte. Auf dem Handy dauert das schnell drei bis fünf Sekunden pro Bild.
Hochkantfoto liegt quer: Das Handy hat das Bild nur mit einem Vermerk zur Drehung gespeichert. Ein Programm, das diesen Vermerk nicht auswertet, zeigt es gekippt.
Bild öffnet sich auf leerer Seite: Statt über der Galerie zu erscheinen, öffnet der Browser die nackte Bilddatei. Dann wurde die Lightbox nicht geladen, meist weil JavaScript-Dateien beim Hochladen fehlten oder eine Vorlage verändert wurde.

Der letzte Fall ist kein Totalausfall, das Bild ist ja zu sehen. Er kostet aber das bequeme Blättern, und Besucher merken sofort, dass etwas anders ist als gewohnt. Prüfen Sie deshalb nach jedem Update, ob die Vergrößerung noch über der Galerie aufgeht.

Wie groß Fotos zum Hochladen sein sollten

Die längere Seite eines Fotos sollte mindestens so lang sein wie die größte Darstellung, die nach dem Klick erscheinen soll. Wer Besuchern an großen Monitoren 1600 Pixel bieten möchte, lädt also keine Fotos mit 1200 Pixeln hoch. Nach oben ist der Rahmen weiter, hat aber eine Grenze, die vom Webspace abhängt: Zum Verkleinern muss der Server das Foto vollständig in den Arbeitsspeicher laden, und dafür sind etwa 4 Byte je Bildpunkt nötig.

Ein Handyfoto mit 12 Megapixeln belegt dabei rund 48 MB, ein Kamerabild mit 24 Megapixeln rund 100 MB. Das Bildergalerie-Script hebt die PHP-Grenze dafür selbst an, soweit der Webhoster es zulässt. Bei knapp bemessenen Webspace-Paketen scheitert das Verkleinern trotzdem. Bringen Sie solche Fotos vorher am Rechner auf etwa 2500 Pixel an der längeren Seite, sind es noch rund 4,7 Megapixel und etwa 19 MB Speicherbedarf. Für die große Ansicht reicht das in jedem Fall, und der Upload geht schneller.

Die Bildvergrößerung beim Klick im Bildergalerie-Script

Im Bildergalerie-Script übernimmt die „Lightbox v2.04“ von Lokesh Dhakar die große Ansicht. Ein Klick auf ein Vorschaubild öffnet das Bild über der Seite, mit der Bildbeschreibung als Unterschrift und einem Zähler wie „Bild 2 von 4“. Weiter geht es mit einem Klick oder Tipp auf die rechte Bildhälfte oder mit der Pfeiltaste, zurück über die linke Hälfte. Alle Bedienwege beschreibt die Seite zur Lightbox.

Welche Datei der Klick lädt, steht allerdings schon fest, bevor jemand klickt. Beim Hochladen legt die Galerie im Ordner bilder/tn/ das Vorschaubild tn3_dateiname.jpg an und, wenn nötig, die Kopie für die große Ansicht ob_3_dateiname.jpg. Die 3 ist dabei die Nummer der Kategorie. Jedes Mal, wenn die Galerie eine Kategorieseite aufbaut, prüft sie beide Dateien noch einmal gegen die Einstellungen und schreibt in den Link hinter jedem Vorschaubild entweder die Kopie oder das Original aus dem Ordner der Kategorie. Das Diagramm zeigt diesen Weg für zwei Beispielbilder: ein Handyfoto über der eingestellten Grenze und eine kleine Grafik darunter.

Animiertes Entscheidungsdiagramm: Beim Aufbau der Kategorieseite führt ein Handyfoto mit 4032 × 3024 Pixeln zur Kopie ob_3_foto.jpg in bilder/tn/, eine Grafik mit 800 × 600 Pixeln zum Original — Kopie oder Original: Drei Fragen beim Aufbau der Kategorieseite legen fest, welche Datei der spätere Klick lädt.

Die Grenze für die Bildvergrößerung beim Klick stellen Sie unter „Einstellungen“ im Abschnitt „Große Ansicht (Lightbox)“ ein. Die Tabelle zeigt die Werte ab Werk und was sie bewirken.

Einstellung	ab Werk	Wirkung
Maximale Breite der großen Ansicht	1024 Pixel	Breitere Bilder bekommen eine verkleinerte Kopie. Erlaubt sind 100 bis 10000.
Maximale Höhe der großen Ansicht	1024 Pixel	Dasselbe für die Höhe. 0 bei Breite und Höhe zeigt immer das Original.
Kleine Bilder vergrößern	Nein	Bei „Ja“ rechnet die Galerie auch kleinere Bilder auf die Grenze hoch.
Breite und Höhe der Vorschaubilder	200 und 200 Pixel	Rahmen, in den die Kachel eingepasst wird (Abschnitt „Vorschaubilder“).

Mit den Werten ab Werk wird aus dem Handyfoto mit 4032 × 3024 Pixeln eine Kopie mit 1024 × 768 Pixeln, aus einem Hochformatfoto derselben Kamera eine mit 768 × 1024. Das Vorschaubild passt in den Rahmen von 200 × 200 Pixeln, beim Querformat also 200 × 150. Muss ein Foto laut EXIF-Angabe gedreht werden, legt die Galerie die Kopie auch dann an, wenn es kleiner ist als die Grenze, und speichert sie richtig herum. Das Original auf dem Server bleibt in allen Fällen unverändert.

Stellen Sie „Kleine Bilder vergrößern“ auf „Ja“, wird auch eine Grafik mit 800 × 600 Pixeln auf 1024 × 768 hochgerechnet und wirkt dann weicher. Setzen Sie Breite und Höhe beide auf 0, lädt der Klick immer das Original, auch die 3 MB große Datei vom Handy. Nur einen der beiden Werte auf 0 zu setzen, lehnt die Seite ab und meldet am Feld: „Breite und Höhe der großen Ansicht müssen beide gesetzt sein.“

Ändern Sie die Grenze später, etwa auf 1600 Pixel, erneuert die Galerie die Kopien beim nächsten Aufruf der jeweiligen Kategorie. Unabhängig davon passt die Lightbox jedes Bild an das Browserfenster an. Wischgesten, eine Diashow und einen Vollbildmodus kennt sie nicht. Wer die Einstellungen mit eigenen Fotos ausprobieren möchte, kann das Bildergalerie-Script kostenlos herunterladen.

Häufige Fragen

Bevor Sie Bilder hochladen, lohnt ein Blick auf die Fragen, die über eine scharfe und schnelle Vergrößerung entscheiden.

Wann lädt der Browser die große Datei?

Erst beim Klick. Auf der Kategorieseite stehen nur die Vorschaubilder, die große Fassung steckt lediglich als Adresse im Link. Öffnet der Besucher ein Bild, lädt die Lightbox es und holt danach im Hintergrund das vorige und das nächste Bild der Kategorie, damit das Blättern ohne Wartezeit klappt.

Wie groß sollte ich Bilder für die Vergrößerung hochladen?

Mindestens so groß wie die größte Darstellung, im Bildergalerie-Script ab Werk also 1024 Pixel an der längeren Seite. Mehr schadet nicht, solange der Server das Foto noch verarbeiten kann. Eine längere Seite von etwa 2500 Pixeln ist ein guter Kompromiss: genug Reserve für eine spätere höhere Einstellung, aber kein Problem für den Arbeitsspeicher.

Muss ich die Vorschaubilder selbst erstellen?

Nein. Das Bildergalerie-Script legt beim Hochladen das Vorschaubild und, wenn nötig, die Kopie für die große Ansicht selbst an. Fehlt eine dieser Dateien später oder passt sie nicht mehr zu den Einstellungen, erzeugt die Galerie sie beim nächsten Aufruf der Kategorie neu.

Kann ich die Bildvergrößerung beim Klick im Bildergalerie-Script abschalten?

Ja. Entfernen Sie in tpl/bildergalerie.html die drei <script>-Zeilen und die Zeile mit css/lightbox.css. Ein Klick öffnet dann die Bilddatei direkt im Browser. Vergrößert wird weiterhin, nur ohne dunklen Hintergrund und ohne Blättern.