JPG, PNG, GIF – Vergleich der Bildformate im Web

Warum ist die Wahl des richtigen Dateiformats wichtig für SEO?

Zur Bildbearbeitung stehen verschiedenste Dateiformate zur Auswahl. Da für die Suchmaschinenoptimierung (SEO) die Ladezeiten einer Webseite von großer Bedeutung sind, ist die Wahl des richtigen Grafikformates und einer geeigneten Dateikompression wichtig. Denn wenn die Dateigrößen (in KB) Ihrer Bilder zu groß sind, dann sind auch die Ladezeiten Ihrer Webseite unter Umständen zu lang, was sich negativ auf das Ranking in Suchmaschinen wie Google und Co. auswirkt. Auch für die Bildsuche sind Dateiformat, Bildgröße und Dateigröße wichtige Faktoren, denn danach werden die Suchergebnisse sortiert und gerankt.

Wann nutze ich welches Bildformat?

Unser Fokus liegt auf den drei wichtigsten Dateiformaten, die für das Internet verwendet werden. Zunächst die Faustregeln für den schnellen Überblick:

• JPG für Fotos mit vielen Details und Farben (auch Farbverläufe z.B. im Himmel)
• PNG für Grafiken und Bilder mit wenigen Farben
• GIF für kleine Animationen mit wenigen Farben

JPG Format: Verlustbehaftet

Eigenschaften

JPG ist die Abkürzung für Joint Photographic Experts Group. Dieses Format kann bis zu 16,7 Mio. Farben darstellen und eignet sich daher gut für detaillierte Fotos. Es besteht auch die Möglichkeit der Verringerung des Speicherplatzes durch Dateikompression. Das ist für Bilder im Web oft notwendig, um Ladezeiten zu verringern.

Ein entscheidender Nachteil ist jedoch, dass bei der Kompression Bildinformationen verloren gehen. Je stärker komprimiert wird, desto weniger Bildinformationen enthält später das Bild. Ist es dann so sinnvoll, dieses verlustbehaftete Dateiformat zu wählen? Ja. Wir zeigen Ihnen die Qualitätsunterschiede anhand eines Beispiels und erklären, wie Sie trotzdem mit der Kompression arbeiten können, um Ladezeiten gering zu halten.

Kompression

Die Qualität von JPG Bildern lässt sich prozentual reduzieren – so kann zum Beispiel ein digitales Foto, das im Originalzustand mehrere Megabyte Speicherplatz benötigt, durch die Kompression im JPG-Format mit dem Qualitätsfaktor 80 auf wenige hundert Kilobyte reduziert werden. Der dabei entstehende Qualitätsverlust fällt kaum auf (siehe Grafik, 80%).

JPG & PNG: Vergleich

Eigenschaften

Setzt man die Formate JPG und PNG in den Vergleich, so kann das PNG mit einer verlustfreien Kompression punkten. Im Gegensatz dazu ist das JPG bei der Dateikomprimierung verlustbehaftet. Auch die Transparenz ist beim PNG-Format ein Vorteil gegenüber dem JPG, da es sich auf Webseiten mit farbigem Hintergrund harmonischer einfügt und keinen weißen Bildhintergrund zeigt. Allerdings unterscheiden sich auch die Einsatzgebiete der Bildformate. Das PNG Format eignet sich ideal, wenn die Datei trennscharfe Elemente wie Texte, Logos, Grafiken, Diagramme oder Illustrationen enthält, wohingegen das JPG Format besser für Fotografien geeignet ist.

GIF Format: Animationen

Eigenschaften

Die wichtigsten Einsatzbereiche digitaler Bilder sind ja bereits von JPG und PNG abgedeckt. Was hat es also mit dem GIF Dateiformat auf sich? Das GIF, oder auch Graphics Interchange Format, ist ein relativ altes Format, das vor der Einführung von PNG vor allem im grafischen Bereich Einsatz fand – denn es ist ebenfalls in der Lage, Transparenz darzustellen. Das Problem ist allerdings, dass es maximal 256 Farben beinhalten kann. Bei detaillierteren Bildern sieht es deshalb selbst auf seiner höchsten Qualitätsstufe „pixelig“ oder körnig aus. In diesem Bereich wurde es daher von PNG abgelöst, da dieses bis zu 16,7 Mio. verschiedene Farben unterstützt.

Fazit zum Thema Bildformate

Im Grunde genommen ist es also recht einfach – bei Grafiken und Texten, die klar und detailliert dargestellt werden sollen, oder bei denen Transparenz wichtig ist, PNG verwenden. Bei Fotos gerne beherzt zu JPG greifen und eine Qualitätsstufe auswählen, die eine guten Kompromiss zwischen Bilddetail und Dateigröße darstellen.

Ein Tipp zum Schluss: Um Transparenz mit JPG zu simulieren kann ein freigestelltes Element einfach auf einem Hintergrund platziert werden, der die gleiche Farbe aufweist wie die Webseite, auf der es platziert werden soll.