1. Welche Größe?
Aus technischer Sicht allgemeingültige Vorgaben zu machen für die Mindest- oder Höchstgrößen von Bildern im Web ist zunehmend schwierig. Die sich weiterentwickelnde Display-Technik mit immer besserer Darstellungsqualität einerseits und immer höhere Geschwindigkeiten bei der Datenübertragung andererseits machen sowohl die immer kleinere, als auch immer größere Darstellung von Bildern in sinnvoller Weise möglich, von Thumbnails mit winzigen 80 Pixel Kantenlänge bis zu bildschirmfüllenden Fotos. Es gibt aber natürlich technische Belange, die es bei der Auswahl der richtige Bildgröße zu beachten gilt.
Bei der Frage der Bildgröße ist zunächst zwischen der Dateigröße und der Darstellungsgröße der Bilddatei zu unterscheiden. Beide Größen hängen zusammen: Die Bitmap-Datei besteht aus einer bestimmten Anzahl von Bildpunkten, von denen jeder einen bestimmten Farbwert haben kann. Somit nimmt das Bild nach Einbindung in die Website den Platz der entsprechenden Anzahl von Bildschirmpunkten ein – das ist die Darstellungsgröße. Jeder der Bildpunkte wird mit einem passenden Zahlenwert für seine Farbe in einer Bilddatei gespeichert. Dabei kommen verschiedene Methoden zur Kompression, also zur Verringerung der Datenmenge, zum Einsatz – so ergibt sich die Dateigröße.
Groß dargestellte Bilder sehen toll aus, am besten mit vielen Farben und wenig Kompression. Die dabei anfallenden Datenmengen gehen aber zulasten der Übertragungszeit der Bilddatei. Da die Ladezeit aber ebenfalls ein wichtiges Qualitätskriterium einer Website ist, sucht der geübte Web-Gärtner stets den optimalen Kompromiss von möglichst hoher Darstellungsqualität bei möglichst kleiner Dateigröße.
Bei der Aufbereitung von Bilddateien für die Veröffentlichung im Web ist es zunächst wichtig festzulegen in welcher Pixelgröße das Bild nach der Veröffentlichung auf dem Bildschirm dargestellt werden soll. Soll zum Beispiel ein vorhandenes Bild ersetzt werden, so empfiehlt es sich, die Pixelgröße der zu ersetzenden Grafik zu ermitteln und als Zielgröße für das neue Bild zu verwenden. (Praktisch gelöst zum Beispiel im Browser Firefox: Rechtsklick auf das Bild -> “Grafik-Info anzeigen”. Der “Inspektor”, der inwzischen in vielen Browser-Programmen als Teil der Entwicklerfunktionen an Bord ist, hilft ebenfalls mit Informationen. Auch ein Bildschirmlineal, wie das als Plugin für diverse Browser verfügbare “Measure-it”, leistet gute Dienste.)
Wer die letztliche Ausgabegröße seiner Web-Grafiken kennt und die Bilder in dieser Pixelgröße bereitstellt, macht generell nichts verkehrt. Lange Zeit konnte man es immer auch direkt sehen, wenn Bilder in einem anderen Maßstab als 1:1 im Browser dargestellt wurden, ob vergrößert oder verkleinert: Es sah immer nachteilhaft aus, verschwommen, verrauscht und pixelig. Die goldene Regel, die Grafiken von vornherein auf die Ausgabegröße zu bringen und nicht das Darstellungsprogramm – also den Browser – die Skalierung übernehmen zu lassen, hat nach wie vor ihre Berechtigung.
Ein bisschen gewandelt hat sich das Bild aber in jüngerer Vergangenheit schon. Die Fähigkeiten der verschiedenen Browser-Programme bei der Skalierung von Bilddateien haben eindeutig zugenommen. Die vergrößerte Darstellung von Bildern sollte man nach wie vor vermeiden, denn dabei muss das Darstellungsprogramm im Prinzip Bildpunkte dazuerfinden, die in der Bilddatei nicht angelegt sind – das geht naturgemäß zulasten der Qualität. Die Darstellung von Bildern in einer geringeren als der originalen Pixelgröße gelingt den verbreiteten zeitgemäßen Browsern aber achtbar.
Warum aber sollte man Bilder in einer größeren als der vorgesehenen Pixelgröße bereit stellen, wenn das doch andererseits die Dateigröße unnötig wachsen lässt? Das liegt ganz einfach daran, dass in Zeiten flexiblerer, womöglich responsiver, Gestaltungen inklusive Lightboxen und Thumbnail-Vorschauen sich eine eindeutige Darstellungsgröße für jedes Bild sich gar nicht mehr so ohne Weiteres bestimmen lässt.
Es kann also erforderlich und unter Umständen sogar für die Zugriffszeiten förderlich sein, größere Bilddateien – auch – verkleinert darstellen zu lassen (und so zum Beispiel zeitraubende zusätzliche HTTP-Zugriffe für das Nachladen größerer Bildversionen einzusparen). Zielwert für die Berechnung der Pixelgrößen von Web-Grafiken sollte also für die meisten üblichen Anwendungen die größte erforderliche Darstellungsgröße sein.
2. Welches Dateiformat?
Wenn die gewünschte Grafik in der richtigen Pixelgröße vorliegt, stellt sich die nächste Frage: In welchem Dateiformat soll die Grafik jetzt am besten für die Darstellung im Web gespeichert werden? Zur Auswahl stehen bekanntlich im Wesentlichen die verbreiteten Formate JPEG, GIF und PNG.
GIF stellt Bitmaps mit bis zu 256 verschiedenen Farben dar. Eine dieser 256 Farben kann als transparent definiert werden. Das GIF sieht die Möglichkeit zur Speicherung automatisch ablaufender Bildfolgen innerhalb einer Bilddatei vor, was animierte Grafiken ermöglicht. Die Daten werden verlustfrei komprimiert, die Kompression ist am effektivsten bei großflächig gleichfarbigen Motiven mit wenig optischem Rauschen.
Das PNG-Format kennt verschiedene Farbtiefen (von 8-Bit = 256 Farben bis zu 24 Bit True Color), bietet zudem 8-Bit = 256 Abstufungen extra für die Speicherung von abgestuften Transparenzen und komprimiert ebenfalls verlustfrei.
JPG beherrscht in der im Web verbreiteten 24Bit True Color Variante über 16,7 Mio. verschiedene Farbwerte und der Bildinhalt wird dabei mit eine Reihe verschiedener verlustbehafteter Verfahren komprimiert, was dazu führt, dass bei starker Kompression die Darstellungsqualität zunehmend sichtbar leidet. Transparenzen werden von diesem Format nicht unterstützt.
Um unter diesen Möglichkeiten die richtige auszuwählen wirft der Web-Gärtner zunächst einen Blick auf den Inhalt der Bild-Datei. Handelt es sich um ein eher schlichtes grafisches Motiv oder gar Text-Element mit größeren einfarbigen Flächen und geraden, kontrastreichen Kanten, wie typischerweise zum Beispiel bei Logo-Grafiken, so ist PNG oder GIF das Mittel der Wahl. Die einfarbigen Flächen können mit diesen Formaten gut komprimiert werden, die Kanten bleiben dabei scharf und kontrastreich. Gerade durch bewusste Reduktion der verwandten Farbpalette können sehr kleine Dateigrößen erreicht werden.
Das JPEG-Format würde bei derartigen Motiven im Rahmen der Kompression sichtbare Verwischungen und Unschärfen gerade an den Kanten erzeugen ohne dabei Vorteile in der Dateigröße zu erreichen.
Anders sieht es aus, sobald es um komplexere, kleinflächigere und buntere Motive wie zum Beispiel Fotos handelt. Hier spielt das JPEG-Format seine Stärken aus und erzeugt ansehnliche Bilddateien bei deutlicher Dateigrößenreduktion. Wie weit man hier mit dem Kompressionsgrad gehen kann, bevor die Qualität sichtbar abnimmt, hängt vom jeweiligen Motiv ab und ist im Zweifel durch Experimentieren zu ermitteln – oder man hält sich einfach an “sichere” moderate Kompressionseinstellungen.
PNG ist zu qualitativ gleichwertiger Darstellung von Fotos in der Lage, kann jedoch bei den erzielten Dateigrößen bei solchen Motiven nicht mithalten. In GIF würde die zwangsweise Reduktion der Farbtiefe auf 256 Farben oft zu sichtbaren Qualitätsverlusten führen.
Beispiel 1: Logo
links PNG-8: 3kb, rechts JPEG: 8 kb. Auch bei recht starker Kompression kann das JPEG-Format hier dateigrößenmäßig nicht mithalten. Trotz größerer Datei sieht es jedoch gegenüber dem PNG
verschwommener und unschärfer aus. 
Die 5-fache Vergrößerung der beiden Grafiken macht es besonders deutlich: Klare Kanten und Farbflächen im PNG gegen Kompressionsmatsch im JPEG
Beispiel 2: Foto
links PNG: 33kb, rechts JPEG: 18 kb. Das PNG-Format zieht beim Foto kompressionsmäßig den Kürzeren. 
Zuviel Farbe – In der Vergrößerung links gut zu sehen: Für die Blautöne im unscharfen Hintergrund war in der 256-Farben-Palette des PNG nicht mehr genug Platz. Die Folge sind Farbflächen wo keine sein sollten und Tonabrisse statt fließender Farbabstufungen.(GIF ergibt in beiden Beispielen ähnliche Ergebnisse wie PNG bei etwas höheren Dateigrößen diesem gegenüber.)
3. Welche Auflösung?
Bei der Skalierung bzw. Neuberechnung einer Bilddatei auf die gewünschte Ausgabegröße kann typischerweise ein DPI-Wert für die Auflösung angegeben werden. Welcher Wert ist da wohl der Richtige für die korrekte Ausgabe auf dem Bildschirm? Die Anwort ist verblüffend einfach: Es ist egal.
Die Angabe DPI (= dots per inch, also Punkte pro Zoll) bezeichnet die Dichte der Bildpunkte der Grafik pro Zoll des Ausgabemediums bei der Ausgabe. Da die Bildpunkte einer Bitmap-Grafik durch Pixel repräsentiert werden, ist die Bezeichnung PPI = pixel per inch im Übrigen treffender. Die Angabe ist vor allem beim Druck von Belang. Eine Grafik mit einer Pixelgröße von 300×300 Pixel hätte beim Druck mit 300 dpi/ppi eine Ausgabegröße von genau 1×1 Zoll, bei 150 dpi/ppi würden nur 150 Pixel auf jedem Ausgabezoll untergebracht, so dass sich die Ausgabegröße 2×2 Zoll ergibt. Da die Datenmenge in beiden Fällen gleich wäre und nur die Druckdichte sich unterschiede, wäre im zweiten Fall das gedruckte Bild zwar größer, die Schärfe der Darstellung jedoch entsprechend reduziert.
Die Ausgabegröße auf dem Bildschirm jedoch ist von jeher von Längeneinheiten wie Zentimeter oder Zoll entkoppelt, hier zählt die absolute Pixelgröße, oder ein relativer Wert wie der Prozentanteil der verfügbaren Fensterbreite. Wie viele Zentimeter die Darstellung letztlich auf dem Bildschirm einnimmt, variiert je nach Ausgabegerät so deutlich, wie zum Beispiel die Bildschirmfläche eines kompakten Mobiltelefons vom 28-Zoll-Display abweicht.
Es ist für die Bildschirmausgabe letztlich unerheblich ob im Feld DPI die verbreiteten 72 DPI stehen, oder 96, oder 100, oder 300. Verwenden Sie Ihre Glückzahl. Oder vielleicht 42.
Zusammenfassend:
Wer seinen Web-Garten mit neuen Bildern verschönern möchte, vergewissert sich zunächst einmal über die maximale geplante Dartellungsgröße der Grafiken und skaliert die Bilddateien auf diese Pixelgröße. Das geeignete Dateiformat für die Ausgabe ergibt sich aus dem Inhalt: GIF oder PNG mit möglichst sparsamer Farbpalette sind oft richtig für Logos, Schriftelemente und ähnliche grafische schlichte Motive. Für Fotos wird sinnvollerweise meist das JPEG-Format verwendet. Der DPI-Wert kann dabei getrost außer Acht gelassen werden.
