Bildformate im Internet

Die Hälfte jeder Website sind Bilder. Gleichzeitig ist die Bildoptimierung das Gebiet, wo die meisten Websites noch den größten Nachholbedarf haben. Welche Formate du heute nutzen solltest – und welche du vergessen kannst.

Die klassischen Bildformate ico, gif, png, jpeg werden auf vielen Webseiten auch heute immer noch ausschließlich verwendet. Dabei gibt es mit svg, webp und avif datensparsamere Alternativen, die heute alle modernen Browser verstehen. Wofür sollte man welches Format einsetzen und wo sind Fallback-Lösungen sinnvoll?

Sieben Formate, eine Wahl

GIF, JPEG, PNG, ICO, SVG, WebP, AVIF – das sind die Bildformate, die im heutigen Web relevant sind. Die Wahl des richtigen Formats ist keine Geschmacksfrage, sondern eine Frage von Kilobytes.

Konkret: Ein Foto, das als JPEG 100 KB groß ist, kann als WebP 60–70 KB groß sein – bei identischer sichtbarer Qualität. Dasselbe Foto in AVIF noch einmal 20–30% kleiner. Das sind keine marginalen Unterschiede.

Tipp
Für Logos, Icons und Illustrationen mit wenigen Farben: immer SVG bevorzugen. SVG-Dateien sind Textdateien, skalieren verlustfrei auf jede Größe, können per CSS gefärbt werden – und sind oft nur wenige Kilobyte groß.

Die Fallback-Frage

WebP wird von 96% aller Browser unterstützt, AVIF von etwa 93%. Das heißt: Ohne Fallback-Lösung siehst ein kleiner Teil deiner Besucher ein kaputtes Bild. Das <picture>-Element in HTML löst das elegant – du gibst WebP und AVIF an, und der Browser wählt automatisch das beste Format, das er unterstützt.

Hugo (das CMS hinter datensm.art) macht das in der Asset-Pipeline automatisch. WordPress braucht dafür ein Plugin – achte darauf, dass es auch AVIF und die Brotli-Komprimierung unterstützt.

Ein Sonderfall: LinkedIn

AVIF und WebP werden von LinkedIn nicht erkannt. Wenn du Seiten auf LinkedIn teilst und ein Vorschaubild brauchst, musst du zusätzlich ein JPEG oder PNG vorhalten. Das ist kein Grund, auf moderne Formate zu verzichten – nur ein Grund, den Open-Graph-Tag gezielt mit einem JPEG zu bedienen.

bildformatewebpavifsvgbildoptimierung