Welche Grafikformate sollen auf Websites verwendet werden?

Welche Grafikformate sollen auf Websites verwendet werden?

Je nach Einsatzgebiet und Zielgruppe sollten verschiedene Grafikformate auf Websites verwendet werden. GIFs eignen sich vor allem für kurze Animationen, bieten jedoch nur ein reduziertes Farbspektrum. JPEG lässt sich leicht komprimieren, eignet sich aber nicht zu Bearbeitungszwecken. PNG-24 macht sich als Lossless-Format gut, kämpft allerdings mit App-Kompatibilität. Bei Responsive Designs sollten flexible SVG-Grafiken herangezogen werden.

Das passende Bildformat finden

Das Internet wäre ohne Bilder und Grafiken unvorstellbar, ja geradezu langweilig. Ob Stockfotos, animierte GIFs, Landkarten, Memes oder Katzenbilder – sie alle werten nicht nur Webprojekte auf, gut eingesetzte Grafiken heben die Laune, können sogar über Erfolg und Misserfolg entscheiden. Welche Grafikformate jedoch auf Websites verwendet werden sollen, ist eine seit Jahrzehnten andauernde Streitfrage. Jedes Format, jede Form, jede Kompression hat ihre Vor- und Nachteile und eignet sich in der Regel jeweils für bestimmte, zweckmäßige Einsatzgebiete. Das gilt auch für die vier folgenden Dateitypen.

GIF

GIFs sind überall, vor allem in animierter Form. Sogenannte Animated GIFs ermöglichen Kurzdarstellungen von bewegten Bildern ohne Video-Codec und eignen sich vor allem für schräge oder ikonische Szenen von nur wenigen Sekunden. Die Limitierung des Formats auf nur 256 Farben sorgt für Dateien in Klein- bis Kleinstgrößen, was bis vor einigen Jahren schwachen Internetverbindungen entgegenkam, die jedoch mittlerweile fast vollständig der Vergangenheit angehören. Heutzutage werden GIFs, abgesehen von Animationen und (transparenten) Mini-Pixel-to-Pixel-Variationen, wie Flaggendarstellungen, jedoch kaum gebraucht, da sie keine Farbmischungen erlauben und mit den Tausenden von Farbtönen, die Fotos und somit andere Grafikformate ermöglichen, nicht mithalten können.

JPEG

Das Grafikformat der Joint Photographic Experts Group (kurz JPEG oder JPG) gilt heutzutage mehr oder minder als Web-Standard. Im Gegensatz zu GIFs handelt es sich hierbei um ein 16-bit-Format, das durch Rot-Grün-Blau-Mischungen Millionen Farbkombinationen darstellen kann und nicht zuletzt deshalb auch als Standard-Dateiformat bei Digitalkameras eingesetzt wird. JPEGs ermöglichen außerdem flexible Bildkompression. In der Regel liefert eine 60-75%ige Kompression nach wie vor gute Web-Resultate. Dadurch verliert die Grafik jedoch an Qualität, weswegen JPEG für weitere Bildbearbeitungen und Bildexport unbrauchbar ist – professionelle Fotografen setzen auf RAW, und das nicht nur montagabends.

PNG

Zwar beherrscht das PNG-Format ebenfalls keine Animation, liefert dafür als PNG-24 in der Regel bessere Ergebnisse als JPEG-Files. Das Farbspektrum bewegt sich ebenfalls im Millionenbereich und beherrscht zusätzlich Transparenz als Darstellungsmöglichkeit. PNG-24-Dateien liefern Lossless-Output und sind daher in der Regel etwas größer als JPEGs, bieten jedoch höhere Bildqualität und können besser – verlustfrei – bearbeitet werden. Dieser Dateityp ist nach wie vor nicht mit allen Web-Apps kompatibel.

SVG

Der Außenseiter unter den Grafiktypen ist eigentlich ein Vektorformat, in das Bitmap-Grafiken eingebunden werden. SVGs kommen bevorzugt bei Logos, Karten, Diagrammen und Icons zum Einsatz, und können in sämtlichen Editoren bearbeitet sowie durch CSS und JavaScript modifiziert werden. Das Vektorformat wird somit bevorzugt in Repsonsive Designs eingesetzt und kann recht klein gehalten werden. Je aufwändiger die Grafik ist, desto größer wird die Datei. Zugleich wird das SVG-Format im Alltag kaum verwendet und ist somit eher für (Web-)Design-Profis gedacht.

Es kommt auf den Zweck an

Letztlich hängt das ideale Grafikformat vom Einsatzgebiet ab. JPEG ist und bleibt trotz seiner Limitierungen wohl der Web-Standard. Geht es um Qualität, dürfte an PNG-24 kein Vorbeikommen sein – es ist anzunehmen, dass letzte bestehende Kompatibilitätsprobleme im Laufe der Zeit beseitigt werden. GIFs kommen heute nur noch für Mini-Icons (die klassische Forums-Flagge) und Animationen zum Einsatz. Vielleicht ist SVG das zukunftsträchtigste Format. In Zeiten rasant steigender mobiler Internetnutzung wird Responsive Design immer gefragter werden – und SVG liefert das nötige grafische Knowhow dazu.