Das Internet ist in erster Linie ein visuelles Medium. Und wie heißt es so schön: Ein Bild sagt mehr als tausend Worte. Richtig eingesetzt sind Bilder mehr als schmückendes Beiwerk. Sie können Stimmung schaffen und in sehr dichter Form Informationen und Emotionen transportieren.
Doch gehen wir einen Schritt zurück, denn wer Bilder im Internet einsetzen will, sollte nicht nur „Bildsprache sprechen" sondern auch ganz grundlegend wissen, welche Bildformate sich wofür eignen.
Besonders wichtig wird dies in Zeiten, da die mobile Internetnutzung wächst und immer mehr Menschen mit unterschiedlicher Bandbreite surfen. Optimierte Bilder und kurze Ladezeiten werden hierdurch zu einem wichtigen Qualitätskriterium. Übrigens nicht nur für das Surferlebnis des Internetnutzers. Auch Suchmaschinen wie Google berücksichtigen dies bei der Zusammenstellung der Suchergebnisse. Gucken wir uns nun die 4 wohl aktuell gängigsten Bildformate für das Internet einmal im Detail an:
JPEG, jpg – Bitmapgrafiken mit Komprimierungspotenzial
Das JPEG-Format wurde bereits 1992 eingeführt und ist noch immer weit verbreitet. Es eignet sich sehr gut für vollflächige Fotos und Grafiken mit hoher Farbendichte. Im Gegensatz zu nicht komprimierten Bilddaten kann eine JPEG-Datei durch unterschiedliche Kompressionsstufen und Kompressionsverfahren sehr stark verkleinert werden. Das ist wichtig für kurze Ladezeiten. Eine wesentliche Einschränkung von JPEG-Dateien ist, dass sie keine Transparenz zulassen.
Für die Komprimierung von JPEG-Dateien sorgen entsprechende Speicher- bzw. Export-Optionen in der Bildbearbeitungssoftware, die sowohl kommerzielle Software wie Adobe Photoshop, Fireworks oder Corel Draw als auch kostenfreie Alternativen wie Gimp anbieten. Auch Online gibt es verschiedene Dienste, die eine Optimierung von JPEG-Dateien vornehmen. In der Regel muss man etwas experimentieren, um den optimalen Kompromiss zwischen Qualität und Dateigröße zu finden. Kompressionsraten zwischen 60 und 85 Prozent bringen jedoch meist gute Ergebnisse für die Einbindung im Web.
GIF – Transparenzen und Animationen mit reduziertem Farbumfang
Das GIF-Format stammt ebenfalls fast aus den „Urzeiten" des Web, ist aber nach wie vor noch weit verbreitet und für bestimmte Anwendungsfälle sehr gut geeignet. Mit maximal 256 Farben ist es weniger geeignet um Fotos abzubilden.
Seine Stärken spielt das GIF-Format vor allem bei einfacheren Grafiken mit geringer Farbtiefe aus. Logos, Icons, Batches und Schemazeichnungen sind typischerweise die Domäne des GIF-Formats, wobei sich je nach Anwendung die Farbtiefe nochmal reduzieren lässt und somit sehr kleine Dateigrößen möglich sind. Zudem unterstützt das Gif-Format auch Transparenzen, um z.B. ein Icon per HTML/CSS auf unterschiedlichen Farbhintergründen darstellen zu können.
Eine Besonderheit des GIF-Formates ist die Möglichkeit, einzelne Bildfolgen auch als Animation abspeichern zu können, ohne das zum Abspielen im Browser JavaScript oder Flash-Unterstützung benötigt wird.
PNG: Gute Komprimierungsmöglichkeiten und Transparenz
Neuer als die beiden oben vorgestellten Grafik-Formate ist das PNG-Format. Auch das PNG-Format kann in unterschiedlichen Kompressionsstufen und Farbauflösungen abgespeichert werden. Wie beim JPEG-Format ist eine sehr große Farbtiefe mit bis zu 16,7 Millionen Farben möglich. Damit eignet sich auch PNG sehr gut für Fotos und Abbildungen mit hoher Farbenanzahl. Ein wesentlicher Vorteil von PNG gegenüber JPEG ist die Möglichkeit, transparente Bereiche innerhalb der Grafik zu definieren. Die PNG-Grafik muss also nicht zwingend einen vollflächigen Hintergrund haben und kann per HTML/CSS über andere Elemente der Website gelegt werden, ohne sie komplett zu verdecken.
Gerade bei vollflächigen Fotos ist jedoch bei vergleichbarer Bildqualität meist die Dateigröße etwas größer als beim entsprechend komprimierten JPEG-Format. Allerdings ist dies keinesfalls eine feste Regel. Im Zweifelsfrei ist ein wenig Ausprobieren angesagt.
SVG (Scalable Vector Graphics)
Die oben genannten Grafikformate repräsentieren die Gruppe der sogenannten Bitmap-Grafiken, das heißt, die Grafik wird in einzelne Bildpunkte aufgeteilt. Dieses Verfahren eignet sich sehr gut um besonders detail- und farbreiche Abbildungen wie zum Beispiel Fotos darzustellen.
Mit dem SVG-Format findet seit einiger Zeit eine vektorenbasierende Grafikdarstellung (sogenannte Vektorgrafik) größere Verbreitung auch im Internet. Bei Vektorgrafiken wird das Bild nicht in einzelnen Punkten abgespeichert, sondern in Elemente aufgeteilt, die anhand von Eigenschaften wie Linienstärke, Farbe und Form/Bewegung beschrieben werden.
Der Vorteil vektorbasierter Grafikformate ist zum einen die freie Skalierbarkeit, meist ohne Qualitätsverlust. So lassen sich Abbildungen im Internet zum Beispiel ohne Qualitätsverlust zoomen. Zum anderen lassen sich gerade schematische, formenbasierte Abbildungen als sehr kleine Dateien abspeichern. Für die Darstellung von detail- und farbenreichen Fotos ist das Vektorformat jedoch nicht geeignet.
Weiterführende Informationen zum Thema Grafik-Formate:
Beschreibung Grafikformate auf selfhmtl.org
Tools zur Bildoptimierung im Internet
Ein Beitrag von Holger Rückert
Foto: Billionphotos.com
Anzeigen
