Formate
WebP, AVIF und PNG für Layout- und Performance-Tests
Moderne Frontends mischen Formate. Mit gezielten Platzhaltern siehst du, ob picture-Elemente, Accept-Header und CDN-Caches wirklich das liefern, was du erwartest.
PNG: Transparenz und UI-Slots
PNG bleibt Standard für Alpha und scharfe UI-Platzhalter. Nutze den Transparent-Generator, wenn Overlays, Logoslots oder Masken geprüft werden. Für große Fotoslots sind PNG-Dateien oft unnötig schwer — dann eher WebP.
WebP: Alltag in modernen Browsern
WebP eignet sich als Default-Platzhalter für Karten, Heroes und Thumbnails. Erzeuge dieselbe Komposition als WebP und JPG, um Fallback-Zweige im Markup zu verifizieren. Qualität und Dateigröße stellst du im Generator ein.
AVIF: nächster Codec-Schritt
AVIF hilft bei A/B und Codec-Vergleichen. Nicht jeder Client dekodiert AVIF gleich gut — ein AVIF-Platzhalter neben WebP zeigt schnell, ob euer Stack sauber degradiert oder ein leeres Bild zeigt.
Layout-Checkliste
Prüfe aspect-ratio, object-fit, CLS (feste Boxen), Lazy Loading und srcset. Wechsle nur das Format bei gleicher Pixelgröße, damit Layout-Unterschiede vom Codec kommen — nicht von anderen Dimensionen.
Vom Format-Converter zum Inspector
Lade ein vorhandenes Asset hoch, konvertiere es und vergleiche MIME, Abmessungen und Metadaten im Image Inspector. So validierst du Pipeline-Schritte, bevor echte Produktivmedien durchlaufen.
Häufige Fragen
Welches Format soll ich als Default wählen?
Für die meisten Web-Platzhalter: WebP. Für Transparenz: PNG oder WebP mit Alpha. AVIF zusätzlich, wenn ihr den Codec aktiv ausrollt.
Kann ich Qualität steuern?
Ja, im Testbild-Generator und Format-Converter über den Qualitätsregler (wo das Format das unterstützt).