Frag einen beliebigen Webentwickler, was die meisten Websites ausbremst, und die Antwort ist fast immer dieselbe: Bilder. Bildoptimierung fürs Web heißt, Dateigrößen von Bildern zu verkleinern, ohne sichtbar an Qualität zu verlieren, damit Seiten schneller laden und nicht schlechter aussehen. Ein einziges unkomprimiertes Foto kann mehrere Megabyte groß sein. Dasselbe Bild, richtig formatiert und komprimiert, kann unter 100 Kilobyte liegen, ohne sichtbaren Unterschied auf dem Bildschirm. Dieser Artikel zeigt die richtigen Dateiformate, wie Komprimierung funktioniert, wann du vor dem Hochladen die Größe änderst, wie Lazy Loading dazupasst und was in der Praxis den größten Unterschied bei der Ladegeschwindigkeit macht.
Bilder tragen auf den meisten Websites am meisten zum Seitengewicht bei. Eine Seite mit fünf nicht optimierten Fotos kann zehnmal mehr wiegen, als nötig wäre. Dieses Gewicht führt direkt zu langsamerem Laden, einem schlechteren Largest-Contentful-Paint-Wert und Besuchern, die gehen, bevor die Seite fertig aufgebaut ist. Warum die Ladegeschwindigkeit dein Geschäft und dein Ranking in der Suche beeinflusst, zeigt der Artikel Warum ist Website-Geschwindigkeit wichtig?
Warum verlangsamen Bilder Websites?
Öffnet ein Besucher eine Seite, lädt der Browser jede Ressource darauf herunter, bevor er die Seite anzeigt. Bilder sind meist die größten dieser Ressourcen. Jedes Bild braucht eine eigene Anfrage, und der Browser muss warten, bis diese Anfragen abgeschlossen sind, bevor er den Inhalt vollständig darstellen kann.
Wie Bilder die Lade-Kennzahlen beeinflussen
- Bilder wirken direkt auf den Largest Contentful Paint (LCP). Ist das größte sichtbare Element einer Seite ein Titelbild, ist der LCP die Zeit, die dieses Bild braucht, um vollständig zu laden
- Nicht optimierte Bilder erhöhen das gesamte Seitengewicht und verzögern damit jede andere Kennzahl auf der Ladezeitleiste
- Bei mobilen Verbindungen verstärkt sich der Effekt. Ein 3-MB-Titelbild, das über Breitband in zwei Sekunden lädt, braucht in einem durchschnittlichen Mobilnetz acht Sekunden oder mehr
- Mehrere große Bilder verschärfen das Problem. Eine Galerie oder Produktseite mit zehn unkomprimierten Fotos kann bei langsamen Verbindungen schwer zu nutzen sein
Welche Dateiformate solltest du für Webbilder nutzen?
JPEG
- Das Standardformat für Fotos und Bilder mit Farbverläufen und vielen Farben
- Unterstützt verlustbehaftete Komprimierung, bei der einige Bilddaten dauerhaft entfernt werden, um die Dateigröße zu senken
- Wird von allen Browsern und Geräten ohne Ausnahme unterstützt
- Eine Qualitätseinstellung von 75 bis 85 erzeugt Dateien, die 60 bis 80 Prozent kleiner sind als das Original, ohne sichtbaren Qualitätsverlust bei den meisten Fotos
PNG
- Das Format für Bilder mit transparentem Hintergrund, darunter Logos, Icons und Grafiken mit flächigen Farbbereichen
- Nutzt verlustfreie Komprimierung: Es werden keine Daten entfernt, das Bild bleibt exakt erhalten
- PNG-Dateien sind bei Fotos deutlich größer als JPEG. Nutze PNG nur, wenn Transparenz nötig ist, und JPEG oder WebP für Fotos
WebP
- Ein modernes Format, das JPEG und PNG mit besserer Komprimierung bei gleicher Qualität ersetzen soll
- WebP-Bilder sind typischerweise 25 bis 35 Prozent kleiner als gleichwertige JPEG-Dateien
- Unterstützt verlustbehaftete und verlustfreie Komprimierung sowie Transparenz
- Wird von allen wichtigen Browsern unterstützt. Wandelt dein Website-Builder Bilder nicht automatisch in WebP um, wandle sie vor dem Hochladen selbst um
AVIF
- Ein neueres Format mit besserer Komprimierung als WebP, oft 50 Prozent kleiner als JPEG bei vergleichbarer Qualität
- Die Browser-Unterstützung wächst, ist aber noch nicht allgemein. Nutze AVIF, wo es unterstützt wird, mit automatischem Ersatz durch WebP oder JPEG für Browser, die es nicht unterstützen
Was ist Bildkomprimierung und wie funktioniert sie?
Komprimierung verkleinert die Dateigröße, indem sie Bilddaten entfernt oder vereinfacht. Es gibt zwei Arten, und der Unterschied bestimmt, wann du welche einsetzt.
Verlustbehaftete Komprimierung
- Entfernt dauerhaft einige Bilddaten, um eine kleinere Dateigröße zu erreichen
- Die entfernten Daten werden danach gewählt, was das menschliche Auge am wenigsten bemerkt, meist feine Farbabweichungen und kleine Texturdetails
- Wird bei JPEG und verlustbehaftetem WebP genutzt
- Eine Qualitätseinstellung von 75 bis 85 erzeugt deutlich kleinere Dateien mit Bildern, die für die meisten praktischen Zwecke wie das unkomprimierte Original aussehen
- Speichere ein bereits komprimiertes JPEG nicht noch einmal mit niedrigerer Qualität ab. Das häuft Komprimierungsartefakte an und verschlechtert das Bild bei jedem Speichern weiter
Verlustfreie Komprimierung
- Verkleinert die Dateigröße, ohne Bilddaten zu entfernen. Jeder Pixel bleibt exakt erhalten
- Wird bei PNG und verlustfreiem WebP genutzt
- Spart weniger Dateigröße als verlustbehaftete Komprimierung, aber ganz ohne Qualitätsverlust
- Am besten für Produktdiagramme, Screenshots, textlastige Grafiken oder jedes Bild, bei dem Komprimierungsartefakte sichtbar oder inakzeptabel wären
Musst du Bilder vor dem Hochladen in der Größe ändern?
Dateigröße und Pixelmaße sind getrennte Themen, und beide beeinflussen die Ladegeschwindigkeit. Ein 4.000 Pixel breites Bild zu komprimieren, hilft nicht, wenn der Browser es nur 800 Pixel breit anzeigen muss. Der Browser lädt das volle 4.000-Pixel-Bild herunter und skaliert es im Anzeigebereich herunter. Das verschwendet Bandbreite und verlangsamt die Seite für jeden Besucher.
So passt du die Bildgröße vor dem Hochladen richtig an
- Finde die maximale Breite heraus, in der das Bild je angezeigt wird. Bei Desktop-Bildern in voller Breite sind das typischerweise 1.440 bis 1.920 Pixel
- Bei Bildern in Spalten oder Karten ist die angezeigte Breite kleiner, oft 400 bis 800 Pixel
- Ändere die Größe des Bildes auf seine maximale Anzeigegröße, bevor du es hochlädst
- Für Retina- und hochauflösende Displays multiplizierst du die Anzeigebreite mit 1,5 bis 2. Ein 400 Pixel breites Kartenbild profitiert von einer 600 bis 800 Pixel breiten Quelldatei, damit es auf Retina-Bildschirmen scharf aussieht
Was ist Lazy Loading und wie wirkt es sich auf die Bildoptimierung aus?
Lazy Loading verzögert den Download von Bildern, die noch nicht im Anzeigebereich sichtbar sind. Statt jedes Bild der Seite auf einmal zu laden, lädt der Browser Bilder erst, wenn Besucher in ihre Nähe scrollen. Bei Seiten mit vielen Bildern senkt das das anfängliche Seitengewicht deutlich und verbessert die Time to Interactive für den Inhalt, der ohne Scrollen sichtbar ist.
- Lazy Loading wird in allen wichtigen Browsern nativ über das Attribut
loading="lazy"bei Bild-Tags unterstützt - Wende Lazy Loading nicht auf Bilder im sichtbaren Bereich an. Das Titelbild und alle Inhalte, die ohne Scrollen sichtbar sind, sollten sofort laden
- Wende Lazy Loading auf alle Bilder unterhalb des sichtbaren Bereichs an, darunter Produktgalerien, Blog-Vorschaubilder und bildlastige Abschnitte weiter unten auf der Seite
Eine ausführliche Erklärung, wie Lazy Loading funktioniert und wann du es nutzt, findest du im Artikel Was ist Lazy Loading und wie funktioniert es?
Was sind responsive Bilder und warum sind sie wichtig?
Ein responsives Bild liefert je nach Bildschirmgröße des Besuchers eine andere Dateigröße. Statt jedem Gerät ein 1.920-Pixel-Bild zu schicken, auch einem Besucher mit einem 375 Pixel breiten Handybildschirm, lassen responsive Bilder den Browser nur anfordern, was er braucht.
Wie responsive Bilder die mobile Ladezeit senken
- Ein mobiler Besucher bekommt eine 400-Pixel-Version des Bildes statt der vollen Desktop-Datei, was die Downloadgröße drastisch senkt
- Responsive Bilder nutzen das Attribut
srcset, um mehrere Quelldateien in verschiedenen Breiten festzulegen, aus denen der Browser die passende auswählt - Website-Builder, die das automatisch übernehmen, ersparen dir, mehrere Bildgrößen von Hand zu erstellen
- Responsive Bilder verbessern direkt die Core Web Vitals auf dem Handy, wo die Bildoptimierung den größten Einfluss auf den LCP hat
Was die Core Web Vitals sind und wie der LCP bewertet wird, zeigt der Artikel Was sind die Core Web Vitals?
Wie optimierst du Bilder Schritt für Schritt?
Vor dem Hochladen
- Ändere die Bildgröße auf die richtigen Anzeigemaße
- Wähle das richtige Format: WebP für Fotos und allgemeine Grafiken, PNG nur, wenn Transparenz nötig ist
- Komprimiere bei verlustbehafteten Formaten mit einer Qualitätseinstellung von 75 bis 85
- Prüfe die Dateigröße. Ein typisches Webbild sollte unter 200 KB liegen. Titelbilder auf dem Desktop dürfen bis zu 400 KB groß sein. Alles darüber solltest du vor dem Hochladen noch einmal überarbeiten
Nach dem Hochladen
- Ergänze bei jedem Bild einen beschreibenden Alt-Text. Das ist wichtig für die Barrierefreiheit und trägt zur Sichtbarkeit in der Suche bei. Eine ausführliche Anleitung findest du im Artikel So nutzt du Bilder auf deiner Website
- Wende Lazy Loading auf alle Bilder unterhalb des sichtbaren Bereichs an
- Mach nach dem Hinzufügen neuer Bilder einen Geschwindigkeitstest der Seite. Ein einziges nicht optimiertes Bild kann alle anderen Geschwindigkeitsgewinne der Seite zunichtemachen
Laufend
- Prüfe neue Bilder vor jedem Hochladen. Nicht optimierte Bilder rutschen leicht durch, wenn man schnell arbeitet
- Mach einen Geschwindigkeitstest, nachdem ein größerer Schwung neuer Bilder veröffentlicht wurde
- Überprüfe ältere Bilder, wenn die Website älter ist als die heutigen Optimierungsmethoden. Alte Bildarchive sind eine häufige und übersehene Quelle für Geschwindigkeitsprobleme
Eine Anleitung, wie du die Leistung deiner ganzen Website testest, findest du im Artikel So testest du die Geschwindigkeit deiner Website.
So optimiert WEMASY Bilder
Der Website-Builder von WEMASY komprimiert und konvertiert Bilder beim Hochladen automatisch. Bilder werden im WebP-Format ausgeliefert, wo der Browser es unterstützt, mit Ersatzformaten für ältere Geräte. Beim Hochladen entstehen mehrere Größen, sodass mobile Besucher passend große Dateien bekommen, ohne dass du etwas einstellen musst.
Lazy Loading ist bei Bildern unterhalb des sichtbaren Bereichs auf allen mit WEMASY gebauten Seiten standardmäßig aktiv. Den Alt-Text ergänzt du im Bildeditor der Plattform. Die Werte zur Seitengeschwindigkeit, auch der LCP, siehst du im Analysen-Dashboard von WEMASY. Bildbezogene Probleme werden pro Seite zusammen mit konkreten Empfehlungen markiert.
Was enthalten ist, siehst du beim WEMASY Website-Builder. Die Tarife findest du auf der Preisseite.
Häufig gestellte Fragen
Was ist Bildoptimierung fürs Web?
Bildoptimierung fürs Web heißt, die Dateigröße eines Bildes zu verkleinern und dabei eine für die Bildschirmanzeige akzeptable Qualität zu behalten. Dazu gehören das richtige Dateiformat, Komprimierung auf ein passendes Qualitätsniveau, die Anpassung auf die tatsächlichen Anzeigemaße und Techniken wie Lazy Loading und responsive Bilder, damit Besucher nur die Version der Datei herunterladen, die ihr Gerät und ihre Verbindung brauchen. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Welches ist das beste Bildformat für eine Website?
WebP ist für die meisten Webbilder das beste Format. Es komprimiert bei vergleichbarer Bildqualität deutlich besser als JPEG, unterstützt wie PNG Transparenz und wird von allen wichtigen Browsern unterstützt. Für Bilder, die einen transparenten Hintergrund und pixelgenaue Präzision brauchen, ist PNG die richtige Wahl. AVIF komprimiert noch besser als WebP, wird aber weniger breit unterstützt und funktioniert am besten mit einem automatischen Ersatzformat.
Wie stark kann Komprimierung die Dateigröße senken?
Verlustbehaftete Komprimierung mit einer Qualitätseinstellung von 75 bis 85 senkt die JPEG-Dateigröße typischerweise um 60 bis 80 Prozent, ohne sichtbaren Qualitätsunterschied bei den meisten Fotos. Die Umwandlung von JPEG in WebP bei gleicher Qualität senkt die Dateigröße um weitere 25 bis 35 Prozent. Ein Foto, das mit 4 MB beginnt, lässt sich oft durch die Kombination aus richtiger Größenanpassung, Formatumwandlung und Komprimierungseinstellungen auf unter 150 KB bringen.
Beeinflusst Bildoptimierung die SEO?
Ja. Nicht optimierte Bilder gehören zu den häufigsten Ursachen für einen schlechten Largest-Contentful-Paint-Wert, einen Core Web Vital, den Suchmaschinen als Ranking-Signal nutzen. Seiten mit großen, unkomprimierten Bildern schneiden beim LCP oft schlecht ab im Vergleich zu Seiten mit demselben Inhalt in optimierter Form. Außerdem trägt ein beschreibender Alt-Text bei Bildern zur Sichtbarkeit in der Bildersuche und zur allgemeinen Barrierefreiheit der Seite bei.
Sollte man Lazy Loading bei allen Bildern nutzen?
Nein. Lazy Loading sollte nur bei Bildern angewendet werden, die unterhalb des sichtbaren Bereichs erscheinen, also bei Inhalt, der beim ersten Öffnen der Seite nicht zu sehen ist. Bilder im sichtbaren Bereich, darunter das Titelbild oder jedes auffällige Bild oben auf der Seite, sollten sofort laden. Lazy Loading bei Bildern im sichtbaren Bereich verzögert den LCP, was die Core-Web-Vitals-Werte und die Erfahrung der Besucher verschlechtert.
Wie groß sollten Website-Bilder sein?
Ein typisches Webbild sollte unter 200 KB liegen. Titelbilder und Bilder in voller Breite auf dem Desktop dürfen bis zu 400 KB groß sein, ohne die Ladezeit spürbar zu beeinflussen, wenn sie im WebP-Format und richtig komprimiert sind. Bilder in Karten, Vorschaubildern und kleineren Containern sollten auf ihre tatsächliche Anzeigebreite zugeschnitten sein. Ein 1.920-Pixel-Bild in einem 400-Pixel-Container zu liefern, verschwendet Bandbreite bei jedem Besucher auf jedem Gerät.