Eine durchschnittliche Webseite überträgt heute zwischen 2 und 4 Megabyte pro Seitenaufruf. Der größte Brocken davon sind fast immer Bilder. Wer seine Website 2026 noch mit unkomprimierten JPEGs oder PNGs betreibt, zahlt doppelt: einmal beim Hosting durch höheren Speicherbedarf, und einmal beim Besucher, der auf das Laden wartet und im Zweifel abspringt. Google misst Ladezeiten über die Core Web Vitals, und der Largest Contentful Paint, also wie schnell das größte sichtbare Element erscheint, hängt direkt daran, wie schnell Bilder ausgeliefert werden.
Warum Bildgröße 2026 mehr zählt als je zuvor
Mobilgeräte machen in Deutschland mittlerweile rund 60 Prozent des Web-Traffics aus. Viele Nutzer surfen über LTE oder sogar noch über schwächere Verbindungen. Ein unkomprimiertes Headerbild mit 4 MB kann auf einem solchen Anschluss mehrere Sekunden brauchen. Studien zeigen, dass die Absprungrate ab einer Ladezeit von drei Sekunden stark ansteigt. Gleichzeitig hat Google angekündigt, Seitengeschwindigkeit als Rankingfaktor weiter zu gewichten. Wer also organisch gefunden werden will, kommt an der Bildoptimierung nicht vorbei.
Hinzu kommt der Kostenaspekt. Shared-Hosting-Pakete haben oft Speicherlimits zwischen 10 und 50 GB. Wer eine Bildergalerie oder einen Shop mit Produktfotos betreibt, erreicht diese Grenzen schneller als gedacht. Komprimierung kann den Speicherbedarf eines Bildes um 60 bis 80 Prozent senken, ohne dass ein normaler Besucher einen Unterschied sieht.
Formate im Vergleich: JPEG, PNG, WebP und AVIF
Die Wahl des Dateiformats ist der erste und wichtigste Schritt. Nicht jedes Format eignet sich für jeden Zweck.
- JPEG funktioniert gut für Fotos und komplexe Bilder mit vielen Farben. Bei Qualitätsstufe 75 bis 85 ist der Qualitätsverlust kaum sichtbar, die Datei aber deutlich kleiner.
- PNG sollte man nur dann verwenden, wenn Transparenz gebraucht wird, also etwa bei Logos oder Icons mit freiem Hintergrund. Für Fotos ist PNG fast immer die falsche Wahl, weil die Dateien unnötig groß werden.
- WebP liefert bei vergleichbarer Qualität rund 25 bis 35 Prozent kleinere Dateien als JPEG und unterstützt Transparenz. Alle modernen Browser verstehen WebP seit Jahren problemlos.
- AVIF ist der aktuell effizienteste Standard. Dateien sind gegenüber JPEG oft 50 Prozent kleiner. Allerdings ist die Enkodierung rechenintensiver, und ältere Browser wie der IE unterstützen das Format nicht. Für Projekte, bei denen die Zielgruppe moderne Endgeräte nutzt, lohnt sich der Umstieg.
Eine pragmatische Strategie für 2026: WebP als Standard, AVIF für Hauptbilder wo Browser-Unterstützung gegeben ist, und JPEG nur noch als Fallback in picture-Elementen.
Komprimierung: Was Tools leisten und worauf man achtet
Selbst im richtigen Format können Bilder noch unnötige Metadaten, Farbprofile für den Druck oder EXIF-Informationen wie GPS-Koordinaten enthalten. Ein Tool, das speziell zum Bilder komprimieren entwickelt wurde, entfernt genau diese überflüssigen Daten und reduziert die Dateigröße weiter, ohne die sichtbare Qualität anzutasten.
Für den Workflow gibt es grob zwei Ansätze: Vorverarbeitung vor dem Upload und automatische Optimierung auf dem Server. Wer WordPress nutzt, kennt Plugins wie Imagify oder ShortPixel, die Bilder beim Upload automatisch konvertieren und komprimieren. Wer ohne CMS arbeitet oder mehr Kontrolle haben will, optimiert Bilder direkt am Desktop, bevor sie hochgeladen werden.
Bei der Komprimierung gilt: Qualitätsstufe 80 ist für die meisten Fotos der ideale Kompromiss. Darunter werden Artefakte sichtbar, darüber steigt die Dateigröße überproportional. Ein konkretes Beispiel: Ein Produktfoto mit 3.200 mal 2.400 Pixeln landet unkomprimiert als JPEG oft bei 6 bis 8 MB. Dasselbe Bild als WebP mit Qualität 80 ist häufig unter 500 KB, ohne dass ein Kunde im Shop einen Unterschied bemerkt.
Richtige Ausgabegröße: Bilder nicht zu groß ausliefern
Komprimierung allein löst nur einen Teil des Problems. Häufig werden Bilder hochgeladen, die viel größer sind als nötig. Ein Bild mit 4.000 Pixeln Breite, das im Browser auf 800 Pixel angezeigt wird, überträgt fünfmal mehr Daten als gebraucht. Browser skalieren das Bild zwar herunter, aber das passiert erst nach dem Download.
Die Lösung ist das Responsive Images-Konzept mit dem srcset-Attribut. Dabei werden mehrere Versionen desselben Bildes in verschiedenen Größen bereitgestellt, und der Browser lädt automatisch die passende Variante je nach Bildschirmgröße. Für eine typische Blog-Seite reichen drei Größen: 400px für Smartphones, 800px für Tablets, 1200px für Desktop.
Wer mit WordPress arbeitet, bekommt diese Größen automatisch generiert. Bei statischen Sites oder individuellen Setups müssen die Größen manuell oder über Build-Tools wie Vite oder webpack angelegt werden.
Lazy Loading und Browser-Caching: Der unterschätzte Rest
Bildoptimierung hört nicht bei der Datei auf. Zwei weitere Maßnahmen bringen spürbare Ergebnisse ohne großen Aufwand.
Lazy Loading sorgt dafür, dass Bilder erst geladen werden, wenn sie in den sichtbaren Bereich scrollen. Das Attribut loading="lazy" reicht bei allen modernen Browsern. Damit werden beim ersten Seitenaufruf oft 50 bis 70 Prozent aller Bilder gar nicht erst übertragen. Für das erste sichtbare Bild, also das Headerbild oder das erste Produktfoto, sollte man dagegen loading="eager" setzen, damit es sofort verfügbar ist.
Browser-Caching stellt sicher, dass wiederkehrende Besucher Bilder nicht erneut herunterladen müssen. Über den Cache-Control-Header mit einem langen max-age, zum Beispiel einem Jahr für statische Assets, kann der Browser das Bild lokal speichern. Bei Änderungen am Bild hilft ein geänderter Dateiname oder ein Versionierungsparameter in der URL, damit der Browser die neue Version lädt.
Checkliste: Bildoptimierung vor dem nächsten Upload
| Schritt | Ziel |
|---|---|
| Format wählen | WebP für Fotos, PNG nur bei Transparenz |
| Ausgabegröße anpassen | Nie breiter als die maximale Darstellungsgröße |
| Qualität einstellen | 80 Prozent als Standardwert |
| Metadaten entfernen | EXIF und ICC-Profile für Web strippen |
| srcset einsetzen | Mehrere Größen für verschiedene Geräte |
| Lazy Loading aktivieren | loading=“lazy“ für alle Bilder unterhalb des Folds |
Bildoptimierung ist kein einmaliges Projekt, sondern eine Gewohnheit. Wer jeden Upload mit diesen sechs Schritten behandelt, hat nach einem Jahr eine spürbar schnellere Website, niedrigere Hostingkosten und bessere Positionen in den Suchergebnissen. Das klingt nach viel Aufwand, aber in der Praxis dauert die Optimierung eines einzelnen Bildes unter zwei Minuten.
