WWW

BILDFORMATE JPG, PNG, WEBP,..., SVG

Bildermaterial für Webseiten muss einerseits in einem Format gespeichert werden, dass alle Browser zuverlässig interpretieren können, andererseits muss es klein bleiben, um nur geringe Ladezeit zu beanspruchen. Der Vergleich von Dateigröße und Qualität führt zum richtigen Format!

Die unterschiedlichen Formate und deren Kompressions-Verfahren sind jeweils für bestimmte Typen von Bildmaterial geeignet. Webdesigner Kulturbanause :) fasst zusammen: Bild-, Grafikformate im Web

Von allen Browsern unterstützt: JPG, PNG, SVG!

JPG für Halbtonbilder/Fotografie (446KB)

Die Stärke der Kompression des JPGs ist einstellbar. (243KB)

PNG für transparente Pixel, hier auch wegen der Brillianz im Glanz! (228KB)

SVG oder PNG?
Das PNG-8 ist deutlich kleiner und gute Qualität!(899KB/487KB)

SVG ist das Format für Vektoren! (2KB)

SVG, verlustfrei skalierbar und extrem klein!(6KB)

Aber jetzt kommen WEBP und AVIF!

WEBP für Halbtonbilder/Fotografie (245KB)

AVIF für Halbtonbilder/Fotografie (196KB)

WEBP ist deutlich kleiner als JPG! (158KB)

AVIF ist noch kleiner als WEBP! (126KB)

WEBP für Pixeldaten mit Transparenz, hier 94% kleiner als dasPNG! (15KB)

AVIF für Pixeldaten mit Transparenz, hier 96% kleiner als dasPNG! (12KB)

Die aktuellen Browser außer Internet Explorer unterstützen das Format WEBP bereits, AVIF wird von ca. 80% der Browser angezeigt. Es ist bereits möglich und üblich, die neuen Formate gleichzeitig mit den alteingesessenen Formaten anzubieten. Mit dem Element PICTURE!