Welche Grafik-Typen gibt es und wann setzt man sie ein?

ShopFactory besitzt einen leistungsstarken eingebauten PictureManager, um Ihnen das Leben zu erleichtern.

ShopFactory besitzt einen leistungsstarken eingebauten PictureManager, um Ihnen das Leben zu erleichtern. Dieser PictureManager kann automatisch Bildgrößen abgleichen, um Thumbnails zu erstellen, die Bildgröße kann auf ein Maximum beschränkt werden und er kann ein Thumbnail auf das Originalbild verlinken. Wenn Sie ein Foto mit Ihrer Kamera aufgenommen haben, speichern Sie es auf Ihrem Computer ab — am besten unter einem den Inhalt beschreibenden Namen (Buchstaben A-Z, a-z ohne Umlaute, Ziffern 0-9, keine Sonderzeichen wie &, %, keine Leerzeichen, nur '_' und '-' sind erlaubt). ShopFactory wird den Namen als Titel verwenden und sich ebenso um das benötigte Bildermanagement kümmern (incl. Kalibrierung und Komprimierung).

Hier nun eine Auflistung der unterschiedlichen Bildformate sowie deren Nutzung und ihre Unterschiede.

Was ist der Unterschied zwischen JPG, GIF und PNG?

Der Unterschied besteht hauptsächlich in der unterschiedlicher Komprimierung der einzelnen Fotos. Standardmäßig haben die meisten Fotos eine sehr große Dateigröße, was jedoch für die Nutzung auf einer Webseite oftmals nicht sinnvoll ist. Die bekanntesten komprimierten Datenformate sind .jpg, .gif und .png. Andere Formate wie z. B. .bmp, .tif und .psd sind meist nicht komprimiert und sollten nicht für den Gebrauch auf einer Website benutzt werden, weil sie eine sehr viel größere Datenmenge besitzen und innerhalb des Browsers länger geladen werden.

JPG

Das JPG-Datenformat (Kurzform für »Joint Photographic Experts Group«) ist eine Form der Komprimierung, die am besten für Fotos und komplexe Bilder geeignet ist. Die JPG-Komprimierung entfernt für das menschliche Auge nicht sichtbare Farbinformationen, um die Dateigröße zu verkleinern. Aber Vorsicht: Wenn man die Qualität eines JPG-Bildes zu stark verringert, gehen sichtbare Bildinformationen verloren, die nicht wiederhergestellt werden können.

Das JPG-Format ermöglicht zudem das phasenweise Laden von sog. progressiven JPGs. Sie kennen diesen Vorgang vielleicht von Webseiten, auf denen ein großes Foto langsam seine Verschwommenheit verliert und schrittweise klarer wird.

Nutzen Sie JPGs für Produktfotos, menschlichen Portraits und weiteren Detailaufnahmen, bei denen Farbvarianten und Detailtreue wichtig sind. Nutzen Sie JPGs NICHT, wenn Sie Transparenzen, d. h. Durchsichtigkeit innerhalb des Fotos, wünschen. Daraus ergibt sich die Möglichkeit, quasi durch bestimmte transparente Teile des Bildes zu sehen, um den Hintergrund, bspw. den der Webseite, zu erkennen.

GIF

Ein GIF (Graphics Interchange Format) reduziert die Anzahl der Farben, von möglicherweise mehreren tausend innerhalb einer Aufnahme aus einer Digitalkamera auf 256. GIFs unterstützen zudem die bereits angesprochene Transparenz und besitzen die einzigartige Möglichkeit, eine Sequenz von Einzelbildern zu zeigen, ähnlich wie bei Videos (sog. animiertes GIF), also einer Serie von getrennten GIF-Dateien, die zusammengefügt eine Bewegung oder Animation erzeugen.

GIFs, wie auch JPGs, können in Segementen von Webseiten geladen werden. Diese Bilder, auch bekannt als verflochtene GIFs, neigen dazu, etwas größere Datenmengen als normale GIFs zu beinhalten, jedoch können mit ihrer Hilfe GIF-Dateien partiell auf einer Webseite während des Ladevorgangs sichtbar sein.

GIFs können effektiv bei Dateien mit begrenzter Farbenzahl genutzt werden, wie z. B. bei Logos und Grafiken/Diagrammen oder auch für Bilder, bei denen Transparenz wichtig ist. Nutzen Sie GIFs nicht bei Vollfarb-Produktfotos, z. B. menschlichen Portraits, bei denen Farbvielfalt und Detailtreue entscheidend sind, da GIF-Dateien auf 256 Farben limitiert sind.

Auch wenn das GIF-Format immer noch in Gebrauch ist, so sollte es zu Gunsten des PNG-Formats eher vermieden werden, da PNGs gegenüber GIFs fast alles ein wenig besser kann.

PNG

PNG (Portable Network Graphics) wurde als Alternative zu GIF entwickelt, als die dem GIF zugrundeliegende Technologie urheberrechtlich geschützt war und Anwender eine Erlaubnis für die Benutzung benötigten. PNGs gewährleisten eine 5 bis 25 % höhere Komprimierung als GIFs, zusammen mit einer größeren Bandbreite an Farben. Auch PNGs unterstützen Transparenz (wie GIFs). Aber PNGs erlauben eine variable Transparenz, bei der der Anwender selbst wählen kann, bis zu welchem Grad das Bild transparent ist. Der Nachteil bei dieser Möglichkeit ist jedoch, dass nicht alle älteren Browsergenerationen diese Form der Transparenz gleich gut darstellen können.

PNGs unterstützen, ebenso wie GIFs, die Bild-Verflechtung (Interlace), wobei PNGs zweidimensionales Interlacing nutzen. Dadurch verringert sich die Ladezeit der Bilder deutlich, d. h. PNGs werden im Schnitt 2-mal schneller geladen. Wenn Sie sich für diese Interlacing-Technologie interessieren, finden Sie dank Google viele hilfreiche Links.

SVG

SVG (Scalable Vector Graphics) verdient auch eine Erwähnung. SVGs sind ein Webstandard, der auf XML basiert und sowohl das statische Bild und auch Animationen in zwei Dimensionen beschreibt. Dieser Standard existiert seit mehr als einem Jahrzehnt und mit dem jüngsten Erscheinen von HTML5 wird auch SVG immer mehr genutzt.

SVG ermöglicht Ihnen das Erstellen hochqualitativer Grafiken oder Animationen, die bei einer Erhöhung der Dateigröße keine Details einbüßen. Das bedeutet, dass Sie eine SVG-Datei erstellen können, die auf einem Handy-Display ebenso großartig aussieht wie auf einem 27-Zoll-Computermonitor.

Wann WAS benutzen?

Da es keine Zauberformel gibt, die besagt, wann man welches Dateiformat benutzt, folgt nun ein kleiner Leitfaden, den Sie bei Ihrer Suche nach dem passenden Format befolgen können.

Wenn das Bild eine große farbliche Bandbreite beinhaltet, nutzen Sie kein GIF-Format. PNGs oder JPGs sind die besten Formate für ein umfangreiches Farbspektrum. JPGs sind am besten für Fotos und Bilder geeignet, die fotografische Elemente und feine Details darstellen. PNGs sind wiederum besser für Bilder mit Text, Diagrammen, Screenshots und detailierten Illustrationen geeignet.

Wenn Sie sich für das Format eines Bildes entscheiden, das keine fotografischen Elemente aufweist, dann ist es eine gute Idee, die Transparenz und Komplexitität im Hinterkopf zu behalten. Für ein Bild, das eine Vielzahl an Farben hat und weiterführende variable Transparenz benötigt, ist PNG sicher das richtige Dateiformat. Generell nutzen Sie ein transparentes Bild, wenn Sie die Hintergrundfarbe durch Ihr Bild hindurch scheinen lassen möchten, also bspw. ein Produkt vor dem neutralen Farbhintergrund Ihrer Produktbeschreiung im Onlineshop.

Wenn das Bild nur einige wenige Farben besitzt und auch keine erweiterte Alpha-Transparenz benötigt wird, sollten Sie sich für GIF entscheiden. Beachten Sie bitte, dass jegliche Verwendung von Transparenz oder variabler Transparenz mit diversen Browsern gestestet werden sollte, damit sichergestellt werden kann, dass der Effekt bei allen Browsern tatsächlich der gleiche ist.

Sollten Sie bei der Wahl des Formats je zweifeln, dann gibt es einen einfachen Test, der Ihnen bei der Entscheidungsfindung helfen kann: Exportieren Sie hierfür in Ihrem Bild-Editor eine Bilddatei in die drei vorgestellten Dateitypen und vergleichen Sie die Dateigrößen und die Qualitäten der entstandenen Bilder. Das kann Ihnen rasch aufzeigen, welches Dateiformat Ihnen die beste Bildqualität und Dateigröße offenbart.


Dateiformate ändern

Wenn Sie keinen Zugriff auf ein auf dem Markt befindliches Programm zur Bildbearbeitung mit erweiterten Import- und Export-Optionen haben, können Sie eine der diversen kostenlosen Alternativen, die Sie im Internet finden werden, nutzen. Diese ermöglichen i. d. R. das Abspeichern von Bilder in unterschiedlichen Formaten.

Zusammenfassung

Machen Sie sich mit JPG, GIF und PNG und den diversen Einsatzmöglichkeiten vertraut.

Dies sind die drei Hauptdateiformate, die heutzutage im Internet benutzt werden. Und das Wissen um das passende Format führt immer zu besserer Qualität der Bilder und schnelleren Ladezeiten der Webseiten.