info@aca-gmbh.de

+49 7121 50 93 82

Für Bilddateien in Internetseiten stehen uns folgende Formate zur Verfügung:

GIF

Das GIF (Graphics Interchange Format) ist ein Grafikformat mit guter VERLUSTFREIER Komprimierung für Bilder mit GERINGER Farbtiefe bis zu 256 verschiedenen Farben pro Einzelbild. Darüber hinaus können mehrere Einzelbilder in einer Datei abgespeichert werden, die von Webbrowsern als Animationen interpretiert werden. GIF unterstützt außerdem Transparenz.

Daher eignet sich das Gif-Bild insbesondere für animierte Buttons, kleinere Animationen, Banner o.ä. - nicht jedoch für komplexe Bilder und Fotos mit vielen Farben.

Das GIF-Format ist aber eigentlich veraltet und sollte, wenn nicht für eine Animation benötigt, nicht mehr genutzt werden. Stattdessen sollte man PNG nutzen.


JPG

Mit dem JPEG Format können Bitmap-Grafiken mit verschiedenen Komprimierungsmethoden, darunter VERLUSTBEHAFTETE und verlustfreie Komprimierung, in verschiedenen Farbtiefen gespeichert werden. Am meisten verbreitet ist die VERLUSTBEHAFTETE Komprimierung für Bilder im Internet (JPG). Dabei gilt, je höher die Komprimierung, desto kleiner die Datei, aber auch desto mehr Verlust entsteht durch die Komprimierung. Tatsächlich werden Bildinformationen unwideruflich gelöscht und können nach Speicherung nicht wieder hergestellt werden. Daher sollte man bei Speicherung von Bildern im JPG - Format immer das Original aufrechterhalten.

Und Speicherung als JPG ist nicht immer gleich der Speicherung als JPG:

Kleines Experiment: Erstelle mit Photoshop eine neue Bilddatei, 500x500px, 72dpi, fülle komplett grau und speichere mit "Datei->speichern unter->Format JPEG", Bild-Option "Maximale Komprimierung". Die gespeicherte Datei hat auf der Festplatte die Größe 29 KB.

Speichere die selbe Datei mit "Für Web speichern->JPEG" Qualität "Maximum" - wie durch ein Wunder hat die Datei nun nur noch 4 KB. Sind über eine Webseite 20 oder 30 solcher JPGs verteilt, erhöht sich das Ladevolumen leicht um 200 bis 300 KB, was im Internet natürlich auch heute noch eine Menge ausmacht.

Dies liegt daran, dass Photoshop nun alle Möglichen zusätzlichen Informationen, die im JPG-Bild mitgespeichert werden können, verwirft, und nur noch die für die Darstellung im Internet benötigten beibehält.

Das Format JPG wird hauptsächlich bei großen Fotos genutzt, da es hier seine Stärken bei der (auf Verlusten basierten) Komprimierung voll ausspielen kann. Ein Echtfarben-Foto mit ca. 500x500px, 72dpi wird bei mittlerer Komprimierung als JPG ungefähr in der Größe 30-50KB gespeichert, je nachdem wie detailliert die Informationen auf dem Foto sind. Das gleiche Foto als PNG (verlustfreie Komprimierung) hat gut 300 KB, also ungefähr 10x so groß.


PNG

Das Portable Network Graphics Format (PNG) ist ein Grafikformat für Rastergrafiken mit verlustfreier Bildkompression. Es wurde als freier Ersatz für das ältere, bis zum Jahr 2004 mit Patentforderungen belastete Format GIF entworfen. PNG unterstützt neben unterschiedlichen Farbtiefen auch Transparenz per Alphakanal.

Bilder können im PNG sowohl als PNG-8 mit bis zu 256 Farben, oder als PNG-24 für Echtfarbendarstellung gespeichert werden.

Durch die verlustfreie Komprimierung eignet sich PNG inbesondere für Zeichnungen, Buttons und Bilder mit größeren Flächen, die durch Komprimierung nicht verfälscht werden dürfen, wie dies z.B. bei JPG durch die durch die Komprimierung entstehenden Artefakte und Verpixelungen geschieht.

Insbesondere bei kleinen Bildern und Buttons ist das Format dabei deutlich geringer als JPG! So hat unser graues Beispiel-Bild als PNG-8 mit 256 Farben gespeichert gar nur noch eine Dateigröße von 395 Bytes!! Eine weitere Reduzierung der Farben beim Speichern, z.B. auf PNG-8 mit 2 Farben bringt hier übrigens keine weiteren Einsparungen, da eh nur die Farbinformationen gespeichert werden, die im Bild enthalten sind. Hätte das Bild wiederum mehr Farben als 256, so würde die Farbinformation des Bildes auf die geeignete Farbpalette reduziert, würde man dann nicht auf PNG-24 ausweichen.

Einfaches Fazit mit Richtlinie:

  • JPG verwendet man für Fotos, und speichert immer "für Web optimiert"
  • GIF hat nur noch für Animationen Berechtigung
  • PNG ist die bevorzugte Wahl für alle möglichen Seitenelemente wie Navigationsbuttons, Trennlinien und Schaltflächen, bei denen es auf verlustfreie Komprimierung ankommt.

ACA GmbH
Stefan Neumann