11.10    Bildformate 

Selbst die schönsten Bilder sind nur halb so viel wert, wenn sie nicht das richtige Dateiformat haben. Hier kommt es vor allem auf die richtige Mischung aus Qualität und Dateigröße an. Denn allen Geschwindigkeitsentwicklungen zum Trotz ist die Ladezeit von Bildern immer ein wesentlicher Faktor, der bei der Webgestaltung beachtet werden muss, gerade in Zeiten boomender mobiler Geräte. Je kleiner der Speicherbedarf der Bilddatei ist, umso schneller wird diese beim Anwender geladen. Nur sehr ungern wartet dieser sekundenlang auf Bildinhalte, um im ungünstigsten Fall festzustellen, dass ihn diese gar nicht interessieren. Viele Untersuchungen haben gezeigt, dass die Ladezeit für User eines der wichtigsten Kriterien beim Besuch einer Website ist – und auch für Suchmaschinen ist die Ladezeit ein Rankingfaktor. Der benötigte Speicherplatz und die damit verbundene Ladezeit haben zur Folge, dass Bilder auf Internetauftritten sehr gezielt eingesetzt und Dateiformate bewusst ausgewählt werden sollten.

Werden Bilder aber lediglich als schmückendes Element eingesetzt, von dem keine tiefere Bedeutung ausgeht, sollte ihr Einsatz gut überlegt sein. Ein Screendesign, das aus vielen (und vielleicht noch großformatigen) Bildern aufgebaut ist, lädt entsprechend länger als ein Screendesign, das nur sehr wenige Bilder beinhaltet, die vor allem der Inhaltsvermittlung dienen.

11.10.1    Die Bildgröße 

Die Bildgröße sollte nur so groß sein, wie sie auf der Webseite tatsächlich dargestellt werden soll. Auf eine Skalierung der Bilder per HTML sollte verzichtet werden. Eine Bildvergrößerung bedeutet immer auch Qualitätsverlust, und auch auf eine Verkleinerung sollte nach Möglichkeit verzichtet werden, denn der Browser lädt trotzdem die volle Größe herunter. Es wird also weder Speicher noch Ladezeit eingespart.

Daher sollte immer bereits im Vorfeld geschaut und geprüft werden, in welcher tatsächlichen Pixelgröße das Bild benötigt wird. Die verwendeten Bilder sollten dann entsprechend im Bildbearbeitungsprogramm zurechtgeschnitten und abgespeichert werden.

11.10.2    Die Bildkomprimierung 

Bilddateien werden in ihrer Dateigröße oft reduziert, um weniger Speicherplatz zu benötigen. Diesen Vorgang nennt man Kompression. Die Dateiinformationen werden sozusagen »zusammengepresst«, sodass ein Bild, welches ursprünglich 1 MB (Megabyte) groß war, plötzlich nur noch 300 KB (Kilobyte) Speicherbedarf hat. In Zeiten von Terabyte-Festplatten (1 Terabyte = 1.024 GB) klingt ein Einsparpotenzial wie im oberen Beispiel von 700 KB nicht gerade notwendig, für Webseiten ist es dies aber!

Jedes KB, das der Anwender nicht laden muss, ist gut. Oder anders ausgedrückt: Je weniger Speicherbedarf die Webseite und ihre Inhalte haben, umso besser. Trotz DSL gibt es genug Anwender, die langsamere Internetverbindungen haben. Gerade auch mobile Internetverbindungen sind oft nicht sehr schnell. Und bei Webseiten, die viel Traffic haben (also viele Besucher), entlastet weniger Speicherbedarf die Server enorm.

Verlustfrei & verlustbehaftet | Um Bilder zu komprimieren, muss das Bildmaterial teilweise verändert werden. Meistens werden bestimmte Bildbereiche, die durch Algorithmen berechnet werden, zusammengefasst, sodass Speicherplatz gespart wird. Dies bedeutet aber auch fast immer einen Qualitätsverlust bzw. den Verlust von detailreichen Pixelinformationen. Bei der Komprimierung wird unterschieden zwischen einer verlustbehafteten Komprimierung und einer verlustfreien Komprimierung. Bei der verlustbehafteten werden die Bilddaten optisch verändert, während bei der verlustfreien die Speichermethode angepasst wird und sich dadurch keine optische Veränderung ergibt.

11.10.3    Die Auswahl des richtigen Bildformats 

Die Wahl des richtigen Dateiformats hängt von unterschiedlichen Faktoren ab. Um Bilder sinnvoll auf Webseiten einzusetzen, sind nicht nur Kenntnisse der entsprechenden HTML-Einbindung wichtig, sondern natürlich auch der wählbaren Bilddateiformate. Es gibt vor allem vier Dateiformate, die für Bilder auf Webseiten interessant sind: die drei Pixelformate JPG, PNG und GIF sowie das Vektorformat SVG. Im Folgenden ein Überblick über deren Vor- und Nachteile und Einsatzgebiete.

JPG | Das JPG, manchmal auch JPEG geschrieben, steht für Joint Photographic Experts Group und wurde speziell zum Speichern von Fotografien entwickelt. Das JPG dürfte das meistverbreitete Bildformat im Web sein.

Abbildung 11.105    Die typischen JPG-Artefakte

Das JPG überzeugt durch seinen geringen Speicherplatzbedarf. Dazu lässt sich der Grad der Komprimierung (die sogenannte Kompressionsrate) beim JPG einstellen. Je stärker die Komprimierung ist, umso kleiner die Bilddatei, umso schlechter aber auch die Bildqualität. Umgekehrt bedeutet dies aber auch eine geringe Komprimierung und einen hohen Speicherbedarf, dafür aber eine gute Bildqualität. Bei der Komprimierung kommt es zu den sogenannten Artefakten, die je nach Kompressionsrate mehr oder weniger sichtbar sind. Zudem ist zu beachten, dass das JPG-Format keine Transparenz unterstützt. Leere (transparente) Bereiche der Datei im Bildbearbeitungsprogramm werden beim Abspeichern somit automatisch mit weißer Farbe gefüllt.

Das JPG-Format ist bestens geeignet, um fotorealistische Bilder in guter Qualität anzuzeigen, ohne dass es zu starken Qualitätseinbußen kommt. Bei Illustrationen oder Bildinhalten mit vielen einfarbigen Flächen wird die Kompression schnell sichtbar, und Transparenz kann das JPG gar nicht darstellen.

GIF | Das GIF (Graphics Interchange Format) gilt als etwas in die Jahre gekommenes Format, das aber nach wie vor seine Vorteile und seine Bedeutung hat. Das GIF-Format tut sich vor allem mit zwei Vorteilen hervor:

1. Zum einen kann es transparente Bereiche abspeichern.

2. Zum anderen kann das GIF-Format Animationen wiedergeben, also einzelne Bilder, die hintereinander abgespielt werden. Diese sogenannten GIF-Animationen wurden zur Zeit der Tabellenlayouts gerne eingesetzt. Sich drehende Logos und blinkende Buttons sind typische Beispiele. Auch wenn diese Art der GIF-Animationen eher zurückgegangen ist, spielen GIF-Animationen im Webdesign neuerdings wieder eine größere Rolle (siehe nebenstehenden Kasten).

Obwohl die Kompressionsrate des GIF-Formats sehr gut ist, können Bilder nur mit 8 Bit dargestellt werden. 8 Bit bedeutet, dass maximal 265 Farben abgespeichert werden können, während das JPG meist als 24-Bit-Bild abgespeichert wird und dadurch bis zu 16,7 Millionen Farben darstellen kann. Mit 8 Bit leiden Bilder mit vielen Details und fotorealistische Bilder natürlich unter dieser Einschränkung bzw. werden dadurch teilweise sogar unansehnlich. Das GIF-Format eignet sich deswegen nur für Bilder mit einem geringen Farbspektrum wie z. B. Logos, Illustrationen oder Navigationsbilder.

PNG | Das PNG-Format (Portable Networks Graphics) ist im Vergleich zu den beiden bereits vorgestellten Formaten ein noch relativ junges Bildformat, welches als Alternative zum GIF entwickelt wurde. Das PNG zeichnet sich durch einen geringen Speicherbedarf, gute Qualität und die Möglichkeit der Transparenz aus. Dazu komprimiert das PNG verlustfrei. Dadurch ist die Bildqualität entsprechend gut, allerdings kann die Dateigröße auch nicht ganz so stark reduziert werden wie beim JPG. Das PNG bietet die Möglichkeit, ein Bild nicht nur mit 24 Bit (PNG-24), sondern auch als 8-Bit-Variante (PNG-8) abzuspeichern. Bei 8 Bit sind wie beim GIF lediglich 256 Farben möglich. Dazu ist die Komprimierung des PNGs besser als die des GIFs.

Das PNG wird vor allem bei Transparenzen eingesetzt, wenn die Bildqualität entsprechend gut sein soll bzw. fotorealistische Motive vorhanden sind.

SVG | Das SVG-Format (Scalable Vector Graphics) ist das einzige Vektorformat in dieser Reihe und erst seit einer kurzen Zeit vermehrt bei Webseiten im Einsatz. Vektorgrafiken haben einige Vorteile gegenüber Pixelgrafiken: Da sie aus mathematisch exakt beschriebenen Punkten, Linien und Kurven bestehen, sind sie auflösungsunabhängig und daher beliebig skalierbar. Im Vergleich zu Pixelgrafiken, die jedes einzelne Farbpixel abspeichern müssen, werden hier nur Parameter gespeichert, sodass sie meistens einen sehr geringen Speicherbedarf haben.

Abbildung 11.106    Während Pixelgrafiken beim Skalieren »verpixeln« (oben), bleiben Vektorgrafiken gestochen scharf (unten).

Seit HTML5 können SVG-Grafiken auch ohne Plug-in in Webseiten eingebunden werden. Alle modernen Browser (auch ab IE9) können mit ihnen umgehen. Überall da, wo Motive mit einfachen grafischen Inhalten vorkommen, ist das SVG-Format geeignet, z. B. bei Logos, Diagrammen oder (einfachen) Illustrationen.

11.10.4    Für Web speichern 

Die Wahl des richtigen Bildformats sollte von Fall zu Fall entschieden werden, und die Einsatzzwecke sind nicht in Stein gemeißelt. Möchte man ein Bild abspeichern, sollte in Bildbearbeitungsprogrammen die Für Web speichern-Funktion und nicht die klassische Speichern unter-Funktion genommen werden. Dieser Einstellungsdialog bietet mehr Kontrolle über beispielsweise Qualität, Transparenz und Farben an:

Abbildung 11.107    Der umfangreiche Für Web speichern-Einstellungsdialog

Mit der 4-fach-Vorschau lassen sich verschiedene Einstellmöglichkeiten miteinander vergleichen. So lassen sich Qualität und Dateigröße recht schnell optimieren. Sogar die Download-Geschwindigkeit lässt sich auswählen, um so die geschätzte Ladezeit zu berechnen.

11.10.5    Bildgrößen optimieren 

Je kleiner die Dateigrößen, umso besser – solange die Qualität stimmt. Photoshop liefert an sich schon gute Ergebnisse, die vorhandenen Bilddateien lassen sich aber immer noch weiter optimieren, z. B. mit folgenden Tools:

• ImageOptim: kostenfreies Programm für den Mac, das sowohl JPG, PNG und GIF komprimiert: http://imageoptim.com

• Radical Image Optimization Tool (RIOT): das Gegenstück zu ImageOptim für Windows-Rechner. Kostenfrei downloaden, installieren, los geht’s! http://luci.criosweb.ro/riot

• JPEGmini: speziell für JPG-Bilder, kostenfrei für Mac und Windows erhältlich: http://jpegmini.com