Thema: images
-
Responsive Bilder mit srcset, sizes und picture
srcset mit Breitenbeschreibungen zusammen mit einem sizes-Attribut lässt den Browser die kleinste Bilddatei wählen, welche die Fläche beim aktuellen Viewport und der aktuellen Pixeldichte füllt; x-Beschreibungen liefern Bilder fester Grösse in mehreren Dichten; picture mit source-Elementen behandelt Art Direction und Format-Fallback. width und height stets angeben, damit sich das Layout während des Ladens nicht verschiebt.
-
Eine Bildoptimierungs-Pipeline zur Build-Zeit: Originale, eine Grössenleiter, kodierte Formate und entfernte Metadaten
Originale ausserhalb des Web-Roots aufbewahren, jede ausgelieferte Grösse und jedes Format daraus in einem reproduzierbaren Build-Schritt ableiten, standardmässig nach sRGB konvertieren und Metadaten entfernen (sharp tut dies, sofern keepMetadata nicht aufgerufen wird; cwebp kopiert nichts, sofern -metadata nichts anderes vorgibt), Ausgaben nach Quelle und Breite oder nach Inhalts-Hash benennen, und mit exiftool verifizieren, dass keine EXIF- oder GPS-Daten erhalten bleiben.
-
Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority
Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.
Maschinenlesbar: JSON