Bildergalerie auf der Website: viele Fotos, trotzdem schnell
Eine Bildergalerie bleibt schnell, wenn jedes Foto in passenden Größen als WebP vorliegt, der Browser über srcset und sizes die richtige Datei wählt und nur das erste Bild sofort lädt. Alle weiteren Bilder laden erst, wenn der Besucher in ihre Nähe scrollt.
Studios, Handwerksbetriebe und Restaurants zeigen ihre Arbeit mit Fotos, und eine Galerie mit zwanzig oder dreißig Bildern ist schnell gefüllt. Kommen die Fotos direkt aus der Kamera, lädt die Seite für jedes Bild mehrere Megabyte, auch für Bilder, die der Besucher nie ansieht. Mit drei Maßnahmen bleibt dieselbe Galerie auf dem Smartphone schnell: kleinere Dateien, die passende Größe je Bildschirm und spätes Laden der Bilder weiter unten.
Allgemeine Ursachen für lange Ladezeiten, von Schriften bis Server, stehen unter Langsame Website: zehn Ursachen und wie Sie sie beheben. Hier geht es nur um Seiten mit vielen Fotos.
Größenordnung
Warum Bilder Websites bremsen
Ein Bild belastet die Seite mit seiner Dateigröße, nicht mit seiner Darstellungsgröße. Der Browser lädt die ganze Datei, auch wenn er sie anschließend auf ein Zehntel der Breite verkleinert. Wie groß der Unterschied ist, zeigt ein selbst erzeugtes Testbild: 4.000 mal 3.000 Pixel, mit Verläufen, Formen und feinem Rauschen ähnlich einem Foto, als JPEG in hoher Qualität gespeichert.
Original, 4.000 Pixel breit: 2.534.758 Byte, rund 2,5 MB.
JPEG, 1.600 Pixel breit, Qualität 80: 232.626 Byte.
WebP, 1.600 Pixel breit, Qualität 75: 31.876 Byte.
WebP, 800 Pixel breit, Qualität 75: 15.278 Byte.
Für eine Galerie mit 24 Fotos heißt das: 24 Originale sind zusammen 60,8 MB, 24 WebP-Dateien in 800 Pixel Breite rund 367 KB. Die Verhältnisse gelten für dieses Testbild; ein echtes Foto mit viel Struktur lässt sich weniger stark verkleinern, und WebP glättet feines Rauschen stärker als JPEG. Bei zwölf Fotos im Querformat mit 4.500 mal 2.533 Pixeln lagen die WebP-Fassungen mit 1.600 Pixeln Breite zwischen 17 und 62 KB, die JPEG-Rückfallbilder derselben Breite zwischen 83 und 238 KB. Fotos mit viel feiner Struktur wie Laub, Stoff oder Kies werden deutlich größer. Die größte Ersparnis bringt in jedem Fall das Verkleinern auf die Breite, in der das Bild angezeigt wird.
Dateien
Formate und Größen
Für Fotos empfiehlt MDN die Formate WebP und AVIF, weil sie meist besser komprimieren als JPEG, und JPEG als Rückfall. WebP unterstützen laut MDN alle aktuellen Versionen von Chrome, Edge, Firefox, Opera und Safari; auf dem Mac braucht es Safari 14 mit macOS Big Sur oder neuer. AVIF unterstützen Chrome ab Version 85, Edge ab 121, Firefox ab 93 und Safari ab 16.1. Wer AVIF zusätzlich anbietet, legt es im picture-Element vor WebP; der Browser nimmt die erste Quelle, die er versteht.
Welche Breiten Sie brauchen, ergibt sich aus dem Layout. Eine Galerie mit drei Spalten in einem Bereich von 1.232 Pixeln ist am Rechner 400 Pixel je Bild breit, auf Bildschirmen mit doppelter Pixeldichte braucht sie also 800 Pixel. Auf dem Smartphone füllt dasselbe Bild die ganze Breite, und bei dreifacher Pixeldichte wählt der Browser die größere Datei. Zwei Größen je Foto, 800 und 1.600 Pixel, decken diese Fälle ab; eine dritte braucht es erst für eine Vollbildansicht.
Bei Antares München, einem Piercing- und Tattoo-Studio, haben wir ein fertiges Design in einem Monat als responsive Website mit Tailwind CSS umgesetzt, lesbar auf Smartphone, Tablet und Desktop. In einer solchen Umsetzung stehen die Umbruchpunkte des Layouts fest, bei Tailwind CSS standardmäßig 640, 768, 1.024, 1.280 und 1.536 Pixel, und genau aus diesen Werten entsteht das sizes-Attribut eines Bildes.
Die Dateien lassen sich mit cwebp erzeugen, dem Kommandozeilenwerkzeug von Google für WebP. Das Skript wandelt alle JPEG-Dateien eines Ordners in beide Breiten um, legt in der größten Breite ein JPEG als Rückfall an und überspringt Breiten, die größer als das Original wären, damit kein Bild künstlich vergrößert wird. Ein Original unter 800 Pixeln bleibt in seiner eigenen Breite. Am Ende gibt es je Foto die Werte für srcset, src, width und height aus, die in das HTML-Muster gehören; bei schmalen Originalen steht in srcset dann nur eine Datei.
Das JPEG entsteht über eine verlustfreie Zwischenstufe ohne Metadaten, weil sips unter macOS beim Umwandeln die Kameradaten samt GPS-Position behalten würde. Ist ImageMagick installiert, nutzt das Skript magick, sonst sips; auf Linux ohne ImageMagick bricht es mit einer Meldung ab.
#!/usr/bin/env bash
# Creates WebP files in 800 and 1600 px plus a JPEG fallback for every JPEG
# in a folder and prints the srcset, src, width and height for the HTML.
# Usage: make-webp.sh <source-folder> <target-folder>
set -euo pipefail
src="${1:?usage: make-webp.sh <source-folder> <target-folder>}"
dst="${2:?usage: make-webp.sh <source-folder> <target-folder>}"
for tool in cwebp dwebp; do
command -v "$tool" >/dev/null || { echo "$tool not found (package webp)" >&2; exit 1; }
done
if command -v magick >/dev/null; then encoder=magick
elif command -v sips >/dev/null; then encoder=sips
else echo "need ImageMagick (magick) or macOS sips for the JPEG fallback" >&2; exit 1; fi
size_of() { file -b "$1" | sed -nE 's/.*[ ,]([0-9]+) ?x ?([0-9]+)([ ,].*)?$/\1 \2/p' | tail -n 1; }
mkdir -p "$dst"
shopt -s nullglob nocaseglob
files=("$src"/*.jpg "$src"/*.jpeg)
[ ${#files[@]} -gt 0 ] || { echo "no JPEG files in $src" >&2; exit 1; }
tmp="$(mktemp -d)"; trap 'rm -rf "$tmp"' EXIT
for file in "${files[@]}"; do
name="$(basename "${file%.*}")"; name="${name// /-}"
read -r original_width _ <<< "$(size_of "$file")" || true
[ -n "${original_width:-}" ] || { echo "skipped, width unknown: $file" >&2; continue; }
widths=()
for width in 800 1600; do
[ "$width" -le "$original_width" ] && widths+=("$width")
done
# Originals narrower than 800 px are kept at their own width, never enlarged.
[ ${#widths[@]} -gt 0 ] || widths=("$original_width")
srcset=""
for width in "${widths[@]}"; do
cwebp -quiet -q 75 -metadata none -resize "$width" 0 "$file" -o "$dst/$name-$width.webp" \
|| { echo "skipped, cwebp failed: $file" >&2; continue 2; }
srcset="${srcset:+$srcset, }$name-$width.webp ${width}w"
done
# JPEG fallback in the largest width, built from a lossless copy without
# metadata so that no camera or GPS data ends up in the published file.
largest="${widths[${#widths[@]}-1]}"
fallback="$dst/$name-$largest.jpg"
cwebp -quiet -lossless -metadata none -resize "$largest" 0 "$file" -o "$tmp/l.webp"
dwebp -quiet "$tmp/l.webp" -o "$tmp/l.png"
if [ "$encoder" = magick ]; then
magick "$tmp/l.png" -strip -quality 80 "$fallback"
else
sips -s format jpeg -s formatOptions 80 "$tmp/l.png" --out "$fallback" >/dev/null
fi
read -r w h <<< "$(size_of "$fallback")"
echo "$name: srcset=\"$srcset\" src=\"$name-$largest.jpg\" width=\"$w\" height=\"$h\""
done
Laden
Lazy Loading richtig einsetzen
Mit dem Attribut loading="lazy" lädt der Browser ein Bild erst, wenn es sich dem sichtbaren Bereich nähert. Den Abstand legt der Browser selbst fest, abhängig von Bildtyp und Verbindung. web.dev nennt als Unterstützung Chrome ab 77, Edge ab 79, Firefox ab 75 und Safari ab 15.4; ein Skript braucht es dafür nicht.
Drei Regeln gehören dazu. Das erste Bild der Galerie und alles, was beim Aufruf sichtbar ist, lädt ohne loading="lazy"; web.dev warnt ausdrücklich davor, Bilder im ersten sichtbaren Bereich verzögert zu laden. Jedes Bild bekommt width und height, damit der Browser den Platz vorher reserviert und nichts springt. Und decoding="async" erlaubt dem Browser, das Bild zu entschlüsseln, ohne die übrige Darstellung aufzuhalten; MDN merkt an, dass der Effekt bei einzelnen Bildern kaum spürbar ist. Warum das größte sichtbare Bild für den LCP-Wert entscheidend ist, steht unter Core Web Vitals verstehen: LCP, INP und CLS ohne Fachchinesisch.
Das Muster für eine Galerie mit drei Spalten am Rechner, zwei auf dem Tablet und einer auf dem Smartphone:
Die Werte für srcset, src, width und height je Foto gibt das Skript oben aus. Die CSS-Regel width: 100% mit height: auto sorgt dafür, dass width und height nur das Seitenverhältnis vorgeben und das Bild trotzdem in seine Spalte passt.
<!-- First photo loads at once, the others only near the viewport -->
<ul class="gallery">
<li>
<picture>
<source type="image/webp"
srcset="/img/studio-01-800.webp 800w, /img/studio-01-1600.webp 1600w"
sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw">
<img src="/img/studio-01-1600.jpg" width="1600" height="1200"
alt="Behandlungsraum mit Liege und Arbeitslampe" decoding="async">
</picture>
</li>
<li>
<picture>
<source type="image/webp"
srcset="/img/studio-02-800.webp 800w, /img/studio-02-1600.webp 1600w"
sizes="(min-width: 1024px) 400px, (min-width: 640px) 50vw, 100vw">
<img src="/img/studio-02-1600.jpg" width="1600" height="1200"
alt="Vitrine mit Schmuck aus Titan" loading="lazy" decoding="async">
</picture>
</li>
<!-- every further photo like the second one -->
</ul>
<style>
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 1232px; padding: 0; list-style: none; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { display: block; width: 100%; height: auto; }
</style>
Wie die Zahlen im Muster zusammenhängen
Der Wert 800w in srcset muss laut MDN der tatsächlichen Breite der Datei entsprechen, sonst rechnet der Browser falsch. Das sizes-Attribut beschreibt die Breite, die das Bild im Layout einnimmt: ab 1.024 Pixel Fensterbreite 400 Pixel, ab 640 Pixel die halbe Fensterbreite, darunter die ganze. Fehlt sizes, nimmt der Browser die volle Fensterbreite an und lädt am Rechner für jede Spalte die große Datei.
Das JPEG im img-Element ist der Rückfall für Browser ohne WebP. Google empfiehlt für die Bildersuche ebenfalls, ein normales src-Attribut mitzugeben, weil nicht jeder Crawler srcset auswertet.
Redaktion
Pflege der Galerie ohne Technikwissen
Wer die Galerie pflegt, soll weder Pixel zählen noch Befehle ausführen. Das übernimmt das CMS: Redakteure laden das Original hoch, und das System erzeugt die Größen. In Statamic erledigt das die Bildbibliothek Glide; hinterlegte Vorgaben werden laut Dokumentation schon beim Hochladen erzeugt, alle anderen Größen beim ersten Aufruf und danach zwischengespeichert.
Drei Felder im Formular für ein Galeriebild ersparen später Nacharbeit:
Alternativtext als Pflichtfeld: Er beschreibt, was auf dem Foto zu sehen ist. Google nennt ihn das wichtigste Attribut für die Bildersuche, und Screenreader lesen ihn vor.
Sprechender Dateiname: etwa piercing-studio-behandlungsraum.jpg statt IMG_4711.JPG; auch das empfiehlt Google.
Obergrenze beim Hochladen: etwa 20 MB und nur JPEG, PNG oder WebP, damit niemand ein Video oder eine Druckdatei in die Galerie stellt.
Wie Bilder mit Alternativtext und Dateinamen in die Sichtbarkeit bei Google einzahlen, ist Teil unserer Suchmaschinenoptimierung.
Formate und Maße
Häufige Fragen
-
Für Fotos WebP, mit JPEG als Rückfall für sehr alte Browser. AVIF ist die zweite moderne Wahl und läuft in aktuellen Versionen aller großen Browser, braucht aber ein eigenes Werkzeug zum Erzeugen. PNG bleibt für Grafiken mit wenigen Farben und Transparenz, SVG für Logos und Symbole.
-
So breit, wie das Bild im Layout angezeigt wird, mal zwei für Bildschirme mit hoher Pixeldichte. Für eine Galerie mit drei Spalten genügen zwei Fassungen mit 800 und 1.600 Pixeln Breite. Wie groß die Datei dann wird, hängt vom Motiv ab: In unserem Testlauf mit zwölf Fotos lag die WebP-Fassung mit 1.600 Pixeln zwischen 17 und 62 KB, Motive mit viel feiner Struktur werden deutlich größer. Ein Galeriebild mit mehreren Megabyte ist ein Zeichen, dass das Original direkt ausgeliefert wird.
Fertiges Design, viele Fotos?
Wie wir ein vorgegebenes Design für ein Studio in einem Monat als responsive Website umgesetzt haben, zeigt das Projekt Antares München.
Nachweise
Quellen und Stand
Stand: 08.09.2026. Das Skript haben wir unter macOS mit bash 3.2, cwebp und dwebp 1.6.0 und sips ausgeführt: gegen zwölf Fotos mit 4.500 mal 2.533 Pixeln, ein erzeugtes Testbild mit 4.000 mal 3.000 Pixeln (die Werte in der Liste oben), ein Bild mit 1.200 und eines mit 600 Pixeln Breite, einen Dateinamen mit Leerzeichen und Endung .JPG, eine beschädigte Datei und einen leeren Ordner. Die Rückfallbilder enthielten danach keine GPS-Daten mehr. Den Weg über ImageMagick haben wir nicht ausgeführt. Das HTML-Muster ist gegen die MDN-Dokumentation geprüft und auf korrekte Verschachtelung getestet.
Artikel teilen