Foto: Pixabay (Symbolbild)
Warum des richtige Format gewählt werden sollte
Bildformate unterscheiden sich Grundsätzlich zwischen Pixel- und Vektorbasierenden Formaten. Vektor basierende Grafiken eignen sich z.B. für eine grafische Darstellungen, wo hingegen sich Fotos besser mit Pixel basierenden Grafiken darstellen lassen. Pixel basierende Grafiken unterscheiden sich zudem bei der Auswahl der Farben, die z.T. einstellbarer Kompression und der Möglichkeit zum nutzen von Animationen
Browserkompatibilität der Bildformate
Viele Formate wie z.B. .jpg, .gif., .png oder auch .svg werden bereits von allen Web-Browsern unterstützt. Dahin entgegen gibt es mit .webp oder auch das neuere .avif Format, Formate welche noch nicht von allen Browsern unterstützt werden.
Die Bildformate im Einzelnen
JPG / JPEG
JPEG (Joint Photographic Expert Group) speichert Bilder mit 16,7 Millionen Farben. Dies jedoch auch immer verlustbehaftet, so dass selbst wenn Bilder im .jpg-Format in einer 100&igen Qualität abgespeichert werden, dennoch einen Qualitätsverlust mit sich bringen. Ein Nachteil beim .jpg-Format ist zudem, dass dieses Format keine Animationen zulässt.
GIF
Das .gif (Graphics Interchange Format) Format unterstützt maximal 256 Farben, welche zudem auch transparent dargestellt werden können. Allerdings lässt sich die Transparenz nicht Wahlweise Halbtransparent darstellen, sondern lediglich entweder sichtbar oder Transparent, jedoch aber nicht Halbtransparent wie bei anderen Bildformaten. Da hingegen unterstützt das .gif-Format Animationen bei welchen mehrere Bilder nacheinander abgespielt werden.
PNG
Das PNG (Portable Network Graphics) Format ist prinzipiell mit dem .gif-Format vergleichbar, da dieses, wie auch das .gif-Format, Bilder mit maximal 256 Farben und einer Transparenzstufe speichert. Der Unterschied zwischen den .png und dem .gif-Format hingegen ist, dass das .png-Format keine Animationen zulässt. Gegenüber dem .gif oder auch .jpg-Format werden beim .png-Format Bilder Verlustfrei gespeichert, so dass keine Auswahl der Qualitätsstufe, wie beim .jpg-Format, angeboten werden. Außerdem bietet das .png-Format das nutzen von Transparenzen.
Im Gegensatz zum .png-Format, unterstützt das .png24 bis hin zu 16,7 Millionen Farben und eignet sich daher besonders für Bilder und Fotos. Das .apng-Format erweitert dahin die Möglichkeit des Nutzens von Animationen.
WEBP
Das .webp-Format, welches als modernes Bildformat die älteren Formate wie .jpg, .gif und .png ersetzen soll, bietet, wie auch das .png-Format, eine Verlustfreie Kompression. Webp speichert Bilder etwa 25% kleiner ab als die im .jpg und .png-Format. Aufgrund der viel kleineren Dateigröße, sollte daher das .webp-Format bevorzugt werden.
AVIF
Da wo dass .webp-Format ältere Formate wie .jpg, .gif oder auch .png ablösen soll, soll das aktuelle .avif-Format (AV1 Image File Format) das .webp ablösen. Das .avif-Format bietet viele Funktionen und eine durchaus gute Kompression und ist zudem ein Open-Source-Dateiformat, für welches keine Lizenzgebühren erhoben werden. Im Vergleich zum .jpg speichert das .avif-Format Bilder ca. 50% kleiner ab, so dass sich die Dateigröße um ein Vielfaches verkleinert.
SVG
Das SVG (Scalable Vector Graphics) Format ist ein auf XML basiertes Vektorgrafikformat. Ein großer Vorteil beim .svg-Format ist, dass diese ohne Qualitätsverlust vergrößert werden können. Entsprechend dessen eignet sich dies Format besonders für Icons, Logos, uvm. an. Ungeeignet hingegen ist .svg-Formate für Pixelgrafiken zu verwenden.
Was haltet Ihr von den Bildformaten und welche nutzt ihr?
Schreibt es uns in den Kommentaren oder diskutiert mit anderen darüber in unserem Forum.