Beginnen Sie mit dem Bild, das Leser tatsächlich sehen
Prüfen Sie die dargestellten Abmessungen, die ausgewählte Ressource, die übertragenen Bytes und die Rolle des Bildes auf der Seite. Ein Diagramm mit kleinen Beschriftungen braucht eine andere Behandlung als ein Foto. Eine große Quelldatei muss nicht unverändert an jeden Besucher ausgeliefert werden.
Ermitteln Sie in einem Trace das tatsächliche Largest-Contentful-Paint-Element. Es kann auch Text statt eines Bildes sein. Ein Vorschaubild unterhalb des sichtbaren Bereichs zu optimieren, behebt kein davon unabhängiges render-blockierendes Stylesheet.
Wählen Sie Format und Qualität je Datei
Vergleichen Sie AVIF und WebP mit Ihrem vorhandenen JPEG oder PNG in den Größen, die tatsächlich genutzt werden. Prüfen Sie Kanten, Verläufe, Hauttöne, Transparenz und Text. Die Einsparung hängt vom Inhalt und den Encoder-Einstellungen ab; ein pauschaler Prozentsatz ist kein sinnvolles Qualitätsziel.
Nutzen Sie SVG für geeignete Diagramme und Icons, damit Beschriftungen und Linien scharf bleiben, und behalten Sie bei Bedarf eine Rasterversion für Sharing-Plattformen. Wesentliche Erklärungen sollten auch im HTML stehen. Bezeichnen Sie ein verlustbehaftet komprimiertes Bild nicht als verlustfrei, nur weil es einen hohen Wahrnehmungs-Ähnlichkeitswert erreicht.
Schreiben Sie responsives Markup, das zum Layout passt
Das folgende Beispiel geht von einem Bild in voller Breite innerhalb einer 48rem breiten Inhaltsspalte mit 1rem Seitenabstand auf kleinen Bildschirmen aus. Passen Sie sizes an Ihr tatsächliches Layout an. Der Browser wählt anhand der Kandidatenbreiten, der Slot-Größe und der Gerätebedingungen eine Ressource aus.
<picture>
<source type="image/avif"
srcset="/media/diagram-480.avif 480w,
/media/diagram-960.avif 960w,
/media/diagram-1440.avif 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
<img src="/media/diagram-960.webp"
srcset="/media/diagram-480.webp 480w,
/media/diagram-960.webp 960w,
/media/diagram-1440.webp 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
width="1440" height="900"
loading="eager" fetchpriority="high" decoding="async"
alt="Public requests pass through a cache before the origin">
</picture>Für ein ergänzendes Bild außerhalb des sichtbaren Bereichs nutzen Sie stattdessen Lazy Loading und normale Abrufpriorität. Breite und Höhe reservieren das Seitenverhältnis; per CSS kann das Bild trotzdem fluid sein. Halten Sie alle Varianten im selben Seitenverhältnis, sofern Sie nicht bewusst Art Direction einsetzen.
Nutzen Sie nach Möglichkeit die Bildverarbeitung von WordPress
Verwenden Sie für Bilder aus der Mediathek die Anhang-Bildfunktionen von WordPress, damit verfügbare Größen und responsive Attribute aus den Metadaten des Anhangs erzeugt werden. Prüfen Sie die Ausgabe: eigenes Markup oder fehlende Varianten können diese Vorteile umgehen. Theme-Illustrationen können einen expliziten, versionierten Satz an Größen nutzen.
Der Alternativtext sollte die Information vermitteln, die das Bild hinzufügt. Dekorative Wiederholungen der benachbarten Überschrift können ein leeres alt-Attribut erhalten. Machen Sie aus dem Alternativtext keine Liste von Ziel-Keywords.
Prüfen Sie Auslieferung und Cache-Verhalten
- Prüfen Sie die ausgewählten Bild-URLs auf schmalen und breiten Bildschirmen, auch bei höheren Pixeldichten.
- Stellen Sie sicher, dass das Hauptbild auffindbar ist, ohne auf JavaScript zu warten.
- Beurteilen Sie die Bildqualität in der tatsächlichen Anzeigegröße, nicht nur in einer kleinen Vorschau.
- Bestätigen Sie, dass Medien außerhalb des sichtbaren Bereichs die anfängliche Übertragung nicht dominieren.
- Wenn ein CDN Formate aushandelt, prüfen Sie, ob die Cache-Schlüssel die Antworten korrekt unterscheiden.
- Versionieren Sie geänderte Dateien oder leeren Sie die betreffenden Caches, damit Leser die Aktualisierung erhalten.
Häufige Fragen
Brauchen Sie ein Bild-CDN?
Ein CDN mit Transformationen kann eine große, häufig wechselnde Mediathek vereinfachen. Ein kleiner Blog kommt oft gut mit wenigen erzeugten Varianten und gewöhnlichem statischem Caching aus. Vergleichen Sie laufende Kosten, betriebliche Komplexität und tatsächliche Einsparungen bei der Übertragung, bevor Sie einen weiteren Dienst hinzufügen.
Sollte das Hauptbild im Hero per Lazy Loading geladen werden?
In der Regel nicht, wenn es sofort sichtbar oder das LCP-Element der Seite ist. Machen Sie seine URL im initialen HTML auffindbar, stellen Sie passende responsive Kandidaten bereit und erwägen Sie gezielt eine hohe Abrufpriorität. Laden Sie ergänzende Bilder, die unterhalb des anfänglichen Viewports beginnen, per Lazy Loading.
Ist AVIF immer besser als WebP?
Kein Format und keine Qualitätseinstellung gewinnt bei jedem Bild. Vergleichen Sie Dateigröße und visuelle Qualität an der tatsächlichen Datei, einschließlich feiner Beschriftungen, Verläufe und Transparenz. Behalten Sie einen passenden Fallback und prüfen Sie, welche Datei der Browser auswählt.
Warum brauchen Bilder Breite und Höhe, wenn das Layout responsiv ist?
Diese Attribute legen ein intrinsisches Seitenverhältnis fest, damit der Browser Platz reservieren kann, bevor das Bild eintrifft. Per CSS kann es trotzdem fluid sein. Verwenden Sie korrekte Abmessungen und responsive Quellen und prüfen Sie dann das echte Layout auf Verschiebungen. Der WordPress-Speed-Leitfaden ordnet die Bildauslieferung in den größeren Performance-Ablauf ein.
Quellen und weiterführende Literatur
Weiterlesen
Machen Sie weiter mit der Diagnose der Core Web Vitals oder der vollständigen Performance-Checkliste.
Leave a Reply