Warum Bildoptimierung wichtig ist
Große oder spät geladene Bilder können den Hauptinhalt verzögern und LCP verschlechtern. Prüfen Sie zuerst die tatsächlich angeforderten Bilder und messen Sie ihren Anteil. Weniger übertragene Daten können das Laden verbessern, garantieren aber weder Suchplatzierungen noch eine bestimmte Conversion-Steigerung.
Auswahl eines Bildformats
Vergleichen Sie JPEG, PNG, WebP und AVIF anhand typischer Bilder bei akzeptabler Qualität. Die kleinste Datei hängt von Bild, Encoder und Einstellungen ab. Prüfen Sie Ihre Zielbrowser und bieten Sie bei Bedarf ein Ersatzformat an. SVG eignet sich für passende Vektorgrafiken.
| Format | Stärken | Grenzen | Typische Verwendung |
|---|---|---|---|
| JPEG | Oft effizient für Fotos | Verlustbehaftet, keine Alpha-Transparenz | Fotos |
| PNG | Verlustfreie Kodierung und Transparenz | Bei Fotos oft große Dateien | Grafiken mit verlustfreien Details |
| WebP | Verlustbehaftet oder verlustfrei, Transparenz | Ältere Zielbrowser und tatsächliche Dateigröße prüfen | Fotos, Grafiken, Animationen |
| AVIF | Gute Komprimierung bei brauchbarer Qualität möglich | Kodieraufwand und Unterstützung prüfen | Fotos und Grafiken |
| SVG | Skalierbare Vektorgrafik | Kein Ersatz für Rasterfotos | Symbole, Logos, Illustrationen |
Responsive Bilder: srcset und sizes
Geben Sie in srcset die Bildvarianten und in sizes die Breite im Layout an. Der Browser wählt anhand dieser Angaben und der Gerätebedingungen eine Datei. Die folgenden Breiten sind Beispiele und müssen zu Ihrem CSS passen. Das Beispiel gilt für ein Bild außerhalb des anfänglichen Sichtbereichs; ersetzen Sie den Beispiel-Alternativtext und verwenden Sie das tatsächliche Seitenverhältnis.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Bergsee"
width="1200"
height="800"
loading="lazy"
/>
Lazy Loading außerhalb des Sichtbereichs
Mit loading="lazy" kann der Browser ein Bild erst laden, wenn es sich dem Sichtbereich nähert. Der Abruf kann vor dem Sichtbarwerden beginnen. Der genaue Zeitpunkt hängt vom Browser und den Bedingungen ab.
- Verzögertes Laden unkritischer Bilder kann die anfängliche Datenmenge und konkurrierende Anfragen verringern.
- Laden Sie das Hauptbild im anfänglichen Sichtbereich, insbesondere das wahrscheinliche LCP-Bild, nicht verzögert. Das kann LCP verschlechtern.
- Reservieren Sie Platz durch passende Abmessungen oder ein Seitenverhältnis, um Layoutverschiebungen zu reduzieren.
Beispiel für ein Bild unterhalb des anfänglichen Sichtbereichs. Ersetzen Sie die beispielhaften Abmessungen durch die tatsächlichen:
<img src="example.webp" alt="Bergsee" width="1200" height="800" loading="lazy" />
Tools und Services zur Optimierung
| Werkzeug | Beschreibung | Link |
|---|---|---|
| TinyPNG | Onlinedienst zum Komprimieren von PNGs und JPEGs | TinyPNG |
| ImageOptim | Bildoptimierung unter macOS | ImageOptim |
| Squoosh | Ein leistungsstarkes Tool von Google | Squoosh |
Praxistipps und Beispiele
- Vergleichen Sie Formate bei akzeptabler Qualität und ergänzen Sie bei Bedarf ein Ersatzformat.
- Stimmen Sie
srcsetundsizesauf das tatsächliche Layout und die Geräte ab. - Nutzen Sie
loading="lazy"für Bilder außerhalb des Sichtbereichs. Das wahrscheinliche LCP-Bild soll regulär laden. Natives Lazy Loading braucht normalerweise keinen Intersection Observer; eigene Logik sollte eine konkrete Anforderung lösen. - Automatisieren Sie Größenanpassung und Komprimierung beim Build oder bei der Auslieferung und prüfen Sie die Ausgabe.
- Vergleichen Sie PageSpeed Insights und relevante Web Vitals einschließlich LCP und CLS unter vergleichbaren Bedingungen.
Die veröffentlichte Änderung prüfen
Prüfen Sie die gewählte Bilddatei, übertragene Bytes, Bildqualität und Ladepriorität. Wiederholen Sie dies für typische mobile und Desktop-Layouts. Das Hauptbild soll zügig erscheinen und das Layout stabil bleiben.
Reduzieren Sie unnötige Bytes, ohne die benötigten Inhalte oder die Bildqualität zu verlieren.
Untersuchen Sie die Seite mit unserem Geschwindigkeitstest und prüfen Sie die konkreten Bildänderungen im Browser. Trennen Sie gemessene Verbesserungen von ungeprüften Annahmen.
