Zum Inhalt springen

Pixel-Grafik

Wir haben als erstes Bildformat svg kennen gelernt.

Für Fotos kann man aber kein Vektorformat verwenden, da brauchen wir ein Pixelformat wie webp oder avif.

Beispiel für ein gif Bild: Animation (Bild: Internet Meme, Quelle unbekannt)

Das gif-Format ist sehr eingeschränkt: Es kann nur eine Palette (eine feste Farbtabelle) von maximal 256 Farben (8 Bit) darstellen, von denen eine als transparent (durchsichtig) definiert werden kann. Ein „animiertes gif“ enthält mehrere Bilder, die der Reihe nach angezeigt werden.

Heute werden statt des animierten gifs Videos verwendet, damit erreicht man eine kleinere Dateigröße.

Beispiel für ein jpg Bild: verschiedene Kompression

(Bild von Michael Gäbler und AzaToth, CC-SA)

Ein jpg kann Millionen von Farben darstellen und bietet variable Kompression (das Verkleinern der Datei), aber keine Transparenz. Besonders geeignet war es für Bilder mit Farbverläufen, z. B. Fotos.

In Wirklichkeit würde man die Kompressionsrate nicht so extrem hoch setzen wie im linken Drittel des Bildes.

Für neue Projekte sind webp oder avif meist die bessere Wahl: Sie haben die gleichen Stärken wie jpg, komprimieren aber noch besser und können auch alpha Transparenz (teil-durchsichtige Pixel) und Animation. jpg bleibt aber wegen der guten Kompatibilität weit verbreitet und als Fallback relevant.

webp und avif sind moderne Pixelformate für das Web. Sie können viele Farben darstellen, komprimieren die Datei sehr gut (kleine Dateigröße in Byte bei guter Qualität), unterstützen alpha Transparenz (teil-durchsichtige Pixel) und auch Animation. Damit vereinen sie die Stärken der älteren Formate gif und jpg in einem Format.

Demo