Bilder

Was geprüft

Für jedes abrufbare <img>-Bild werden Länge und Format bestimmt; das Format über Content-Type und über die ersten Bytes der Datei. Gemeldet werden Bilder über 1 MB, JPEG/PNG/GIF über 100 KB ohne srcset sowie Abweichungen zwischen Kopfzeile und tatsächlichem Dateityp. Ohne <img>-Bilder trifft der Punkt nicht zu.

Wie relevant

Mittel, wenn ein Bild über 1 MB groß ist; Niedrig, wenn nur größere Bilder in alten Formaten ohne srcset oder Typabweichungen auffallen. Bilder sind meist der größte Teil des Seitengewichts.

Warum

Große Bilder verlängern das Laden und verbrauchen mobiles Datenvolumen. Ohne srcset bekommt auch ein Handy das Bild in Desktop-Größe.

Wie beheben

Liefern Sie Bilder in WebP oder AVIF und in mehreren Breiten mit srcset und sizes aus. Skalieren Sie Originale vor dem Hochladen auf die größte tatsächlich angezeigte Breite. Geben Sie width und height an, damit die Seite beim Laden nicht springt.

Nebenwirkung: Ältere Browser zeigen AVIF oder WebP nicht an; mit <picture> und einem JPEG-Rückfall bleibt das Bild sichtbar. Automatische Umwandlung durch Plugins oder CDN prüfen Sie an einer Testseite, bevor Sie sie auf alle Bilder anwenden.

WordPress: WordPress erzeugt beim Hochladen mehrere Größen und setzt srcset automatisch, wenn Bilder über den Editor eingefügt werden. Bilder, die als Hintergrund im Seitenbaukasten oder per festem <img> im Theme eingebunden sind, bekommen kein srcset.

Codebeispiel

HTML (picture mit AVIF, WebP und Rückfall)

<picture>
  <source type="image/avif" srcset="/bilder/team-800.avif 800w, /bilder/team-1600.avif 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp" srcset="/bilder/team-800.webp 800w, /bilder/team-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <img src="/bilder/team-800.jpg" alt="Unser Team vor dem Büro" width="800" height="533" loading="lazy">
</picture>

Apache (.htaccess, richtige Typen für moderne Formate)

AddType image/webp .webp
AddType image/avif .avif

Weiterführende Quellen

Quellen der Methodik

docs/SCORING.md — Status und Schweregrade (§2), Kategoriescore und Abdeckung (§3), Gesamtwert (§4), keine Doppelabzüge (§5), Prüfkatalog mit Gewichten (§6), Versionierung (§8), Formulierungsregeln (§9), bewusst nicht geprüft (§10)
docs/KALIBRIERUNG.md — Abgleich der Schwerefaktoren und Kappen mit externen Ankern (Web Almanac, Lighthouse, MDN HTTP Observatory, SSL Labs), Entscheidung scoring@1.4.0