Webdesign

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!

Wolf in den Alpen.
JPG für Halbtonbilder/Fotografie (446KB)
Adler in den Alpen.
Die Stärke der Kompression des JPGs ist einstellbar. (243KB)
Freigestellte Uhr
PNG für transparente Pixel, hier auch wegen der Brillianz im Glanz! (228KB)
deepai-Resultat für die Begriffe: www + interactive + art
SVG oder PNG?
Das PNG-8 ist deutlich kleiner und gute Qualität! (899KB/487KB)
SVG - Gelbe Blume
SVG ist das Format für Vektoren! (2KB)
Logo WWW
SVG, verlustfrei skalierbar und extrem klein!(6KB)

Aber jetzt kommen WEBP und AVIF!

Wolf in den Alpen.
WEBP für Halbtonbilder/Fotografie (245KB)
Wolf in den Alpen.
AVIF für Halbtonbilder/Fotografie (196KB)
Adler in den Alpen.
WEBP ist deutlich kleiner als JPG! (158KB)
Adler in den Alpen.
AVIF ist noch kleiner als WEBP! (126KB)
Freigestellte Uhr
WEBP für Pixeldaten mit Transparenz, hier 94% kleiner als das PNG! (15KB)
Freigestellte Uhr
AVIF für Pixeldaten mit Transparenz, hier 96% kleiner als das PNG! (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!