Dennis Nuhn
Junior Web Designer

Webrelevante Grafikformate im Überblick


Was ist eigentlich der Unterschied zwischen einem JPG und einem PNG? Was kann ein GIF und was bitte soll ein SVG sein?

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

JPEG Smiley, 22 KB

JPEG Smiley auf 300 %

JPEG Smiley, 300 %



Anwendungsgebiete für JPG:


Fotos im Web, wegen der reduzierten Datenmenge und den dadurch geringeren Ladezeiten

Papagei Qualität 100Papagei 23 KB

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

PNG Smiley, 1 KB

PNG Smiley 300 %

PNG Smiley, 300 %



Anwendungsgebiete für PNG:


Freigestellte Fotos, Grafiken, Icons, Piktogramme und Logos im Web



GIF (Graphics Interchange Format)

Bringt Bewegung ins Spiel und ermöglicht animierte Bilder.

  • 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

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

SVG Smiley, 1 KB

SVG Smiley 300 %

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.



Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar