Warum Bilder das Seitengewicht dominieren
Ein typisches HTML-Dokument mit CSS und JavaScript überträgt vielleicht 200–500 KB. Ein einzelnes unoptimiertes Foto kann 5–15 MB groß sein. Auf einer Mobilverbindung mit durchschnittlich 10–20 Mbit/s braucht ein 10-MB-Bild 4–8 Sekunden zum Herunterladen. Die meisten Besucher warten nicht.
Bilder beeinflussen auch die Core Web Vitals — Googles Metriken für die Seitenerfahrung, die das Suchranking beeinflussen. Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte sichtbare Element gerendert ist. Wenn dieses Element ein Hero-Bild ist, bestimmt seine Downloadzeit direkt Ihren LCP-Wert. Ein langsamer LCP schadet sowohl der Nutzererfahrung als auch dem Suchranking.
Die üblichen Verdächtigen und die Lösung für jeden
Langsames Laden von Bildern lässt sich fast immer auf einen davon zurückführen. Jeder hat eine schnelle Lösung und einen spürbaren Nutzen:
| Ursache | Lösung | Typische Einsparung |
|---|---|---|
| Falsches Format (PNG-Foto) | In WebP oder JPG umwandeln | 80 % oder mehr |
| Upload in voller Auflösung | Auf etwa die 2-fache Anzeigebreite skalieren | 70–80 % |
| Schwache oder übersprungene Kompression | Bei Qualität 75–85 exportieren | 3–5× vs. Qualität 95 |
| Kein Lazy Loading | loading=lazy unterhalb des Falzes hinzufügen | Weniger Daten beim ersten Laden |
| HEIC unkonvertiert ausgeliefert | Zuerst in WebP oder JPG umwandeln | Vermeidet defekte Bilder |
Das falsche Format für den Inhaltstyp
PNG für Fotografien zu nutzen, ist einer der häufigsten Bildfehler im Web. PNG ist verlustfrei und bewahrt jedes Pixel, was für Logos und Screenshots zählt, aber nicht für Fotos. Ein als PNG gespeichertes Foto kann 15–25 MB groß sein. Dasselbe Foto als JPEG in hoher Qualität ist 2–5 MB. Als WebP kann es bei identischer sichtbarer Qualität unter 2 MB sein.
Das Umgekehrte ist auch ein Fehler: JPEG für Screenshots, Diagramme oder Bilder mit Text zu nutzen. JPEG bringt sichtbare Artefakte an harten Kanten und flächigen Farbbereichen ein, was hohe Qualitätseinstellungen erfordert, die große Dateien erzeugen. PNG oder WebP handhabt diesen Inhalt kleiner und sauberer.
Bilder in voller Kameraauflösung hochladen
Ein Foto von einem modernen Smartphone hat 12–50 Megapixel und ist 3000–8000 Pixel breit. Die meisten Webseiten zeigen Inhaltsbilder mit 600–1600 Pixel Breite an. Wenn Sie die Kameradatei in voller Auflösung auf Ihre Website hochladen, lädt der Browser alle 8000 Pixel herunter und skaliert sie zur Anzeige auf 800 Pixel. Sie übertragen 10× mehr Daten als nötig.
Das Bild vor dem Hochladen auf die größte Breite zu skalieren, in der es je angezeigt wird — etwa die doppelte CSS-Anzeigebreite für hochdichte Bildschirme — ist oft die einzige größte verfügbare Größenreduktion. Ein 4000-Pixel-Bild, das auf 1600 Pixel skaliert wird, ist typischerweise 70–80 % kleiner, bevor überhaupt eine Qualitätskompression angewandt wird.
Kompression überspringen oder die falsche Qualitätseinstellung nutzen
Viele Content-Management-Systeme akzeptieren und speichern hochgeladene Bilder ohne Kompression. WordPress, Squarespace, Shopify und ähnliche Plattformen wenden vielleicht standardmäßig etwas Kompression an, aber die Einstellungen variieren und sind oft konservativ. Das hochgeladene Original kann viel größer als nötig sein.
Für JPEG und WebP ist eine Qualitätseinstellung von 75–85 für die meisten auf einer Webseite angezeigten Fotografien angemessen. Unter 75 werden Kompressionsartefakte sichtbar. Über 85 steigt die Dateigröße erheblich bei abnehmender visueller Verbesserung. Viele Entwickler setzen standardmäßig auf Qualität 95 oder 100, was Dateien 3–5× größer als Qualität 80 erzeugt, ohne sichtbaren Unterschied bei normalen Betrachtungsgrößen.
Kein Lazy Loading bei Bildern unterhalb des Falzes
Standardmäßig versuchen Browser, alle Bilder auf einer Seite während des ersten Renderns zu laden, auch Bilder, die weit unterhalb des sichtbaren Bereichs (des Falzes) liegen. Bei einer langen Artikelseite mit 10 Bildern versucht der Browser, alle 10 gleichzeitig herunterzuladen, selbst wenn der Leser vielleicht nie weit genug scrollt, um die meisten zu sehen.
Das Attribut loading="lazy" an einem <img>-Tag weist den Browser an, das Laden des Bildes aufzuschieben, bis es kurz davor ist, in den Viewport zu gelangen, was die beim ersten Seitenaufbau übertragenen Daten erheblich reduziert. Wenden Sie es auf alle Bilder an, die im ersten Viewport nicht sichtbar sind. Wenden Sie es nicht auf das Hero-Bild oder ein Bild oberhalb des Falzes an — die müssen so schnell wie möglich für einen guten LCP-Wert laden.
Speziell für das Hero-Bild fügen Sie fetchpriority="high" hinzu, damit der Browser es vor Skripten und anderen Bildern abruft. Nutzen Sie es nur bei einem Bild pro Seite — dem LCP-Element — und lassen Sie den Rest auf dem Standard.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
Fehlende width- und height-Attribute
Wenn ein Browser beginnt, eine Seite zu rendern, kennt er noch nicht die Maße von Bildern, die er nicht heruntergeladen hat. Ohne explizite width- und height-Attribute im HTML kann der Browser nicht den richtigen Platz reservieren, und das Seitenlayout verschiebt sich, während Bilder laden — ein störender visueller Sprung, bekannt als Cumulative Layout Shift (CLS). Das Hinzufügen expliziter Maße verhindert Layout-Verschiebung und erlaubt dem Browser, mit dem Layout zu beginnen, ohne auf den Download des Bildes zu warten:
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC oder ungewöhnliche Formate direkt hochgeladen
iPhones nehmen standardmäßig in HEIC auf. Wenn HEIC-Dateien auf eine Website hochgeladen und ohne Umwandlung ausgeliefert werden, lassen sie sich in Chrome, Firefox und Edge nicht anzeigen. Besucher unter Windows und Android sehen ein Symbol für ein defektes Bild. Wandeln Sie HEIC vor dem Veröffentlichen immer in JPEG oder WebP um.
Eine praktische Optimierungs-Checkliste
PhotoTools übernimmt die Schritte Formatumwandlung, Skalierung und Kompression in Ihrem Browser, ohne irgendetwas auf einen Server hochzuladen. Verarbeiten Sie Bilder vor dem Hochladen, um Ihre Seiten schnell zu halten, und gehen Sie diese Checkliste durch:
- WebP für Fotografien und die meisten Webbilder nutzen. PNG für Grafiken mit Text oder Transparenz nutzen.
- Bilder auf die größte Breite skalieren, in der sie tatsächlich angezeigt werden, etwa 2× die CSS-Anzeigebreite für Retina-Bildschirme.
- JPEG und WebP bei Qualität 75–85 für Standard-Webbilder komprimieren.
- loading="lazy" zu allen Bildern unterhalb des Falzes hinzufügen.
- Explizite width- und height-Attribute zu allen Bildern hinzufügen.
- HEIC-Dateien vor dem Hochladen in JPEG oder WebP umwandeln.
- Finale Dateigrößen prüfen: ein Webbild, das mit 800 CSS-Pixeln Breite angezeigt wird, sollte in den meisten Fällen unter 200 KB sein.