Webrelevante Grafikformate im Überblick
Diese Fragen möchte ich euch gerne beantworten, denn mit diesem Blogeintrag werde ich mich auf die vier webrelevanten Speicherformate für Bilder beschränken und auf ihre Stärken und Schwächen eingehen.
JPG, JPEG (Joint Photographic Experts Group)
Die A-Prominenz unter den Grafikformaten.
– Verlustbehaftete Komprimierung (je nach Qualitätsstufe sog. Artefaktbildung)
+ Dadurch jedoch eine geringere Datengröße bei Bildern mit vielen Farbnuancen
– Bei sehr geringer Farbvielfalt ist eine höhere Datengröße gegenüber dem verlustfreien PNG möglich
– Transparente Hintergründe sind nicht möglich
– Hat auch keinen Alphakanal für teiltransparente Pixel
– Speichert keine Ebenen, sondern reduziert sie auf eine
JPEG Smiley, 22 KB
JPEG Smiley, 300 %
Anwendungsgebiete für JPG:
Fotos im Web, wegen der reduzierten Datenmenge und den dadurch geringeren Ladezeiten
Hier ein JPG eines Papageis in Qualität 100 bei 73 KB (links) und mit Qualität 60 auf 23 KB reduziert (rechts). Wie man sieht, gibt es hier keine sichtbaren Auswirkungen bei deutlich geringerer Dateigröße.
PNG (Portable Network Graphics)
Wenn's mal transparent werden soll.
+ Verlustfreie Komprimierung (maximale Bildqualität)
– dadurch haben Bilder mit vielen Farbnuancen jedoch eine größere Datenmenge
+ Grafiken mit nur wenigen Farben können trotz höherer Qualität im Vergleich zu JPG eine geringe Datengröße haben
+ Transparente Hintergründe sind möglich
+ PNG-24 besitzt einen Alphakanal für teiltransparente Pixel
– Speichert keine Ebenen, sondern reduziert auf eine
PNG Smiley, 1 KB
PNG Smiley, 300 %
Anwendungsgebiete für PNG:
Freigestellte Fotos, Grafiken, Icons, Piktogramme und Logos im Web
GIF (Graphics Interchange Format)
– Verlustbehaftet Komprimiert (auf nur 256 Farben beschränkt)
+ Dadurch aber eine stark reduzierte Datengröße
+ Transparenter Hintergrund ist möglich
– besitzt keinen Alphakanal für teiltransparente Pixel
+ Durch aneinanderreihen von mehreren Bilden sind Animationen möglich
– Speichert keine Ebenen, sondern reduziert auf eine
GIF Smiley, animiert, 3 KB
Anwendungsbereiche für GIF:
Animierte Bilder auf Social Media Plattformen wie Facebook; früher auch Online-Bannerwerbung
SVG (Scalable Vector Graphics)
In jeder Situation verdammt scharf.
+ Beliebig skalierbar und immer scharf, ohne dass es verpixelt (Vektoren sei Dank)
+ Transparenter Hintergrund ist möglich
+ besitzt einen Alphakanal für teiltransparente Pixel
+ In der Lage mehrere Ebenen zu speichern
+ Einzelne Ebenen lassen sich im Browser gezielt per Code ansprechen und verändern oder animieren.
+ Bei simplen Grafiken verhältnismäßig geringe Datengröße
– Bei komplexen Grafiken wie z.B. Fotos jedoch zu groß
– Fotos lassen sich nicht 1:1 in SVGs konvertieren
SVG Smiley, 1 KB
SVG Smiley, 300%
Anwendungsgebiete für SVG:
Grafiken, Icons, Piktogramme und Logos im Web
Mit diesem Wissen seid ihr für die Zukunft bestens gerüstet und wisst welches Format für welchen Verwendungszweck geeignet ist.