Einer der essentiellen Fragen, die man sich stellen muss wenn man Bilder für das Web verwendet, ist die nach dem passenden Komprimierungs- und Bildformat.
Für das Web stehen hierfür JPG, PNG, GIF und SVG zur Auswahl.
Um die richtige Wahl zu treffen ist es notwendig, das eigentliche Ziel und die Komprimierungsverfahren zu kennen.
Ziel: Der goldene Mittelweg zwischen Qualität und Dateigröße.
Bildformate / Komprimierung:
JPG
Da das JPG-Verfahren bis zu 16 Millionen Farben darstellen kann wird es nahezu ausschließlich für Fotos oder Grafiken mit vielen unterschiedlichen Farben verwendet.
Dieses Verfahren beherrscht eine Qualitätseinstellung von 0% bis 100%, je stärker komprimiert wird, also je schlechter die Qualität ist, desto eher sind die sogenannten “Artefakte” zu erkennen.
Die eigentliche Schwäche von JPG ist es, einfarbige Flächen und Transparenzen darzustellen. Da gibt es 3 Alternativen:
GIF
GIF’s können bis zu 256 Farben (8Bit) speichern und beherrschen volltransparente Pixel. Das heißt Pixel können entweder mit einer Farbe gefüllt sein oder Transparent sein, es gibt jedoch keine Abstufung der Transparenz (z.B. 34% transparent).
Der große Vorteil von GIF-Datein liegt in der winzigen Dateigröße bei geeigneten Grafiken. ZU empfehlen ist es also für Grafiken die aus wenigen Farben aber größeren Flächen besteht und keine halbtransparenten Pixel benötigen.
PNG
Die Portable Network Graphics sind, wie der Name schon sagt, mit eines der geeignetsten Bildformate für das Web. Diese verfügen über einen Alpha-Kanal, mit dessen Hilfe Transparenzen gespeichert werden können.
Des weiteren gibt es hier die Unterscheidung zwischen PNG-8 und PNG-24, wobei PNG-8 eher an das GIF-Format angelehnt ist (256 Farben resultierend aus 8bit Farbtiefe) und PNG-24 eher an das JPG-Format angelehnt ist (16.777.216 Farben resultierend aus 24bit Farbtiefe).
Nicht geeignet sind PNGs für Fotos und komplexe Grafiken, da diese durch das Komprimierungsverfahren zwar die gleiche Qualität wie JPG erreichen, jedoch eine unverhältnismäßig höhere Dateigröße haben.
SVG
Die Scalable Vector Graphic, also eine skalierbare Vektor-Grafik, hält immer mehr Einzug ins Web.
Hier werden nicht die einzelnen Pixel oder Pixelgruppen gespeichert, sondern die Pfade und Füllungen von Objekten.
SVGs sollten immer dann verwendet werden, wenn eine Vektorgrafik vorliegt und es sinnvoll ist, diese auch als Vektorgrafik im Projekt zu verwenden.
Zu beachten gilt es, dass SVGs sowohl vom Internet Explorer 8 (und abwärts) sowie von Android-Browsern <2.3 nicht unterstützt werden.
Zusammenfassung:
- Logo -> PNG24, PNG8 (wenn geringe Farbanzahl)
- Fotos -> JPG
- Simple Grafiken mit farbigen Flächen -> GIF, PNG
- Farbverläufe -> JPG, PNG24
- Transparenz -> PNG, GIF
- Halbtransparente Pixel -> PNG