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.

Eigenschaften von GIFs im Überblick:

  • Beschränkung auf 256 Farben
  • Transparenzen möglich
  • Comeback dank Bewegtbildern: animierte GIFs

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

Damit Sie wie diese Katze immer wissen welches Format zu wählen ist, folgt zum Abschluss eine Kurzzusammenfassung. Falls das GIF oben nicht angezeigt wird, so liegt das an Ihren Datenschutzeinstellungen. Diese können links unten unter «Cookies» geändert werden. 

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. 

Erwischt!

Hohoho, da gehört wohl jemand zum WeMo Type "Die Offenen" mit dem Kernmotiv "Neugier". Hohoho....

Oder vielleicht doch nicht "Die Offenen"? Wie wäre es, wenn Du zum Zeitvertreib bis das gewünschte Türchen geöffnet werden kann, das Zielgruppen Quiz machst?

Newsletter - Email Marketing

Tipps, Tricks & Tools

Wissenswertes zu WordPress Webdesign, Website Optimierung, SEO und Google Analytics wöchentlich per Email erhalten.

Bitte prüfe Deinen Posteingang und bestätige Deine Anmeldung.