Bilder für Ihre Website optimieren: ein praktischer Leitfaden

Bilder machen oft einen großen Teil der Seitenübertragung aus und können Entdeckung, Dekodierung, Layout und Largest Contentful Paint beeinflussen. Optimierung kann deutliche Gewinne bringen, doch keine feste Einsparung oder Rankingwirkung gilt für jede Seite. Diesen Ablauf können Sie Schritt für Schritt messen.

Warum Bildoptimierung wichtiger ist denn je

Der Page-Weight-Bericht des HTTP Archive zeigt, dass Bilder für viele Seiten relevant bleiben, auch wenn sich Mediane ändern. Largest Contentful Paint (LCP) misst, wann das größte geeignete Element im Viewport gerendert ist; oft, aber nicht immer, ist es ein Bild.

Googles veröffentlichte LCP-Grenzen werten bis 2.5 Sekunden als gut und über 4 Sekunden als schlecht, gemessen am 75. Perzentil der Besuche. Bildarbeit kann eine Seite zwischen Grenzen bewegen, wenn die LCP-Ressource der Engpass ist, garantiert allein aber weder bestandene Core Web Vitals noch eine Suchposition.

Schritt 1: Das richtige Format wählen

Die Formatwahl kann Größe und Funktionen stark beeinflussen. Der Vergleich ist qualitativ, weil Benchmarks von Quelle, Encoder, Einstellungen und Qualitätsziel abhängen:

WebP ist für viele Seiten ein nützlicher Standardkandidat, keine universelle Antwort. Wenn Pipeline und Zielgruppe AVIF unterstützen, testen Sie es als früheres <source> mit WebP- oder JPEG-Fallback. Mit Vizua können Sie JPG in WebP oder in AVIF umwandeln; die Datei wird im Browser verarbeitet und nicht an unseren Server gesendet.

Mehr Details bieten unser Vergleich WebP gegen AVIF und die Erklärung zu verlustbehafteter und verlustfreier Kompression.

Schritt 2: Auf die tatsächliche Anzeigegröße skalieren

Ein Foto mit 4000 × 3000 Pixeln, das mit 800 × 600 erscheint, enthält weit mehr Quellpixel als der Bereich benötigt. Ein responsives hochauflösendes Display kann einen größeren Kandidaten brauchen, doch das Kameraoriginal verursacht meist unnötige Übertragung und Dekodierung.

Das Prinzip lautet: Kandidaten nahe an gerenderter Größe und Dichte anbieten. Nutzen Sie srcset und sizes zur Auswahl und berücksichtigen Sie Layoutbreite, Pixeldichte, Qualität, Zoom und Art Direction statt eines festen „Retina“-Multiplikators.

Beispielhafte Ausgangsgrößen zur Anpassung an Ihr Layout:

• Hero über volle Breite: mit dem größten gerenderten Bereich beginnen und Kandidaten für relevante Dichten und Breakpoints erzeugen
• Inhaltsbild: an Inhaltsspalte und breitere responsive Zustände anpassen
• Vorschaubild: Kandidaten nahe an jeder Kartengröße erzeugen statt das Hero wiederzuverwenden
• Avatar: dargestellten Kreis oder Quadrat, Gerätedichte und Detailansicht berücksichtigen

Erzeugen Sie mit Vizuas Bildgrößenwerkzeug passende Kandidaten vor der Kompression. Die Einsparung hängt von ursprünglicher und Zielpixelzahl ab; messen Sie die Dateien.

Schritt 3: Mit der richtigen Qualitätsstufe komprimieren

Nach Formatwahl und Größenänderung stimmen Sie den Encoder ab. Qualitätsskalen sind nicht linear und nicht zwischen Encodern oder Formaten standardisiert. Ein niedrigerer Wert tauscht bei verlustbehafteter Kodierung meist mehr Information gegen weniger Bytes, doch Größe und sichtbare Änderung müssen am Ergebnis gemessen werden.

Empfohlene Qualitätsstufen:

• JPEG: 75–85 kann ein konservativer Startbereich für Fotos sein. Skalen unterscheiden sich; Ausgabe prüfen.
• WebP: 75–80 ist ein Startbereich, kein garantiertes Äquivalent eines JPEG-Werts.
• AVIF: 60–75 kann in manchen Werkzeugen ein Startbereich sein; Skalen und Encoder unterscheiden sich.
• PNG: zuerst stärkere verlustfreie Kompression testen. Palettenquantisierung auf höchstens 256 Einträge kann mehr sparen, ist aber verlustbehaftete Farbreduktion und muss geprüft werden.

Vizuas JPEG-Kompressor lässt Qualität anpassen und Ausgabe prüfen. Eine ausführliche Methode finden Sie unter Bilder ohne Qualitätsverlust komprimieren.

Schritt 4: Bilder effizient ausliefern

Gute Komprimierung ist nur die halbe Miete. Wie Sie Bilder an den Browser ausliefern, ist für die Ladeperformance genauso entscheidend.

Explizite Dimensionen setzen

Geben Sie jedem <img> genaue intrinsische Werte für width und height oder reservieren Sie den Bereich bewusst. So kann der Browser das Verhältnis früh festlegen. Das reduziert bildbedingte Bewegung, obwohl Schriftarten, injizierte Inhalte, Animationen und falsches responsives Styling den Cumulative Layout Shift (CLS) weiter beeinflussen.

Lazy-Loading für Bilder unterhalb des Folds

Erwägen Sie loading="lazy" für Bilder deutlich außerhalb des ersten Viewports. Verwenden Sie es nicht mechanisch für das wahrscheinliche LCP-Bild oder sofort nötigen Inhalt. Browserheuristiken, Karussells, Druck, schnelles Scrollen und versteckte Layouts erfordern Tests.

Das Hero-Bild priorisieren

Laden Sie das wahrscheinliche LCP-Bild nicht verzögert. Erwägen Sie fetchpriority="high", wenn die Ressource frühe Bandbreite verdient, und machen Sie sie im anfänglichen HTML auffindbar. Vergeben Sie hohe Priorität nicht breit; bestätigen Sie die Wirkung im Trace und in Felddaten.

Responsive Bilder verwenden

srcset und sizes bieten Kandidaten an und beschreiben den erwarteten Bereich. Der Browser berücksichtigt Viewport, Dichte, Cache und Implementierung. sizes muss dem echten Layout entsprechen; ein falscher Wert kann einen zu großen oder kleinen Kandidaten wählen.

Schritt 5: Regelmäßig prüfen und messen

Bildoptimierung ist keine einmalige Aufgabe. Jedes neue Bild, das Sie hinzufügen, ist eine potenzielle Schwachstelle.

• PageSpeed Insights: PageSpeed Insights auf repräsentativen Seiten ausführen. Feld- und Lab-LCP getrennt prüfen und aktuelle Bilddiagnosen ansehen statt von einem veränderlichen Audit-Namen abzuhängen.
• DevTools-Netzwerk: Anfragen nach Größe sortieren und große Bilder im Kontext prüfen. Fragen, ob Abmessungen, Format, Kompression, Cache und Priorität zur Rolle passen, statt ein universelles KB-Limit durchzusetzen.
• Automatisieren: Bildoptimierung in die Build-Pipeline aufnehmen, damit übergroße Bilder vor Veröffentlichung auffallen.

Schnell-Checkliste

• Geeignete JPEG-, WebP-, AVIF-, PNG- oder SVG-Varianten erzeugen und vergleichen
• Auf tatsächliche Darstellungsmaße verkleinern — nicht breiter als nötig
• Mit konservativen Einstellungen beginnen, Bytes und sichtbare Ausgabe vergleichen; Qualitätszahlen nicht formatübergreifend gleichsetzen
• Für jedes <img> einen genauen Bereich reservieren, normalerweise mit intrinsischem width und height
• fetchpriority="high" für das wahrscheinliche LCP-Bild erwägen und messen
• Geeignete Bilder außerhalb des Bildschirms verzögert laden; Scrollen und Layout testen
• srcset/sizes für responsive Auslieferung nutzen
• Leistungsbudgets aus Seite, Zielgruppe und Felddaten ableiten
• Unnötige private Metadaten entfernen, benötigte Farbprofile und andere Daten aber erhalten — siehe EXIF-Daten und Datenschutz
• Regelmäßig mit PageSpeed Insights prüfen

Häufig gestellte Fragen