In welchem Format sind Bilder fürs Web abzuspeichern? Dass Bilder für eine Website zentral sind, ist bekannt: Sie lockern Texte auf, helfen beim Verständnis des Inhaltes und sind auch für die Steigerung der Sichtbarkeit förderlich – Stichwort Bilder SEO.
Doch Bilder wirken sich negativ auf die Ladezeiten einer Website aus. Das richtige Bildformat ist entscheidend, dass Bilder schnell geladen und dennoch scharf dargestellt werden können. In diesem Beitrag lernen Sie die Vor- und Nachteile der drei klassischen Bildformate JPEG, PNG und GIF kennen. Dabei erfahren Sie, für welche Bilder sich welches Format am besten eignet.
Die Klassiker: JPEG, PNG, GIF bzw. aGIF
Bei den Klassikern JPEG, PNG und GIF handelt es sich um Pixelformate. Das heisst ein Bild besteht aus einer Vielzahl von Punkten, woraus sich ein Bild ergibt. Dadurch sind die Anzahl gespeicherten Punkte ausschlaggebend für die Grösse und die Qualität des Bildes.
JPEG – entwickelt für das Speichern von Fotos
Das JPEG-Format ist das meist verwendete Bildformat im Web, da es mit allen Systemen kompatibel und relativ einfach zu bearbeiten ist. Zudem bietet es das volle Farbspektrum an und trotzdem können JPEG-Dateien schnell geladen werden. Eine geniale Kombination! Doch einen Nachteil haben JPEGs: sie bieten keine verlustfreie Kompression. Sprich die Reduktion der Dateigrösse geht immer mit einem Verluste in der Bildqualität einher.
Eigenschaften von JPEGs im Überblick:
- Gut geeignet für fotorealistische Bilder mit vielen Farben
- Komprimiert mit Qualitätsverlust, mehr oder weniger sichtbare Artefakte
- Keine Transparenz möglich
PNG – ideal für detaillierte Grafiken und Logos
PNGs sind im Web ebenfalls weit verbreitet. Wie die JPEG-Dateien decken sie das volle Farbspektrum ab. Anders als JPEGs bieten PNGs eine verlustfreie Kompression an. Der Preis dafür sind grössere Dateien und damit verbunden längere Ladezeiten. Aus diesem Grund sollten ausschliesslich Illustrationen, Grafiken oder Logos als PNG gespeichert werden, aber niemals Fotos. Wenn Grafiken und Co. als PNGs gespeichert werden sind in der Regel kleinere Dateien möglich als wenn diese als JPEG gespeichert würden. Ein weiterer grosser Vorteil von PNGs liegt in der Möglichkeit Transparenzen zu realisieren.
Eigenschaften von PNGs im Überblick:
- Gut geeignet für Illustrationen, Grafiken und Logos
- Komprimierung ohne Qualitätverlust
- Transparenzen möglich
GIF bzw. aGIF
Bevor es PNG gab, war GIF das Format der Wahl für Grafiken und Logos. Da aber nur 256 Farben damit abgebildet werden können, ist PNG heute ganz klar die bessere Wahl. Doch aGIF (animierte GIFs) haben als Bewegtbilder ein wahres Comeback erfahren. Denn im GIF-Format ist es möglich, mehrere Bilder hintereinander abzuspielen und auf diese Weise kurze Animationen in einer Endlosschleife zu erstellen.
Für die Erstellung von GIFs gibt es diverse Tools. Ein Tool, welches sich als äusserst wertvoll erwiesen hat, ist der GIF Maker von Canva. Der GIF Maker von Canva kann erstellte Designs in hochwertige animierte GIFs verwandeln und somit die Kreativität der Designs steigern. Erfahre hier mehr darüber.
Eigenschaften von GIFs im Überblick:
- Beschränkung auf 256 Farben
- Transparenzen möglich
- Comeback dank Bewegtbildern: animierte GIFs
GIF Maker von Canva
Für die Erstellung von GIFs gibt es diverse Tools. Ein Tool, welches sich als äusserst wertvoll erwiesen hat, ist der GIF Maker von Canva. Der GIF Maker von Canva kann erstellte Designs in hochwertige animierte GIFs verwandeln und somit die Kreativität der Designs steigern.
Fazit: Bildformate im Web – JPEG, PNG und GIF im Vergleich
Für Fotos beziehungsweise fotorealistische Bilder auf einer Website ist JPEG derzeit das beste Format: Die Ladezeit lässt sich durch eine entsprechende Komprimierung optimieren und das Format ist mit allen Browsern kompatibel.
Illustrationen, Grafiken und Logos werden idealerweise als PNG abgespeichert. Denn PNGs bieten eine verlustfreie Komprimierung, was eine gute Qualität (Schärfe) sicherstellt.
Statische GIFs werden heute kaum noch verwendet. Animierte GIFs bieten eine gute Möglichkeit um einfach, kurze Animationen zu erstellen.
Das waren die klassischen Bildformate, die im Web zu Anwendung kommen. Da das Thema Ladezeiten immer wichtiger wird, gibt es verschiedene Versuche mit neuen Bildformaten. Mehr dazu folgt bald.
Neben dem richtigen Format der Bilder ist auch die richtige Proportionierung für schnelle Ladezeiten relevant. Wie sich Bilder mit dem kostenlosen Online Tool «Canva» zuschneiden lassen, erfahren Sie im Beitrag: Canva – Bilder zuschneiden leicht gemacht.