Hinweise ausblenden

Diese Webseite verwendet Cookies.
Diese Webseite enthält Affiliate-Links von Amazon.
Näheres siehe Datenschutzerklärung

FOTOVIDEOTEC.DE HAUPTSEITE   IMPRESSUM   DATENSCHUTZERKLÄRUNG

Ausschnitt/Kurzversion des Artikels "Bilder für eigene Internetseiten aufbereiten"

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.

Dateiformat-Testbilder

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".

WebP

Von allen alternativen Formaten für Web-Bilder hat WebP („Web Picture“ oder "Weppy“) bisher die breiteste Browserunterstützung.

AVIF

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.

APNG

Das APNG-Format ist die animierbare Variante von PNG.

SVG

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.

Kompressionsartefakte

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

Kompression für glatte Grafik

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

Kompression für Grafik mit Transparenz

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

Skalieren im responsiven Webdesign

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.

Monitore mit höherer Pixeldichte

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