Bilder fürs Web optimieren: Formate, Größen und Ladezeit erklärt

Bilder sind auf fast jeder Website der größte Datenposten. Wer sie im Griff hat, hat die Ladezeit im Griff. Das Gute daran: Man muss dafür kein Grafikprogramm beherrschen – nur ein paar Grundlagen kennen.

Welches Format wofür?

Die Kurzfassung: Fotos als WebP. Logos und Icons als SVG. PNG nur, wenn du Transparenz brauchst und SVG nicht geht. AVIF ist technisch noch besser als WebP, wird aber von etwas weniger Werkzeugen unterstützt – als Ergänzung sinnvoll, nicht als einziges Format.

Der häufigste Fehler in der Praxis: ein Foto als PNG. Dasselbe Bild wiegt als PNG oft das Fünf- bis Zehnfache.

Wie groß muss ein Bild sein?

Die entscheidende Frage lautet: Wie breit wird es tatsächlich angezeigt?

Als Orientierung für die längste Kante:

• Vollbild-Hintergrund: 1.920 px
• Großes Bild im Textbereich: 1.200 px
• Bild in einer Karte oder Spalte: 800 px
• Vorschaubild: 400 px
• Logo im Kopfbereich: doppelte Anzeigegröße, also etwa 300 px für 150 px Darstellung

Warum die doppelte Größe bei kleinen Elementen? Moderne Displays stellen zwei Bildpunkte pro CSS-Pixel dar. Bei großen Bildern lohnt sich das nicht – dort fällt Unschärfe kaum auf, die Dateigröße aber sehr.

Ein 4.000 Pixel breites Kamerafoto auf einer Seite, die es mit 800 Pixeln anzeigt, verschwendet rund 95 Prozent der Daten.

Qualitätsstufe: 80 statt 100

Beim Speichern als JPG oder WebP kannst du eine Qualität wählen. Der Unterschied zwischen 100 und 80 ist mit bloßem Auge kaum zu sehen – die Datei ist bei 80 aber oft halb so groß.

Für Fotos auf Websites ist 75 bis 85 der sinnvolle Bereich. Nur bei sehr feinen Verläufen oder Produktdetails lohnt sich mehr.

Die drei Attribute, die im HTML fehlen sollten – aber es meistens tun

<img src="foto.webp" width="1200" height="800" alt="Beschreibung" loading="lazy" decoding="async">

• width und height: verhindern, dass die Seite beim Laden springt
• alt: beschreibt das Bild für Screenreader und Bildersuche
• loading="lazy": lädt das Bild erst, wenn es gebraucht wird

Wichtige Ausnahme: Das erste große Bild oben auf der Seite bekommt kein lazy, sondern fetchpriority="high". Sonst verzögerst du genau das Element, das Google für die Ladezeit misst.

Faustregel: Alles unterhalb des ersten Bildschirms lazy, das Hauptbild ganz oben high.

Kostenlose Werkzeuge

Du brauchst kein Photoshop:

• Squoosh (im Browser) – Größe ändern, Format wechseln, Qualität vergleichen, mit Vorher-Nachher-Ansicht
• Vorschau auf dem Mac – Größe ändern über „Werkzeuge → Größenkorrektur"
• ImageOptim – zieht die letzten Kilobyte heraus, ohne sichtbaren Verlust

Für eine ganze Website lohnt sich ein kleines Skript oder ein Bildoptimierungs-Dienst, der beim Hochladen automatisch mehrere Größen erzeugt.

Dateinamen: eine Minute, die sich lohnt

IMG_4711.jpg sagt Suchmaschinen nichts. speisekarte-trifold-restaurant-trier.webp schon.

Kleinschreibung, Bindestriche statt Leerzeichen und Unterstrichen, keine Umlaute. Das ist unspektakulär, aber es ist der einfachste Weg, in der Bildersuche überhaupt aufzutauchen.

Eine kurze Checkliste

1. Auf die tatsächlich benötigte Breite verkleinern
2. Als WebP speichern, Qualität etwa 80
3. Sprechenden Dateinamen vergeben
4. width, height und alt setzen
5. loading="lazy" – außer beim ersten großen Bild
6. Kurz nachmessen

Fazit

Bildoptimierung ist die Aufgabe mit dem besten Verhältnis von Aufwand zu Wirkung. Ein Nachmittag Arbeit an den Bildern bringt bei den meisten Seiten mehr Tempo als jede Umstellung des Hostings – und kostet nichts außer Zeit.

Und der Nebeneffekt: Wer seine Bilder ordentlich benennt und beschreibt, wird nebenbei in der Bildersuche gefunden.

Passend dazu: Design & Grafik aus Trier