Tipps zum Bilder-SEO: JPG, PNG und GIF

Als abschließenden Artikel über Bildoptimierung für Websites möchte ich heute noch einmal kurz auf das Thema Dateiformate eingehen, denn immer wieder sehe ich an sich gut gemacht Seiten, die aber aufgrund der falschen Grafikformate völlig unnötig ausgebremst werden. Jetzt könnte man denken: „Komm schon, JPG kennt doch jeder.“ Richtig, aber was ist mit PNGs, GIFs, SVGs, TIFFs, BMPs und was mit Farbtiefe, DPI, Vektor und Pixel? Nicht alles ist für den Web-Gebrauch sinnvoll und nicht jedes Dateiformat für jeden Grafikinhalt geeignet. Auch wenn viele vielleicht schon ein gutes Basiswissen über dieses Thema besitzen, lohnt es sich auf jeden Fall, einen näheren Blick darauf zu werfen. Zwar haben Grafikformate nicht direkt was mit SEO und der Xovilichter Challenge zu tun, aber wenn man an Ladezeiten und Performance denkt, dann auf irgendwie auch wieder schon.

Welche Grafikdatei-Formate sind sinnvoll fürs Web?

Um es auf den Punkt zu bringen: JPG, PNG, GIF und manchmal auch SVG. Meiner Ansicht nach kommt man mit diesen Formate ausreichend hin, um jede Art von Grafik für seine Website zu speichern und zu veröffentlichen. Gehen wir also kurz auf die verschiedenen Formate ein.

Das JPG Format

Dies ist wohl der bekannteste Vertreter der Grafikformate. Ausgeschrieben heißt es „Joint Photographic Experts Group“. Aufgrund seines großen Farbumfangs (16,7 Millionen Farben) und seiner guten Komprimierfähigkeit ist das JPG das wohl beliebteste Format im Web. Gerade und besonders für Fotos mit einem großen Farbumfang ist das JPG am besten geeignet. Speziell dann, wenn Farben ineinander laufen und „weich“ aussehen sollen, dann ist dieses Format ideal. Wie man ein JPG-Bild am besten komprimieren kann, habe ich in einem anderen Artikel bereits geschrieben. Allerdings kann gerade bei Grafiken mit weniger Farben ein anderes Format zwecks Speicherreduzierung sinnvoller sein.

PNG Format

Oft unterschätzt aber dennoch ein super Format, wenn es im Bilder mit klaren, wenigen Farben geht. PNG heißt ausgeschrieben „Portable Network Graphics“ und kann entweder als PNG-8 mit 256 Farben oder als PNG-24 mit 16,7 Millionenfarben gespeichert werden. Beide Varianten lassen sich auch mit transparentem Hintergrund verwenden – also ein klarer Vorteil gegenüber dem JPG. Allerdings sollten gerade Fotos nicht unbedingt als PNG-24 gespeichert werden, auch wenn hier ein gleicher Farbumfang zur Verfügung steht. Denn anders als ein JPG kann die Datei nicht komprimiert werden, was den Speicherbedarf drastisch erhöht. Wenn es aber darum geht, komplexe Grafiken oder vielleicht freigestellte Bilder auf transparentem Hintergrund zu speichern, dann ist das PNG-24 „best choice“. Das PNG-8 eignet sich aufgrund des reduzierten Farbumfangs eher für Infografiken und Schemata und ist dem GIF sehr ähnlich.

GIF Format

Fangen wir gleich mit der Begriffsdefinition an. GIF heißt ausgeschrieben „Graphics Interchange Format“ und ist neben dem JPG eines der ältesten Vertreter, wenn es darum geht, Bilder für die Website zu speichern. Genau wie das PNG-8 hat das GIF nur 256 Farben zur Verfügung und kann ebenfalls Transparenzen enthalten. Und genauso wie beim verwandten PNG lässt sich dieses Format vom Farbumfang weiter einschränken: 4, 8, 16, 32, 64, 128 und 256 Farben stehen zur Auswahl, was in einigen Fällen einige Kilobytes einsparen kann. Man sollte an dieser Stelle mit den Einstellungen ein wenig spielen und testen, wie viele Farben wirklich nötig sind, ohne eine sichtbaren Qualitätsverlust zu produzieren. Im Vergleich zum PNG hat das GIF einen entscheidenden Vorteil: es lassen sich mehrere Bilder auf einmal und damit auch kleine Animationen speichern. Umso länger die Animation, desto größer aber auch wieder die Speichergröße. Für Fotos oder komplexen Grafiken ist ein GIF allerdings gänzlich ungeeignet und gerade bei Verläufen sieht das Ganze wirklich unschön aus.

SVG Format

Gerade für Logos mit einem begrenzten Farbumfang, ist das SVG Format sehr geeignet, denn anders als alle bisher genannten Bildformate, ist ein SVG eine Vektordatei und damit skalierbar. Ausgeschrieben heißt es „Scalable Vector Graphics“ und bedarf spezieller Grafiksoftware, um ein solches Format zu bearbeiten und zu speichern. Mein Xovilichter-Logo habe ich mit Adobe Illustrator erstellt, dass explizit auf Vektorgrafiken ausgelegt ist und damit auch das Logo als SVG gespeichert. Immer dann, wenn man sich nicht auf eine bestimmte Pixelgröße festlegen will, sind Vektorformate die richtige Wahl. Gerade Wikipedia verwendet das SVG bei Logo-Datei sehr häufig, weil es anders als ein EPS (Encapsulated PostScript) oder AI (Adobe Illustrator) direkt im Browser angezeigt werden kann und kein spezielles Grafikprogramm benötigt.

Auflösung von Bildern

Bei Vektordateien, spielt die Pixelauflösung keine Rolle – bei JPG, PNG und GIF aber schon. Denn mit der größerer Auflösung steigt auch der Speicherbedarf und andersherum. Man unterscheidet grundsätzlich die absolute und relative Auflösung. Die relative Auflösung beschreibt die Anzahl der Pixel, die auf einer festgelegten Fläche zum Einsatz kommen. Hier ist dann oft die Rede von PPI (Pixel per Inch) oder DPI (Dots per Inch). Unabhängig davon wie hoch und breit ein Bild ist, so bleibt diese Kennzahl innerhalb einer Grafik immer gleich. Für den Printbereich wird in der Regel ein Bild mit 300 dpi und für den Webbereich mit 72 oder 96 dpi gespeichert. Denn ein guter Drucker kann ein Bild sehr viel feiner auflösen, als ein herkömmlicher Monitor. Dann gibt es da noch die absolute Auflösung, also Länge mal Breite. Für Bilder die fürs Web gespeichert werden, reicht meist eine Auflösung von 1920 x 1080 Pixel (also Full HD) aus. Wichtig dabei ist, dass man immer darüber nachdenkt, wie das Ausgabegerät des Nutzers aussieht. Ist im Desktop-Bereich fast immer ein 4:3 oder 16:9 Verhältnis der Displays im Einsatz, so sieht das im mobilen Sektor, also bei Smartphones, ganz anders aus.

Fazit zu den Bildformaten

Man kann zu diesem Thema noch sehr viel mehr schreiben und erklären. Dieser Artikel dient eher als Übersicht und Einstieg, um einmal die verschiedenen Web-Formate voneinander abzugrenzen. Wer dazu noch gezielte Fragen hat, der kann mich gern anschreiben. Ich kann an dieser Stelle nur jedem empfehlen, sich Gedanken über die Speichergröße seiner Bilder zu machen. Denn über die Zeit sammeln sich oftmals sehr viele Grafiken, Bilder und Fotos auf einer Website und mit der richtigen Einstellung und dem idealen Format lassen sich schnell einige Megabyte sparen und damit die Performance einer Seite enorm steigern und genau das ist im SEO Bereich und damit auch für die Xovilichter Challenge enorm wichtig.

Summary
Xovilichter Tipps zum Bilder-SEO: JPG, PNG und GIF
Title
Xovilichter Tipps zum Bilder-SEO: JPG, PNG und GIF
Description

Mit der richtigen Verwendung von Bildformaten lassen sich oftmals einige Megabyte einsparen und somit die Performance einer Website enorm speichern. Gerade bei einem SEO Contest wie der Xovilichter Challenge 2014 ist die Ladezeit einer Seite enorm wichtig. Daher hier einige Tipps zu JPG, PNG und GIF.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.