Aktuelle News der Wolf-Gruppe

18.
09.18

Welches Bildformat eignet sich wofür im Web?

Welches Bildformat eignet sich wofür im Web?

Die richtige Wahl für das geeignete Bildformat im Web zu treffen, ist gar nicht so einfach. Schließlich sind da viele Aspekte, die bedeutende Unterschiede bei der Verwendung und Darstellung Ihrer Datei ausmachen können. Entscheidend sind da beispielsweise die Größe, das Farbspektrum, die Transparenz oder aber die Skalierbarkeit der Datei. Wir geben Ihnen ein Überblick:

  • JPG/JPEG – für fertige Fotografien

Zuallererst: Die minimal unterschiedlichen Dateiendungen JPG und JPEG bezeichnen ein und das selbe Format. Zurück geht diese Endung auf die so genannte Joint Photographic Expert Group, die Urväter dieses Dateiformats sozusagen. Da in älteren Windows-Systemen nur dreistellige Endungen bei der Speicherung möglich waren, war hier die Bezeichnung JPG geläufig. Anders bei Macintosh: Hier wurde die vierstellige Endung genutzt, also JPEG. Bis heute sind beide Bezeichnungen im Umlauf. Unabhängig davon welche Sie wählen: die Endung bezeichnet immer das selbe Format. Damit können Sie große Bilddateien, etwa im RAW-Zustand, komprimieren. Allerdings sind JPGs/JPEGs somit auch verlustbehaftet. Transparenzen werden außerdem nicht unterstützt.

  • GIF – für kleine Animationen, Logos und Icons auf Social Media Plattformen

Jeder, der Facebook, Instagram oder Twitter nutzt, hat schon mal über ein sogenanntes GIF – ein Graphic Interchange Format – geschmunzelt. In diesem digitalen Umfeld machen sich die kleinen animierten Bilder auch am besten – denn ein geringes Farbspektrum und die Index-Transparenz begrenzen die weitere Verwendung, wie etwa eine Skalierung in verschiedene Formen und Größen. Auch die Darstellungsmöglichkeiten, etwa bei Schattierungen, sind begrenzt. Für Fotos ist das GIF-Format somit keinesfalls zu empfehlen. Navigationselemente auf Websites können damit allerdings ausreichend abgebildet werden.

  • SVG – für Grafiken, Logos und Icons im Responsive Webdesign

Neben den gängigen Pixelgrafiken ist das Vektorgrafikformat SVG  beliebt im Web. Hier werden, anders als bei Bitmap-Grafiken, Vektorinformationen statt Farbwerte pro Pixel gespeichert. Der Speicherbedarf ist also geringer, allerdings wird so natürlich auch die Farb- und Schattendarstellung minimiert. Von Vorteil ist dieses Format, wenn Grafiken in verschiedenen Ausführung nachträglich skaliert werden müssen. Das ist besonders im Rahmen von Responsive Webdesign äußerst hilfreich.

  • PNG – für freigestellte Grafiken, Logos und Icons

Der Vorteil des PNG-Formats: Es ist anders als JPG/JPEG nicht verlustbehaftet und im Gegensatz zum GIF für eine bessere Transparenz einsetzbar. Hier gibt es jedoch noch die Unterscheidung in PNG-8, PNG-24 und PNG-32. Ersteres kann vor allem für simple Grafiken eingesetzt werden, die beiden anderen Formate werden verlustfrei komprimiert. Für eine Grafik mit großem Farbspektrum sollten Sie auf PNG-24 zurückgreifen, sind Transparenzen erforderlich auf PNG-32. Im Unterschied zum JPG/JPEG eignet sich das Format gut zur Darstellung scharfer Kanten, kann also zum Beispiel für Freisteller genutzt werden. Wenn die Dateigröße für Sie unerheblich ist, bietet sich ein PNG-Format deshalb unbedingt an.

  • Webp – für Fotografien, Grafiken und Animationen

Dieses relativ junge Bildformat stammt aus der Feder von Google – und mit dessen Browser und Software kann es auch hauptsächlich genutzt werden. Das wäre also ein derzeitiger Nachteil von Webp-Dateien. Die Vorteile: Eine vergleichsweise geringe Dateigröße sowie die Untersützung von Transparenzen, Alpha Kanal sowie der RGB-Farbpalette. Das Webp ist ein Allround-Talent für’s Web – und wird Ihnen in Zukunft vermutlich noch öfter begegnen.

Haben Sie den Überblick? Unsere Tabelle hilft, die Eigenschaften
der Dateiformate noch einmal zu vergleichen:

Tabelle