1. Bildklassifikation vor der Optimierung
Führe nach Templates ein Inventar der Bilder. Erfasse Rolle, größte und kleinste gerenderte Breite, Initial-Viewport-Status und ob kleine Bildschirme einen anderen Zuschnitt benötigen. So wird Dateigrößenarbeit zu prüfbaren Entscheidungen, die auf wichtigen Seiten getestet werden können.
Fotos tolerieren häufig geprüfte verlustbehaftete Kompression. Logos, Interface-Symbole, Strichgrafiken und Diagramme eignen sich möglicherweise für SVG oder für Rasterformate, die scharfe Kanten schützen. SVG passt zu Strichgrafiken, Diagrammen und Charts, ist aber nicht ideal für detailreiche Fotos.
Bewahre wesentliche Details und stelle Text bereit, der den Zweck des Bildes vermittelt.
Verwende ein leeres alternatives Attribut (alt=""); mache es nicht zur einzigen Quelle wichtiger Informationen.
Beschreibe die Aktion oder das Ziel, nicht nur die Pixel des Bildes.
2. Für den gerenderten Slot dimensionieren und responsive Kandidaten anbieten
Passe die intrinsischen Dimensionen an den CSS-Slot an. Eine Desktop-große Datei in einer schmalen Karte verschwendet Übertragung; ein zu stark gestrecktes Rasterbild wirkt unscharf. Berücksichtige den Device Pixel Ratio, überprüfe jedoch visuell statt anzunehmen, dass jeder Bildschirm die größte Variante benötigt.
Bei einer Komposition in mehreren Breiten verwende srcset mit Breiten-Deskriptoren und sizes, um die tatsächliche Slot-Breite anzugeben. Der Browser wählt dann einen Kandidaten. Verwende picture für Art Direction: ein Mobilzuschnitt, der das Motiv erhält, ist nicht einfach nur eine Verkleinerung des Desktop-Bildes. Behalte immer ein img mit src und alt als Fallback innerhalb von picture.
Gleiche Komposition, verschiedene Pixelabmessungen.
Anderer Zuschnitt oder andere Komposition, wenn Skalierung die Aussage verdeckt.
Belasse src auf img für Clients, die responsive Attribute nicht nutzen.
3. Format und Kompression nach Bildmerkmalen wählen
WebP und AVIF können die Rasterübertragung in passenden Fällen reduzieren, aber Format allein garantiert keine Qualität. Teste repräsentative Gesichter, feine Texturen, Markenverläufe, eingebrannten Text und Transparenz. JPEG bleibt ein gängiger Foto-Fallback; PNG kann für verlustfreie Rasterdetails oder Transparenz geeignet sein. Prüfe AVIF-Unterstützung und die operative Passung für deine Zielgruppe und Lieferkette.
Verlustbehaftete Kompression entfernt Informationen, um Bytes zu sparen, und ist bei detailreichen Fotos häufig verzeihlicher als bei scharfen Linien oder Text. Verlustfreie Kompression erhält codierte Pixel, spart jedoch oft weniger. Wähle die Qualität anhand von Vergleichstests in der darzustellenden Größe, nicht anhand eines übertragenen numerischen Werts. Entferne Metadaten erst, nachdem Orientierung, Farbe und Workflow-Anforderungen bestätigt wurden.
Vergleiche verlustbehaftete AVIF-, WebP- und JPEG-Fallbacks in der Anzeigengröße.
Ziehe geeignete SVGs vor oder schütze scharfe Rasterkanten durch Tests.
Bestätige Alpha-Darstellung in jedem gelieferten Format und Fallback.
4. Markup so gestalten, dass Geschwindigkeit und Layoutstabilität geschützt werden
Gib jedem inhaltlichen img width- und height-Attribute entsprechend seinem intrinsischen Seitenverhältnis. Der Browser kann so Platz reservieren, bevor die Datei eintrifft, was Layoutbewegungen reduziert. CSS kann die sichtbaren Dimensionen weiterhin steuern.
Verwende loading=lazy nur für Bilder außerhalb des initialen Viewports. Lade ein Bild, das wahrscheinlich sichtbar ist, nicht lazy, insbesondere keinen Kandidaten für Largest Contentful Paint (LCP). fetchpriority=high ist nur ein relatives Hint; setze es sparsam und messe das Ergebnis. Nutze HTML-Image-Markup für Inhalte, die Alternativtext oder Auffindbarkeit brauchen; Google dokumentiert, dass CSS-Bilder nicht indexiert werden.
Setze width und height, auch bei lazy-gehosteten Galerie-Bildern.
Halte wahrscheinliche LCP-Bilder eager und prüfe die Request-Priorität.
Lazy-loade Offscreen-Bilder und teste das Scrollen unter eingeschränkten Netzwerkbedingungen.
5. Bedeutung, Auffindbarkeit und visuelle Qualität erhalten
Alternativtexte hängen von Zweck und Kontext ab. Beschreibe wesentliche Informationen für ein informatives Bild, verwende alt="" für Dekoration und benenne die Funktion eines verlinkten oder als Button genutzten Bildes. Bei komplexen Diagrammen oder Charts liefere eine äquivalente Erklärung im nahegelegenen Text. Verwende keine Keyword-Listen.
Für auffindbare Inhaltsbilder nutze standardmäßige HTML-Image-Elemente, relevanten umgebenden Text, kurze beschreibende Dateinamen, wo praktikabel, und eine Fallback-Quelle mit responsive Markup. Verwandle dekorative Hintergründe nicht in redundanten Content nur zur Auffindbarkeit.
Prüfe komprimierte Dateien in der größten und kleinsten vorgesehenen Größe.
Bevorzuge normalen Text; sonst liefere ein entsprechendes Wording.
Platziere informative Bilder nahe dem relevanten Seitentext.
6. Die Seite verifizieren, nicht nur das Asset
Teste repräsentative Seiten in schmalen und breiten Viewports. Untersuche in den Developer Tools des Browsers den srcset-Kandidaten, Transfergröße, gerenderte Abmessungen und Layoutbewegung. Drossele das Netzwerk, um späte Hero-Bilder und langsame Galerien zu erkennen. Ein Exportvergleich kann keinen fehlerhaften sizes-Wert, unerwarteten Zuschnitt oder ein Produktions-Transformationsproblem offenbaren.
Nutze Lab- und Feldsignale, wenn verfügbar. Lighthouse und PageSpeed Insights können falsch dimensionierte Bilder identifizieren; Field-LCP spiegelt reale Besuche über die Zeit wider. Vergleiche dasselbe Template, dieselbe Gerätekategorie, Release-Version und Messfenster. Schreibe Leistung nicht Bildern zu, wenn sich auch Serverzeit, Skripte, Fonts oder Drittsysteme geändert haben. Stage Änderungen an geteilten Templates und behalte einen Rollback-Pfad, bis die Validierung abgeschlossen ist.
Bestätige, dass der Slot nicht unerwartet einen übergroßen Kandidaten auswählt.
Überprüfe Zuschnitt, Schärfe, Farbe, Alternativen und Layoutstabilität.
Benenne einen Besitzer, das erwartete Signal und den Rücksetzpfad.