Stell dir das Internet mal ohne Bilder vor – ziemlich langweilig, oder? Erst Fotos und Grafiken animieren die User:innen dazu, sich wirklich mit den Inhalten deines Webauftritts auseinanderzusetzen. Die richtige Wahl aus den mittlerweile unzähligen digitalen Bildformaten zu treffen ist nicht nur aus ästhetischen Gründen essentiell, sondern kann deiner Website auch aus technischer Sicht eine professionelle Note verleihen. Aber welche Bildformate gibt es und wie werden sie richtig eingesetzt?
Im Wesentlichen unterscheiden wir bei „Bilddateien“ unter Fotos, Icons und Mini-Animationen. Jedes dieser Elemente hat ein Bildformat, das – je nach Verwendungszweck – quasi perfekt zu ihm passt.
JPG und PNG
Die wohl prominentesten Bildformate für Fotos sind jpeg und png. Beide werden als Raster- bzw. Pixelformate bezeichnet und eignen sich hervorragend für die Darstellung auf Websites. Das JPEG kann zwar leider nicht verlustfrei komprimiert werden, bietet aber eine gute Kombination aus Bildqualität und Dateigröße und ist die richtige Wahl für klassische Fotos. Das PNG-Format wird aufgrund seiner Transparenz gerne als Unterstützung für grafische Elemente wie Icons oder Illustrationen verwendet. Aber auch für freigestellte Bilder mit weniger Farben ist das Format gut geeignet. Da bei PNGs ein verlustfreies Komprimieren möglich ist, lohnt es sich meistens zu versuchen, die Bildgröße noch weiter zu reduzieren. Meistens gibt es noch etwas Spielraum nach unten.
GIF Animationen
Das sogenannte GIF wird zum Großteil für Animationen benutzt, da sie sich unter anderem als Endlosschleife generieren lassen. Je nachdem, wie lange deine Animation dauert und wie viele Farben sie enthält, ist der Speicherverbrauch allerdings vergleichsweise hoch. Die Speicherkapazität für andere Formate, die Bewegtbilder unterstützen, wie z.B. MP4 oder WEBM ist um einiges niedriger. Deshalb werden diese Dateien bevorzugt zur Einbindung auf Websites verwendet. Durch die Möglichkeit, die Anzahl der angezeigten Farben zu bestimmen, ist das GIF allerdings bei kleinen Grafiken mit sehr wenig Farben, im Bezug auf den benötigten Speicherplatz, ungeschlagen auf dem ersten Platz.
WEBP
Das Bildformat WEBP wurde 2010 von einem Unternehmen names ON2 Technologies entwickelt, das Google noch im selben Jahr aufgekauft hat. Nicht zuletzt deshalb wird die Einbindung dieses Dateityps auf Websites von Google empfohlen und mit einem guten Ranking in den Suchergebnissen belohnt. Neben einem Modus zur verlustfreien Komprimierung wurde das Format auch um Features wie Transparenz und Animationen erweitert. Chrome und Opera unterstützen WEBP bereits seit 2010, andere Webbrowser wie z.B. Safari und Firefox sind bis heute nicht wirklich auf das Format optimiert.
SVG Vektordateien
SVGs haben eine weitaus geringere Dateigröße als Pixelgrafiken und können ohne Qualitätsverlust skaliert werden und daher aus dem responsive Webdesign nicht mehr wegzudenken. Sie sind perfekt geeignet, um Vektorgrafiken wie Icons, geometrische Formen und sogar Logos auf deiner Webseite einzubinden und auf verschiedenen Endgeräten in der richtigen Größe anzuzeigen. Im Zuge der Webentwicklung können SVGs auch direkt als Code eingebaut werden wodurch die Dateigröße noch einmal signifikant verringert wird.
Das richtige Bildformat für besseren Page Speed
Der „Page Speed“, also die Ladezeit einer Website, ist ein großer Stichpunkt, wenn es um das Thema Grafik- und Bildformate geht. Die Größe deiner Dateien bestimmt hier nicht nur, wie lange es dauert, bis ein Bild geladen wird, sondern trägt auch dazu bei, wie gut deine Seite auf Google gerankt wird. Die weltbekannte Suchmaschine ist kein Fan von langen Ladezeiten und bestraft Websites mit langsamen Page Speed konsequent mit schlechterer Sichtbarkeit in den Suchergebnissen.
Voraussetzung dafür, die Ladegeschwindigkeit zu verbessern, sind Grafiken und Bilder im passenden Format und optimierter Dateigröße. Dabei ist eben nicht nur die Auflösung und Anzahl der ppi (Pixel per Inch) ausschlaggebend, sondern auch das Format, in dem das Bild abgespeichert und hochgeladen wurde.
Fazit
Für ein ordentliches und ansprechendes Webdesign gilt es, viele unterschiedliche Dinge zu beachten, die am Ende ineinandergreifen müssen – zu viele, um sie in einem Magazin-Beitrag angemessen zusammenzufassen. Steht bei dir in nächster Zeit ein Webprojekt an? Dann melde dich bei uns und wir starten gemeinsam durch!