Bilder optimieren: weniger Ladezeit bei gleicher Qualität

Bilder optimieren ist meist der schnellste Weg zu einer schnelleren Website. Auf vielen Seiten machen Fotos mehr als die Hälfte der Datenmenge aus, oft weil sie in voller Kameraauflösung hochgeladen werden. Ein Foto mit 4 MB lässt sich fast immer auf 150 bis 300 KB bringen, ohne dass ein Besucher einen Unterschied sieht. Vier Stellschrauben bringen den größten Effekt: die richtige Größe in Pixeln, ein modernes Format, eine passende Kompression und das späte Laden von Bildern, die noch nicht sichtbar sind.

Warum Bilder so viel ausmachen

Ein Smartphone-Foto hat heute 12 Megapixel oder mehr, also etwa 4000 mal 3000 Pixel. Auf einer Website wird es selten breiter als 1200 Pixel angezeigt, auf dem Handy oft mit 400 Pixeln. Der Browser lädt aber immer die ganze Datei und verkleinert sie dann selbst. Bei schwachem Mobilnetz wartet der Besucher Sekunden auf Pixel, die er nie sieht.

Das wirkt sich direkt auf die Messwerte aus, die Google zur Bewertung der Ladezeit nutzt. Das größte Element im sichtbaren Bereich, oft ein Titelbild, bestimmt den Wert Largest Contentful Paint. Bilder ohne angegebene Größe lassen die Seite beim Laden springen und verschlechtern den Wert für Layout-Verschiebungen. Was hinter diesen Werten steckt, erklärt der Ratgeber zur Website-Performance.

Schritt 1: die richtige Größe in Pixeln

Wer Bilder optimieren will, beginnt bei den Pixeln. Bevor Sie über Formate nachdenken, verkleinern Sie das Bild auf die Größe, in der es höchstens angezeigt wird. Die Faustregel: so breit wie der breiteste Platz im Layout, für scharfe Darstellung auf hochauflösenden Bildschirmen bis zum Doppelten. Ein Bild für einen Inhaltsbereich von 800 Pixeln Breite braucht also höchstens 1600 Pixel.

• Titelbilder über die ganze Breite: 1920 bis 2400 Pixel
• Bilder im Text: 1200 bis 1600 Pixel
• Vorschaubilder und Galerien: 400 bis 800 Pixel
• Logos und Symbole: am besten als SVG, dann ist die Größe egal

Allein dieser Schritt spart oft 80 Prozent der Datenmenge.

Schritt 2: das passende Format

Jedes Format hat seine Stärke:

• JPEG: der Klassiker für Fotos. Wird von allem unterstützt, ist aber größer als neuere Formate.
• PNG: für Grafiken mit wenigen Farben, scharfen Kanten oder Transparenz. Für Fotos fast immer zu groß.
• WebP: bei gleicher Qualität meist 25 bis 35 Prozent kleiner als JPEG, kann Transparenz. Alle aktuellen Browser unterstützen es.
• AVIF: bei Fotos oft noch einmal deutlich kleiner als WebP, besonders bei Verläufen wie Himmel oder Hauttönen. Bei sehr feinen Details ist der Vorsprung kleiner. Alle aktuellen großen Browser können es, das Erzeugen dauert aber länger.
• SVG als Vektorformat: für Logos, Symbole und Diagramme. Gestochen scharf in jeder Größe und meist winzig.

Für die meisten Websites ist WebP heute der beste Standard für Fotos. AVIF lohnt sich zusätzlich bei großen Bildern wie Titelbildern.

Schritt 3: Bilder komprimieren

Beim Bilder optimieren entscheidet die Qualitätsstufe beim Speichern über die Dateigröße. Bei JPEG und WebP liegen gute Werte für Fotos meist zwischen 75 und 85. Darüber wächst die Datei stark, ohne dass man den Unterschied sieht. Darunter werden bei feinen Strukturen und Verläufen Kästchen und Schlieren sichtbar. Prüfen Sie das Ergebnis immer selbst in Originalgröße, Fotos von Gesichtern und Text im Bild sind empfindlicher als Landschaften.

Entfernen Sie beim Speichern auch die Metadaten. Fotos vom Handy enthalten oft Kameradaten und den genauen Aufnahmeort per GPS. Das kostet nicht nur Speicher, sondern kann auch verraten, wo jemand wohnt.

Zum Ausprobieren eignet sich Squoosh, ein kostenloses Werkzeug im Browser, das Original und Ergebnis nebeneinander zeigt. Die Bilder verlassen dabei Ihren Rechner nicht. Für viele Bilder auf einmal nutzen Sie Befehle in der Konsole:

# auf 1600 Pixel Breite verkleinern, Metadaten entfernen
magick foto.jpg -resize 1600x -strip -quality 82 foto-web.jpg
# als WebP und AVIF speichern
cwebp -q 80 foto-web.jpg -o foto.webp
avifenc -q 60 foto-web.jpg foto.avif

Die Programme stammen aus den Paketen ImageMagick, WebP und libavif und sind für Linux, macOS und Windows erhältlich.

Schritt 4: Bilder optimieren im HTML

Auch die beste Datei nützt wenig, wenn der Browser sie falsch lädt. Vier Angaben im HTML machen den Unterschied:

<picture>
  <source type="image/avif" srcset="foto-800.avif 800w, foto-1600.avif 1600w">
  <source type="image/webp" srcset="foto-800.webp 800w, foto-1600.webp 1600w">
  <img src="foto-1600.jpg" srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
       sizes="(max-width: 840px) 100vw, 800px"
       width="1600" height="1067" alt="Werkstatt mit Hobelbank"
       loading="lazy" decoding="async">
</picture>

• picture und source: Der Browser nimmt das erste Format, das er versteht, also AVIF, sonst WebP, sonst JPEG.
• srcset und sizes: Der Browser wählt die passende Breite für den Bildschirm. Das Handy lädt die 800er-Fassung, der große Monitor die 1600er.
• width und height: Der Browser reserviert den Platz, bevor das Bild geladen ist, und die Seite springt nicht.
• loading="lazy": Bilder weiter unten lädt der Browser erst, wenn der Besucher in ihre Nähe scrollt.

Eine wichtige Ausnahme: Das große Bild ganz oben auf der Seite bekommt kein loading="lazy", sondern fetchpriority="high". Sonst wartet der Browser damit, und der Wert für das größte Element wird schlechter. Vergessen Sie nicht den Alternativtext im Attribut alt. Er beschreibt den Inhalt für Menschen, die das Bild nicht sehen, und gehört zu einer barrierefreien Website.

WordPress und andere CMS

WordPress erzeugt beim Hochladen automatisch mehrere Größen eines Bildes und schreibt srcset, sizes, width, height und loading="lazy" selbst in den Code. WebP unterstützt es seit Version 5.8, AVIF seit Version 6.5, sofern der Server die Formate verarbeiten kann. Sehr große Fotos verkleinert WordPress beim Hochladen von selbst auf höchstens 2560 Pixel.

Wer in WordPress Bilder optimieren will, findet für die Umwandlung in WebP oder AVIF und eine stärkere Kompression passende Plugins. Achten Sie darauf, ob die Umwandlung auf Ihrem Server oder bei einem externen Dienst läuft. Bei externen Diensten verlassen Ihre Bilder den Server, und es gelten oft Grenzen pro Monat. Ältere Bilder können viele Plugins nachträglich umwandeln, legen Sie davor ein Backup an.

Joomla und TYPO3 bringen ebenfalls Funktionen für verkleinerte Bilder mit, TYPO3 zum Beispiel über die Bildverarbeitung mit ImageMagick oder GraphicsMagick. Wichtig ist bei jedem System: Laden Sie Originale nicht unnötig groß hoch, auch wenn das CMS verkleinert. Das Original bleibt sonst auf dem Webspace liegen und belegt Speicher.

Produktbilder im Onlineshop

Shops haben oft Hunderte oder Tausende Produktbilder, und jede Kategorieseite zeigt Dutzende davon. Hier lohnt sich das Bilder optimieren besonders:

• Einheitliche Vorgaben: Legen Sie ein festes Format fest, etwa quadratisch mit 1200 mal 1200 Pixeln auf weißem Hintergrund. Das Shopsystem erzeugt daraus die kleineren Fassungen für Listen und Vorschau.
• Zoom getrennt: Für die Lupe auf der Produktseite reicht eine größere Fassung, die erst beim Klick lädt.
• Kategorieseiten: Alle Bilder außer der ersten Reihe bekommen loading="lazy". WooCommerce und Shopware machen das mit aktuellen Versionen meist schon.
• Bestand aufräumen: Beim Löschen von Produkten bleiben die Bilder oft auf dem Server liegen. Ein Aufräumen spart Speicher und Backup-Zeit.

Was ein Shop sonst an Leistung braucht, beschreibt der Ratgeber zum Onlineshop-Hosting.

Caching und CDN

Bilder ändern sich selten. Mit langen Cache-Zeiten lädt der Browser sie beim nächsten Besuch gar nicht mehr. Ein Jahr ist ein üblicher Wert, wenn Sie bei Änderungen einen neuen Dateinamen vergeben. Wie Sie das einstellen, beschreibt der Ratgeber zu Caching-Strategien.

Ein CDN mit Bildbearbeitung kann Formate und Größen sogar automatisch passend zum Gerät liefern. Das lohnt sich bei vielen Besuchern aus verschiedenen Ländern oder sehr vielen Bildern. Für die meisten kleineren Seiten reichen richtig vorbereitete Dateien vom eigenen Server.

Ergebnis messen

Ob sich das Bilder optimieren gelohnt hat, zeigen Werkzeuge wie PageSpeed Insights oder Lighthouse in den Entwicklerwerkzeugen von Chrome. Sie nennen unter „Diagnose“ Bilder, die zu groß sind oder in einem alten Format vorliegen, samt möglicher Ersparnis. Im Bereich „Netzwerk“ der Entwicklerwerkzeuge sehen Sie mit dem Filter „Img“ jede Bilddatei mit ihrer Größe. Testen Sie auch mit gedrosselter Verbindung, etwa der Einstellung „Langsames 4G“, denn dort zeigt sich der Unterschied am deutlichsten.