Achtung: Diese Seite zeigt nur eine knappe Zusammenfassung mit den wichtigsten Testbildern. Für den vollständigen Artikel mit allen Erläuterungen klicken Sie bitte hier.
Neben den drei etablierten Grafikformaten JPEG, GIF und PNG gibt es auch
neuere Formate, die frei verwendbar sind und auch schon eine gewisse
Browser-Unterstützung aufweisen können. Anhand der folgenden Testbilder kann
man die Kompatibilität mit dem eigenen Browser testen.
Für die meisten
Formate gibt es drei Varianten des Testbildes: die einfache Version, die
animierte Version (Animation hier als leichtes Blinken der Textdicke alle
drei Sekunden) sowie die transparente Version (Transparenz hier für die
abgerundeten Ecken).
Wenn die jeweilige Datei nicht angezeigt werden
kann, erscheint ein PNG-Fallback mit dem Hinweis "funktioniert leider
nicht".
Von allen alternativen Formaten für Web-Bilder hat WebP („Web Picture“ oder "Weppy“) bisher die breiteste Browserunterstützung.
Nochmal etwas moderner als WebP ist das AVIF-Format („AOMedia Video 1 Image Format“). Die Browserunterstützung für AVIF ist bereits ordentlich, aber noch nicht so breit wie die für WebP.
Das APNG-Format ist die animierbare Variante von PNG.
Mit SVG („Scalable Vector Graphics“) steht für Webseiten ein vektorbasiertes Grafikformat zur Verfügung. Allerdings ist das SVG-Format ziemlich vielschichtig. Komplexere Bildelemente und bestimmte Sorten von Animationen werden vielleicht nicht in allen alten Browsern korrekt angezeigt.
Die folgenden Varianten eines kleines Bildausschnittes wurden jeweils in
JPEG, WebP und AVIF mit unterschiedlichen Kompressionsraten behandelt.
Für einen fairen Direktvergleich gebe ich hier nicht die einstellbaren
Kompressionsstufen an (die wären nicht zwischen Programmen vergleichbar), sondern
die tatsächlich erzielten Kompressionsraten im Vergleich zu einer
unkomprimierten Bilddatei.
Kompression ca. 1:4 – JPEG/WebP/AVIF
Kompression ca. 1:10 – JPEG/WebP/AVIF
Kompression ca. 1:20 – JPEG/WebP/AVIF
Kompression ca. 1:40 – JPEG/WebP/AVIF
Kompression ca. 1:80 – JPEG/WebP/AVIF
Mit "glatter Grafik“ im Sinne dieses Abschnitts sind Bilder aus einem Grafikprogramm gemeint, die nur wenige Farbabstufungen enthalten (wofür das JPEG-Format nicht so gut geeignet ist). Hier zunächst Beispiele in 100 % Auflösung ohne Pixelreserve. Alle Dateien sind auf gleiche Größe gebracht (ca. 13 kB inkl. sRGB-Profil).
PNG/JPEG/WebP/AVIF
Hier nochmal dasselbe, aber mit einem Pixelüberschuss von Faktor 2 (Dateigröße jetzt jeweils ca. 27 kB).
PNG/JPEG/WebP/AVIF
Hier noch als SVG-Vektorgrafik (ca. 20 kB) im Vergleich zur PNG-Datei. Um die Vorteile der SVG-Grafik zu sehen, bitte im Browser stark aufzoomen (an mobilen Geräten einfach mit zwei Fingern aufziehen, an normalen Computern vergrößern durch mehrfaches Drücken von Strg|+ und mit Strg|0 zurück zu 100 %).
PNG/SVG
Die Grafik mit Transparenz wird im PNG-Format (363 kB), WebP-Format (40 kB) und AVIF-Format (40 kB) gezeigt. Die Kompression von WebP und AVIF wurde hier so eingestellt, dass die Datei möglichst klein wird, aber (nach subjektiver Beurteilung) noch keine sichtbaren Artefakte bleiben.
PNG/WebP/AVIF
Das Panoramabild ist so eingebunden, dass es auf einem großen Bildschirm die gesamte Textbreite einnimmt, sich aber auf kleineren Bildschirmen zusammen mit dem Text an die zur Verfügung stehende Breite anpasst. Sie können testweise das Browserfenster verschmälern (bzw. das Smartphone vom Hoch- ins Querformat drehen), um die Anpassung live zu sehen.
Die erste Version des Bildes liegt in 400 x 300 Pixel Größe vor und wurde auch in 400 x 300 Pixel Größe im HTML-Code dieser Seite eingebunden. Die zweite Version wurde ebenfalls in 400 x 300 Pixel Größe eingebunden, aber die dahinterstehende Datei ist 800 x 600 Pixel groß.
Wenn Ihr Bildschirm ohne Skalierung betrieben wird, werden die beiden
Versionen nahezu gleich aussehen. Wenn ihr Bildschirm auf eine Skalierung >100 % eingestellt ist, wird die zweite Version von der Pixelreserve profitieren und somit schärfer und detailreicher erscheinen.
Autor: Andreas Beitinger
Letzte Änderung: Juni 2024
IMPRESSUM
DATENSCHUTZERKLÄRUNG