Bilddatei-Formate im Vergleich!

Bildformate im Vergleich: Was ist der Unterschied zwischen JPG, PNG und GIF?

Warum ist die Wahl des richtigen Dateiformates 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%).

Dateiformate: Bilddateien und Bildqualität.

Erst bei sehr hoher Kompression, beispielsweise bei einer Qualität von 0% kann es dazu kommen, dass zu viele Bildinformationen verloren gehen. Dadurch entstehen sogenannte Artefakte (siehe vergrößerte Grafik, 0%). Das sind quadratische Treppenabstufungen im Bild, die Bildinformationen zusammenfassen. Ziel sollte es also sein, einen guten Kompromiss zwischen Bildqualität und Dateigröße zu finden. Bei diesem Beispiel kann getrost eine Qualität von 50% gewählt werden, ohne dass der Qualitätsverlust merklich auffällt.

Da wir Anfangs festgestellt haben, wie wichtig es ist, Dateigrößen gering zu halten stellt sich also nun die Frage: Warum überhaupt PNG verwenden?

PNG Format: Transparent und verlustfrei

Eigenschaften

PNG steht für Portable Network Graphics und kann im Gegensatz zu JPG Transparenzen darstellen (vgl. Bild). Ein Objekt ohne Hintergrund kann einfach auf einem anderen farbigen Hintergrund platziert werden, ohne dass um das Objekt eine sichtbare weiße Fläche zu sehen ist. Zudem kann das PNG Format bis zu 16,7 Millionen Farben darstellen.

Transparenz bei Bilddateien.

Das PNG Bildformat ist verlustfrei. Das ist besonders für Text und Grafiken von Bedeutung. Diese werden klar und detailliert dargestellt. Durch die Tatsache, dass Grafiken üblicherweise nur wenige Farben enthalten, können auch bildschirmfüllende Grafiken mit relativ kleinen Dateigrößen abgespeichert werden.

Eine kleine Anmerkung an dieser Stelle – Text sollte wenn möglich immer direkt als HTML-Element auf Webseiten platziert werden, um optimal von Suchmaschinen gelesen und indexiert werden zu können. Logos sind hier aber die Ausnahme.

JPG & PNG: Vergleich

Erklärung

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.

Dateiformate: Der Unterschied zwischen JPG und PNG.

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.

Einen Trumpf hat das GIF jedoch noch im Ärmel: Es wird nach wie vor gerne auf Grund seiner Fähigkeit verwendet, Animationen abzuspielen (siehe Beispiel). Hierbei handelt es sich im Grunde um eine Abfolge von Einzelbildern. Solche animierten GIFs werden in allen Ecken des Internets immer noch sehr gerne verwendet – jedoch sollte man bei professionellen Webseiten in den meisten Fällen darauf verzichten sie einzusetzen.

Animiertes Gif

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.

Wir hoffen, wir konnten Ihnen mit unserem kleinen Exkurs in die Bilddatei-Lehre weiterhelfen.

In unserem Blog beschäftigen wir uns mit der ganzen Welt des Online-Marketings: Wir behandeln Aktuelles und Dauerbrenner, rund um SEO, SEA, Social Media und Webdesign. Sie wollen auf dem Laufenden bleiben? Folgen Sie uns auf Facebook!

Sie wollen mehr erfahren?

Sie sind auf der Suche nach einer Agentur die sich mit Content-Erstellung für das Internet auskennt? Oder sind Sie einfach nur neugierig geworden und möchten gerne mehr zu unseren anderen Leistungen erfahren? Kontaktieren Sie uns unverbindlich!

Kontakt aufnehmen