Häufig im Web verwendete Grafikformate

Bilder und Grafiken im Internet – Das richtige Format für deinen Blog

Als Blogger oder Websitebetreiber bist Du bestrebt deinen Lesern möglichst guten und abwechslungsreichen Content zu bieten. Zum Inhalt eines Blogs gehören nicht nur interessante Texte, sondern auch Bilder und Grafiken, die eben jene Texte abrunden. Bilder bieten deinen Lesern Mehrwert und können als angenehmer Nebeneffekt Besucher oft länger auf deinem Blog halten.

Bevor Du aber fleißig deinen Blog mit reichlich Fotos, Bildern und Grafiken bestückst, solltest Du einige Grundlagen wissen. Denn für deine Bilder und Grafiken im Internet solltest Du die richtigen Bildformate wählen.

Bilder und Grafiken – Auf die Größe kommt es an

Für Bilder, die auf deinem Blog oder Website gezeigt werden sollen, ist erst einmal nur eines wichtig: eine möglichst geringe Datengröße. Bei zu großen Bildern, bzw. Bilddaten kann es auch im DSL-Zeitalter zu unnötiger Wartezeit kommen und Geduld ist nicht unbedingt eine Tugend von Bloglesern.

Stellt sich also die Frage, welche Formate sind am Besten für das Web geeignet und gibt es das ultimative Bildformat fürs Internet?

Es kommt immer auf das Bild an und wozu die Grafik dienen soll. Die gängigen Formate im Web sind GIF, JPEG und PNG.

Das GIF als Bildformat im Internet

GIF ist die Abkürzung für Graphics Interchange Format. Es sind mehrere Bilder in einer einzigen Datei möglich, sodass Du das GIF für Animationen nutzen kannst.

Es kennt sicherlich jeder animierte GIFs, und manch einer erinnert sich an die Zeit, als animierte GIFs so beliebt waren, dass die Verbreitung der blinkenden und hüpfenden Bildchen epidemische Ausmaße annahm.

Das GIF kann 256 Farben speichern, wovon eine Farbe als Transparenz definiert werden kann. Es ist keine Teiltransparenz möglich, das bedeutet, ein Pixel kann nur vollkommen transparent sein oder gar nicht.

Das GIF hat eine verlustfreie Komprimierung und ist in seiner Qualität nur durch die geringe Farbtiefe von 256 Farben begrenzt. Deshalb ist es eher ungeeignet für farbenfrohe Fotografien oder Bilder mit Verläufen.

Bildformat GIF

Wenn Du das Bild oben genauer betrachtest, siehst Du im Verlauf des Himmels besonders deutlich die Einschränkung des GIFs.

Für Grafiken mit wenig Farben, für schwarz-weiß oder graustufen-Bilder und Schrift ist das GIF-Format ideal.

Das JPEG als Bildformat im Internet

Bilder im JPEG-Format werden komprimiert und haben deshalb eine geringere Dateigröße. Das JPG unterstützt eine Farbtiefe von 16,7 Millionen Farben, kann aber andererseits keine Transparenzen darstellen.

JPEG-Bilder können zwar sehr farbreich sein, jedoch bewirkt die Komprimierung je nach Bild einen mehr oder weniger auffälligen Qualitätsverlust. Bei der Dekomprimierung des JPEG-Bildes werden die fehlenden Bildinformationen durch Artefakte aufgefüllt.

Bei natürlichen Motiven, also Fotografien, werden diese Artefakte kaum wahrgenommen. Deshalb ist das JPEG-Format gerade für solche Bilder sehr gut geeignet. Auch weil die Datei durch den Farbreichtum der Fotografie oft sehr groß ist und durch die Komprimierung ein annehmbarer Kompromiss zwischen Qualität und Größe gefunden werden kann.

Du solltest aber Arbeitsdateien aufgrund der Verluste, hervorgerufen durch die Komprimierung, auf keinen Fall als JPEG zwischenspeichern. Bei jeder erneut Speicherung als JPEG wird die Qualität des Bildes schlechter. Erst das fürs Web bestimmte, fertige Bild solltest Du ganz zum Schluss als JPEG speichern und hochladen.

Für Bilder und Grafiken mit scharfen Konturen und Kanten solltest Du das JPEG-Format eher nicht wählen, hierfür wären wieder das GIF oder das PNG angebracht.

Bildformat JPEG

Das Bild oben habe ich zum Zwecke der Demonstration mit sehr hoher Komprimierung als JPEG abgespeichert, so kannst Du deutlich die Artefaktbildung erkennen. Bei normaler Komprimierung ist dies natürlich weniger auffällig.

Das PNG als Bildformat im Internet

PNG ist die Abkürzung für Portable Network Graphics. Das PNG wurde als Nachfolger des GIFs konzipiert.

Im Gegensatz zum GIF, welches nur 8 Bit unterstützt, kann das PNG unterschiedliche Farbtiefen verarbeiten. In der großen Version mit der Bezeichnung PNG 24 beherrscht es mit seiner 24 Bit Farbtiefe Millionen von Farben.

Außerdem unterstützt das PNG-Format Alphakanal-Transparenz, das bedeutet nicht nur eine Transparenzstufe, wie das GIF, sondern ganze 256 Tranzparenzstufen. Kanten können auf diese Weise unabhängig vom Hintergrund geglättet werden und es sind echte Schlagschatten möglich.

Transparenz bei PNG und GIF

Im Bild oben kannst Du gut die Unterschiede in der Transparenz zwischen dem PNG links und dem GIF rechts sehen.

Bildformat PNG

Das PNG besitzt auch eine bessere Kompression als das GIF, somit hat es eine kleinere Dateigröße. Einziger Nachteil gegenüber dem GIF ist, dass mit PNG keine Animationen möglich sind.

Wie das JPEG eignet sich das PNG gut für Fotografien und farbintensive Bilder.

Da es keine Qualitätsverluste durch Komprimierung erleidet, ist das PNG-Format auch für Grafiken mit scharfen Konturen ein gutes Format.

Fazit zu Bilder und Grafiken im Internet

Bei großen Bildern mit vielen Farben ist meist das JPEG besser geeignet als das PNG, weil die Datei meist kleiner ist, GIF käme dafür sowieso nicht in Frage.

Wenn sich die Anzahl der Farben in Grenzen hält oder die Bildmaße sich im üblichen Bereich befinden, könnte das PNG die kleinere Datei sein und somit die bessere Wahl.

Bei wenigen Farben, unter 256 Farbabstufungen, liegt wieder das GIF oder die 8 Bit Version des PNG vorn. Ich teste oft, wie dasselbe Bild in verschiedenen Formaten aussieht, bzw. wie groß die Dateien sind und entscheide mich dann erst.

Geht es darum, Transparenzen in deiner Grafik zu haben, fällt das JPEG ohnehin raus. In dem Fall bevorzuge ich aufgrund der Kantenglättung in der Regel das PNG.

Ob Du deine Bilder und Grafiken für deinen Blog also lieber als GIF, JPEG oder PNG ins Netz stellst, solltest Du also am Besten von Fall zu Fall entscheiden.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

Comments are closed.