Bilder und Ladezeit: Formate, Größen, Lazy Loading

Warum Bilder die Ladezeit bestimmen

Google schreibt, dass Bilder oft den größten Teil einer Seite ausmachen, was Seiten langsam und teuer im Laden machen kann. Zwei der Core Web Vitals hängen direkt an Bildern. Largest Contentful Paint (LCP) misst das Laden: Google rät, dass das größte Element innerhalb der ersten 2,5 Sekunden nach dem Start des Ladens erscheint. Auf vielen Seiten ist dieses Element ein Bild, zum Beispiel ein großes Foto oben. Cumulative Layout Shift (CLS) misst die visuelle Stabilität und soll unter 0,1 bleiben. Bilder, die ohne reservierten Platz ankommen, schieben den Text nach unten und erhöhen diesen Wert.

Das passende Format

• Fotos: JPEG funktioniert überall. WebP und AVIF sind bei ähnlicher Qualität oft deutlich kleiner.
• Grafiken mit scharfen Kanten oder Transparenz: PNG, oder WebP und AVIF, die ebenfalls transparent sein können.
• Logos und Symbole: SVG, weil es in jeder Größe scharf bleibt und meist sehr klein ist.
• Die Google-Suche unterstützt Bilder im src-Attribut in den Formaten BMP, GIF, JPEG, PNG, WebP, SVG und AVIF.

Bietest du WebP oder AVIF an, kannst du in einem picture-Element ein JPEG als Rückfall behalten. Der Browser nimmt die erste Quelle, die er versteht.

Die passende Größe

Ein Bild, das 2400 Pixel breit ist, aber mit 600 Pixeln angezeigt wird, verschwendet den größten Teil seiner Bytes. Exportiere Bilder etwa in der Breite, in der sie angezeigt werden, und für scharfe Bildschirme etwa in doppelter Breite. Dann komprimiere sie. In vielen Bildprogrammen reicht für Fotos im Web eine Qualität etwa in der Mitte der Skala. Prüf das Ergebnis in voller Größe, bevor du das Original ersetzt.

srcset und sizes

Eine einzige Datei passt nie zu jedem Bildschirm. Mit srcset bietest du mehrere Dateien desselben Bildes an und nennst die Breite jeder Datei. Mit sizes sagst du dem Browser, wie breit das Bild angezeigt wird. Der Browser wählt dann die kleinste Datei, die scharf genug ist.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Im Beispiel füllt das Bild auf schmalen Bildschirmen die ganze Breite und ist auf breiteren 700 Pixel breit. Google empfiehlt, immer einen Rückfall im src-Attribut zu behalten. Schreib anstelle der drei Punkte einen echten Alt-Text.

Breite und Höhe gegen Layoutverschiebungen

Ohne Breite und Höhe weiß der Browser erst, wie viel Platz ein Bild braucht, wenn die Datei da ist. Der Text darunter springt dann nach unten. Der Leitfaden von web.dev zu Layoutverschiebungen rät: Gib Bildern und Videos immer die Attribute width und height, mit der Pixelgröße der Datei oder wenigstens dem richtigen Seitenverhältnis. Moderne Browser leiten aus diesen Werten das Seitenverhältnis ab und reservieren den Platz. Im CSS halten width: 100% und height: auto das Bild flexibel. Kannst du die Attribute nicht setzen, nennt der Leitfaden die CSS-Eigenschaft aspect-ratio als Alternative.

Lazy Loading

Mit loading="lazy" lädt der Browser ein Bild erst, wenn es in die Nähe des sichtbaren Bereichs kommt. Das spart Daten bei Bildern weiter unten auf der Seite. Google sagt dazu: Setze Lazy Loading nicht bei Inhalten ein, die wahrscheinlich sofort zu sehen sind, wenn jemand die Seite öffnet. Das eingebaute Lazy Loading des Browsers gibt es für Bilder und iframes.

Das LCP-Bild

Das größte Bild oben, oft ein Titelbild oder das Hauptfoto eines Produkts, ist die wichtigste Datei der Seite. Der Leitfaden von web.dev zum LCP sagt: Lade dein LCP-Bild nie lazy. fetchpriority="high" ist ein Hinweis an den Browser, es früh zu laden. Laut Leitfaden hilft hohe Priorität an mehr als ein oder zwei Bildern nicht mehr. Bilder, deren Adresse eine Skriptbibliothek in data-src versteckt oder die nur ein CSS-Hintergrund sind, findet der Browser spät. Für ein Hintergrundbild nennt der Leitfaden ein preload mit link rel="preload" im HTML. AVIF oder WebP und eine kleinere Datei verkürzen die Ladezeit zusätzlich.

Wie deine Seiten abschneiden, zeigt laut Google der Bericht Core Web Vitals in der Search Console. Für eine einzelne Seite zeigen die Leistungswerkzeuge deines Browsers, welches Element das LCP-Element ist und welche Elemente das Layout verschieben. Miss vor und nach einer Änderung, damit du weißt, ob sie geholfen hat.

Eine kurze Prüfliste

• Lädt das größte Bild oben normal und nicht lazy?
• Hat jedes img Breite und Höhe, oder ist der Platz mit aspect-ratio reserviert?
• Ist jede Datei etwa so breit, wie sie angezeigt wird, und komprimiert?
• Gibt es große Fotos in mehreren Breiten mit srcset und sizes?
• Gibt es JPEG- oder PNG-Dateien, die WebP oder AVIF sein könnten?

Mit Do4U arbeiten

Das Werkzeug Bilder prüfen liest eine Seite und jedes Bild darauf. Zu jeder Datei nennt es Format, Dateigröße und Pixel und aus dem HTML Breite und Höhe, loading, fetchpriority, srcset und sizes, Quellen in picture und Hintergrundbilder in style-Attributen. Do4U schätzt das wahrscheinliche LCP-Bild aus dem HTML. Gemessen wird es nicht, denn das echte LCP-Element bestimmt der Browser. Du bekommst eine Tabelle der Bilder mit den Befunden, das Gesamtgewicht und eine kurze Übersicht. Bilder, die JavaScript einfügt, und Hintergrundbilder aus externen CSS-Dateien sind nicht dabei. Es wird keine KI genutzt, und die Prüfung ist kostenlos, mit einer Grenze pro Tag.

Do4U findet Hinweise, du prüfst und entscheidest. Bestätige das LCP-Element mit den Leistungswerkzeugen deines Browsers, bevor du die Seite änderst.