Bilder für die Website optimieren

Bilder sind auf fast jeder Website der größte Posten in der Datenmenge – oft schwerer als HTML, CSS, Schriften und Skripte zusammen. Gleichzeitig ist es der Posten, an dem sich mit dem geringsten Aufwand am meisten ändern lässt. Ein Rohfoto aus der Kamera bringt drei bis acht Megabyte mit. Dasselbe Foto, richtig vorbereitet, liegt bei 120 bis 250 Kilobyte, und kein Besucher sieht den Unterschied.

Dieser Text geht die Kette in der Reihenfolge durch, in der sie den größten Effekt hat. Diese Reihenfolge ist wichtig: Wer zuerst komprimiert und danach die Abmessungen ändert, macht die Arbeit doppelt und verliert zweimal Qualität.

Schritt 1: Die richtigen Abmessungen

Der größte Hebel ist auch der, der am häufigsten übersehen wird. Ein Bild, das in der Seite 800 Pixel breit dargestellt wird, aber mit 4000 Pixeln Breite hochgeladen wurde, überträgt das Fünffache an Daten für null sichtbaren Gewinn.

So finden Sie die tatsächliche Anzeigebreite heraus: Öffnen Sie die Seite, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie „Untersuchen“. Der Browser zeigt die dargestellte Größe an. Diesen Wert verdoppeln Sie – das deckt hochauflösende Bildschirme ab – und das ist Ihre Zielbreite.

Einsatz	Typische Anzeigebreite	Sinnvolle Dateibreite
Bild im Fließtext	700 px	1400 px
Titelbild über dem Artikel	1200 px	1600 bis 2000 px
Vorschaubild in einer Liste	350 px	700 px
Logo im Kopfbereich	180 px	360 px
Open-Graph-Bild beim Teilen	fest	1200 × 630 px

Mehr als 2000 Pixel Breite braucht praktisch keine Website. Selbst auf einem großen Monitor ist der Inhaltsbereich selten breiter.

Zuschneiden und skalieren geht direkt hier: Bilder zuschneiden und skalieren bringt das Bild in einem Schritt auf Ausschnitt und Zielbreite.

Schritt 2: Das richtige Format

Erst wenn die Abmessungen stimmen, lohnt sich die Formatfrage. Die kurze Antwort für den Regelfall: WebP. Es wird von jedem aktuellen Browser gelesen, kann Transparenz, und liefert bei gleicher sichtbarer Qualität 25 bis 35 Prozent kleinere Dateien als JPEG.

Die längere Antwort hängt am Motiv:

• Fotos und alles mit weichen Verläufen – WebP, bei sehr großen Titelbildern auch AVIF.
• Logos, Symbole, Screenshots mit Text – PNG oder WebP verlustfrei. Verlustbehaftete Kompression macht an harten Kanten sichtbare Schlieren.
• Alles, was als Vektor vorliegt – SVG. Ein Logo als SVG ist meist kleiner als jedes Pixelformat und bleibt in jeder Größe scharf.

Was verlustbehaftete Kompression an harten Kanten anrichtet, zeigt ein Ausschnitt aus einem Bildschirmfoto dieser Startseite, vierfach vergrößert:

Die gemessenen Dateigrößen derselben Vorlage machen den zweiten Punkt deutlich: Bei Text und Flächen ist JPG nicht nur unsauberer, sondern auch größer.

Format	Dateigröße
PNG	51 KB
WebP verlustfrei	30 KB
WebP, Qualität 80	38 KB
JPG, Qualität 80	68 KB
JPG, Qualität 50	47 KB
JPG, Qualität 20	31 KB

Bei einem Foto kehrt sich das Verhältnis um: Dort ist PNG das Vielfache von JPG oder WebP, weil kaum ein Bildpunkt dem nächsten gleicht und es nichts verlustfrei zusammenzufassen gibt.

Ein häufiges Missverständnis: Aus einem PNG lässt sich kein SVG machen. Ein Vektorformat beschreibt Formen, ein Pixelformat beschreibt Bildpunkte. Wer ein Logo als SVG braucht, muss es zeichnen lassen, nicht umwandeln.

Für den Wechsel zwischen den Formaten gibt es Bilder umwandeln. Eine ausführliche Gegenüberstellung steht unter Bildformate im Vergleich.

Schritt 3: Sinnvoll komprimieren

Kompression ist eine Abwägung, keine Einstellung, die man einmal richtig macht und dann vergisst. Der brauchbare Bereich liegt bei Qualität 75 bis 85. Darunter werden gleichmäßige Flächen fleckig, Himmel bekommen Streifen, und an Kanten entstehen Schatten, die im Original nicht sind.

Der einzig verlässliche Weg ist der direkte Vergleich am eigenen Bild. Ein Porträt verträgt weniger Kompression als eine Landschaft, weil das Auge auf Hauttöne sehr empfindlich reagiert. Genau dafür zeigt Bilder komprimieren Original und Ergebnis nebeneinander.

Eine Regel, die viel Ärger erspart: Komprimieren Sie immer aus dem Original. Ein bereits komprimiertes JPEG erneut zu komprimieren verwirft Bildinformation ein zweites Mal, ohne dass der Gewinn nennenswert wäre.

Schritt 4: Richtig einbinden

Die beste Datei nützt wenig, wenn das HTML sie schlecht einbindet. Vier Dinge gehören zu jedem Bild:

<img src="/bilder/werkstatt-1400.webp"
     width="1400" height="933"
     alt="Zwei Personen montieren ein Regal in einer Werkstatt"
     loading="lazy">

• width und height reservieren den Platz, bevor das Bild da ist. Ohne sie springt das Layout beim Laden – das ist der Wert, den Google als Cumulative Layout Shift misst.
• alt beschreibt, was zu sehen ist. Für Screenreader, für Suchmaschinen und für den Fall, dass das Bild nicht lädt. Rein dekorative Bilder bekommen alt="", nicht etwa gar kein Attribut.
• loading="lazy" verschiebt das Laden, bis das Bild in die Nähe des sichtbaren Bereichs kommt. Nicht beim Titelbild verwenden.
• Der Dateiname ist ein kleines Signal: werkstatt-regalmontage.webp sagt mehr als IMG_4711.webp.

Die drei Fehler, die fast jede Seite hat

1. Das Titelbild lädt verzögert. Irgendein Modul setzt loading="lazy" pauschal auf alle Bilder. Der Wert für den Largest Contentful Paint verschlechtert sich dadurch messbar.
2. Ein PNG, wo ein Foto ist. PNG ist verlustfrei – bei einem Foto bedeutet das schnell das Zehnfache der Datenmenge eines gleichwertigen WebP.
3. Kein width und height. Die Seite ruckelt beim Aufbau, weil jedes nachladende Bild den Text nach unten schiebt.

Wenn die Bilder erst noch beschafft werden müssen

Freie Bilder mit klarer Lizenz gibt es reichlich, aber „kostenlos“ und „darf ich verwenden“ sind zwei verschiedene Fragen. Welche Lizenz was erlaubt, steht unter Bildlizenzen verstehen. Fertige Sammlungen für Hintergründe und Symbole finden Sie unter Hintergrundbilder und Icons.

Soll ein Motiv freigestellt werden, hilft bei einfarbigem Hintergrund Hintergrund entfernen.