PNG, JPG, SVG – Was ist das richtige Bildformat meine Website?

Bilder sind eines der Hauptelemente heutiger Websites, sorgen jedoch häufig für lange Ladezeiten und verärgerte Besucher. Damit das nicht passiert, erkläre ich in diesem Artikel die Unterschiede zwischen den gängigen Bildformaten PNG, JPG, SVG und EPS. 

Wenn man sich die Dateiendung seiner Bilder auf dem PC einmal genauer ansieht, so stellt man fest, dass die meisten die Endung .jpg besitzen und einige Grafiken wahrscheinlich auch mit .png enden. Lädt man Icons aus dem Internet herunter oder beauftrag einen Grafiker mit einem Logo, so erhält man häufig sogenannte SVG bzw. EPS Dateien. Jedes dieser unterschiedlichen Bildformate hat seine Berechtigung und seinen eigenen Zweck. Im Folgenden gehe ich auf die Vor bzw. Nachteile der unterschiedlichen Formate ein und zeige wann man auf seiner Website besser welches Bildformat verwenden sollte.

JPG – Der Klassiker für Fotos und Bilder

Das JPG-Format kennt sogut wie jeder der schon einmal Bilder mit seinem Smartphone oder seiner Kamera geschossen und auf dem Computer gespeichert hat. Dieses Format ist eines der gängigsten und steht für „Joint Photografic Experts Group“. Es wird meist bei digitalen Fotos verwendet, wobei scharfe Kanten unscharf dargestellt werden und im Falle einer der Komprimierung die Bildqualität nicht voll bestehen bleibt. Das Format eignet sich für Bilder mit mehr als 256 Farben und kann bis zu 16,8 Millionen Farben darstellen. Durch die verlustbehaftete Komprimierung sind allerdings sehr kleine Dateigrößen möglich. Im Vergleich zu PNG-Bildern kann man keine Transparenzen darstellen.

PNG – Das Bildformat für das Internet

PNG steht für „Portable Network Grafics“ und wurde entwickelt um das patentierte Format „GIF“(Grafic Interchange Format) zu ersetzen. Neben Transparenzen über einen Alpha-Kanal lassen sich mit dem Format auch verlustfreie Kompressionen durchführen. Die Bildqualität ist besser als die von JPG-Bildern und es können ebenfalls sehr kleine Dateigrößen erreicht werden. Jedoch eignet sich das Format weniger für die Darstellung von großen Bildern, sondern eher für kleinere Logos, Icons und andere Grafiken da das Farbspektrum mit knapp 256 indizierten Farben recht überschaubar bleibt.

Vektorgrafiken mit SVG (Scalable Vector Grafic)

Einen Schritt weiter in Richtung hohe Bildqualität gehen sogenannte Vektorgrafiken. Dabei werden die erstellten Grafiken in Form von Vektoren dargestellt, was den Vorteil hat, dass diese dadurch skalierbare sind. das bedeutet, dass SVG-Grafiken, beliebig groß dargestellt werden können ohne dabei „pixelig“ zu werden. Man verwendet das Format bei Logos und grafischen Elementen für Internetseiten und häufig auch für die Print-Werbung (Visitenkarten, Flyer, Plakate etc.). Eine weitere tolle Eigenschaft von SVG-Grafiken ist die, dass sie animierbar sind und durch JavaScript manipuliert werden können. Für Fotos und detailreiche Bilder eignet sich das Format jedoch nicht. Möchte man, dass diese auf Retina Geräten trotzdem Scharf angezeigt werden, muss man dafür eine sehr hohe Auflösung wählen.

Übersicht über gängige Bildformate

Hier kommt jetzt noch eine kurze Übersicht der Eigenschaften der verschiedenen Bildformate:

JPG

  • 16,8 Millionen Farben möglich
  • Verluste bei der Komprimierung
  • geringe Dateigröße möglich
  • kein Alphakanal (Transparenz)
  • scharfe Kanten werden unscharf abgebildet
  • Ideal für große Fotos mit vielen Farben/ Details

PNG

  • 256 Farben möglich
  • Verlustfreie Komprimierung
  • geringe Dateigröße möglich
  • Transparenzen möglich
  • scharfe Kanten werden scharf dargestellt
  • Ideal für kleine Bilder, Grafiken und Logos

SVG

  • Verlustfrei skallierbar
  • Animationen möglich
  • Manipulation per Javascript/JQuerry möglich
  • Ideal für Logos, Grafiken im Web und für Printmedien

 

 

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.