Welche Bildformate gibt es und wo werden sie eingesetzt?
Du weißt nicht, welche Bildformate am besten zu deiner Website passen? Bevor wir dir die gängigsten Formate von Bildern vorstellen, solltest du dir zunächst folgende Fragen durch den Kopf gehen lassen, um das passende Format zu finden:
- Welche Art von Bild liegt vor?
- Handelt es sich um ein Foto, eine illustrierte Grafik, oder soll ein Teil des Bildes transparent dargestellt werden?
- Wo soll das Bild erscheinen oder auf welche Weise soll es veröffentlicht werden?
- Gibt es eine Begrenzung der Dateigröße oder Qualität?
Die klassischen Bildformate
Zu den klassischen Bildformaten zählen das PNG, JPG, SVG und das GIF Format, wobei diese zu den Pixelformaten zählen.
Unter Pixel versteht man einzelne Bildpunkte, aus welchen sich ein Bild oder eine Grafik zusammensetzt. Je größer die Anzahl der Pixel in einem Bild, desto höher auch die Auflösung und Dateigröße.
1. PNG Format
- Das PNG Format sollte man verwenden wenn die Dateigröße eine untergeordnete Rolle spielt und es darum geht eine Grafik so verlustfrei wie möglich darzustellen.
- Das PNG Format unterstützt Transparenz z.B. bei Logos und Icons
- Aufgrund der Wichtigkeit der Ladezeit sollte im Webdesign auf PNG Grafiken (zumindest bei Fotos) verzichtet werden.
- Für Grafiken wie Icons ist hingegen das PNG Format optimal
Vorteile
- verlustfreie Kompression
- volles Farbspektrum
- Transparenz
Nachteile
- eignet sich nicht für den Druck
- erhöhter Speicherbedarf
- keine Animationen möglich
PNG Icons
Allerdings haben PNG Icons in den letzten Jahren an Bedeutung verloren, da Alternativen durch eigene Icon Schriftarten wie zum Beispiel Font Awesome gegeben sind.
Vorteile von Icon Schriftarten
- Problemlos und verlustfrei auf fast jede Größe skalierbar
- Riesige Auswahl an vorgegebenen Icons mit geringer Dateigröße
- Über eine CSS Datei können beispielsweise nur die benötigten Icons geladen werden. Folglich muss nicht das komplette Icon Set geladen werden. Dadurch kann die Dateigröße für die Icons selbst und die Größe der CSS Datei reduziert werden.
2. JPG Format
Das JPG Format ist das am meisten verwendete Bildformat. Die Dateien zeichnen sich durch eine hohe Kompatibilität und universelle Einsatzmöglichkeiten aus.
- Das JPG Format sollte man immer dann verwenden, wenn die Dateigröße eine wesentliche Rolle spielt, dies ist im Webdesign fast immer der Fall.
- Bei der Komprimierung in eine JPG Datei, gibt es Qualitätsverluste, da die Komprimierung verlustreich ist.
- Kleinere Dateigröße (um ca. 60-80%) im Vergleich mit einer PNG Datei .
- Ist das Bild mit einer Komprimierung von 70% noch scharf genug und sieht gut aus? Das muss man im jeweiligen Fall selbst entscheiden.
Vorteile
- hohe Kompatibilität
- weit verbreitet
- niedrige Ladezeit
- volles Farbspektrum
Nachteile
- verlusthafte Kompression
- unterstützt keine Transparenz und Animationen
3. GIF Format
Auf Webseiten trifft man oftmals auf animierte Werbebanner, dabei handelt es sich um GIFs, welche sich durch ihre animierte Form auszeichnen.
Vorteile:
- verlustfreie Kompression
- kleine Dateigröße
- niedrige Ladezeit
- mehrere Bilder in einer Datei als Animation speichern
- Animationen leicht in kleinen Dateigrößen erstellen
- Häufige Anwendung für kurze Videoclips, animierte Banner, animierte Emojis und Grafiken
Nachteile:
- eingeschränkte Farbwahl
- ungeeignet für Fotos mit breitem Farbspektrum
- flaches Bildformat
4. SVG Format
Deutlich flexibler und daher ideal für die Darstellung von geometrischen Formen und Schriftarten, sind Vektorgrafiken. Anders als die bisher beschrieben Pixelgrafiken, (PNG, JPG, GIF) ist das SVG Format eine Vektorgrafik. Daher werden anstatt eines Pixels Pfade abgespeichert.
Vorteile:
- von den meisten Webbrowsern unterstützt
- verlustfreie Skalierung
- ideal für responsive Designs
- geringe Dateigröße
- Animation u.a. mit JavaScript möglich
- sehen in jeder Auflösung hervorragend aus und sind knackig scharf
Nachteile:
- Dateivergrößerung durch komplexe und detaillierte Grafiken
- nicht mit allen Browsern kompatibel
- in der Adobe Creative Cloud nur mit dem Illustrator bearbeitbar
Neue Bildformate
Als Bildformate der Zukunft werden WebP, JPG 2000 und JPG XR bezeichnet. Allerdings bringen die neuen Datenformate gewisse Nachteile mit sich, dabei beziehen sich die Nachteile auf die Browser Kompatibilität.
1. WebP Format
Die Ladezeit einer Website ist bekanntermaßen eines der wichtigsten Ranking-Faktoren bei Google. Wer schon mal mit Page Speed Insights gearbeitet hat, kennt die Meldung zur Verbesserung der Ladezeit: „Bilder in modernen Formaten bereitstellen“.
Dabei geht es unter anderem um die Verwendung des Grafikformats WebP. Dieses ist ein von Google entwickeltes Grafikformat, welches im Jahr 2010 veröffentlicht wurde.
Vorteile
- Einsparung der Bildgröße gegenüber JPG 25-34%
- Einsparung der Bildgröße gegenüber PNG 26%
- Das WebP Format unterstützt, verlustfreie Transparenz und Animationen
- mit WebP kann die Ladezeit der Website verringert werden
- Bessere Komprimierungsrate bei gegebener Qualität
Nachteile
- Nicht alle Browser unterstützen dieses Dateiformat. Für den Apple Browser Safari zum Beispiel muss als Alternative zum WebP Format ein anderes Grafikformat zur Verfügung gestellt werden.
- Qualität sinkt trotzdem (nicht ein Nachteil von WebP, sondern eher ein Nachteil aller verlustbehafteten Komprimierungen)
Tools zur Umwandlung ins WebP Format
Mit diversen Tools können Bilder ganz einfach von JPG oder PNG Format in das WebP Format umgewandelt werden. Anschließend bieten sich unterschiedliche Möglichkeiten dem Browser anzuweisen welche Grafiken verwendet werden sollten.
Das richtige Bild ausliefern
Aktuell unterstützen nur die Browser Chrome, Firefox und Opera das WebP Format. Wenn du das WebP Format verwendest, solltest du daher anderen Browsern die Möglichkeit geben, auf andere Bildformate zuzugreifen. Mit einen Eintrag in der .htaccess Datei auf dem Webserver kann dies erreicht werden.
Eine weiter Möglichkeit ist die Verwendung der HTML5 Tags <picture> und <source> welche weiter unten in diesem Beitrag erklärt werden.
Beispiel:
- Wenn ein/e BesucherIn mit einem Browser ohne WebP Format Unterstützung (z.b Internet Explorer, Safari) auf deine Website zugreift, sollte das normale Bildformat angezeigt werden.
- Falls der Browser aber WebP unterstützt, dann soll das Bild automatisch durch eine WebP Datei mit dem gleichen Namen ersetzt werden, welche sich ebenfalls auf dem Webspace befindet.
2. JPG 2000 Format
Die Bilddatei JPG 2000 bietet mehr Raum für Metadaten, welche das Auffinden und Verwalten von Bildern erleichtern.
Vorteile gegenüber dem JPG Format
- Bessere Komprimierungsrate bei gegebener Qualität
- Bis zu 256 Farbkanäle, wodurch verschiedene Farbprofile wie RGB und CMYK möglich sind.
Nachteil
- JPG 2000 funktioniert zurzeit nur in Safari und auf Apple-Geräten.
3. JPG XR
Natürlich muss bei den Grafikformaten auch noch der Softwareriese Microsoft mit dem JPG XR Format sein eigenes Süppchen kochen.
Vorteile
- Das Format JPG XR bietet eine bessere Kompression und kleinere Dateigröße im Vergleich zu den klassischen Formaten wie JPG oder PNG
Nachteile
- Auf Internet Explorer/Edge und auf Microsoft-Geräte beschränkt
Wie nutze ich jetzt die verschiedenen Grafikformate?
Im folgenden zeigen wir dir, wie du verschiedenen Grafikformate am besten für die verschiedenen Anforderungen bzw. Bereiche auf deiner Website einsetzt kannst und zudem eine optimale Ladezeit zu erreichen.
1. Das Logo meiner Webseite
Beginnen wir mit dem Website Logo. Die erste Wahl sollte hier das SVG Format sein.
Vorteile:
- geringe Datengröße
- Stufenlose verlustfreie Skalierung
- Möglichkeit von transparenten Hintergründen
- Das Logo sieht vom Smartphone bis hin zum Retina Display perfekt aus.
2. Fotos auf meiner Webseite
Neben Logo und Icons (aber auch Videos) machen die Fotos auf der Webseite den größten Teil der zu ladenden Inhalte aus. Demnach sind Fotos einer der wichtigsten Aspekte der Optimierung.
Im ersten Schritt sollte man zum JPG Format greifen, in einer Qualität von 80%. Allerdings nur wenn man mit der Qualität zufrieden ist, aber 80% haben sich als guten Richtwert etabliert.
Das ist hier aber nur der erste Schritt um von Google das OK zu optimierten Bildern und einer optimalen Ladezeit zu erhalten. Google wird hier protestieren und sagen „Stellen Sie moderne Grafikformate zur Verfügung!“. Wie schon erwähnt kocht jeder Browser und jeder Hersteller sein eigenes, optimiertes Grafiksüppchen.
Deshalb haben wir hier eine Übersicht über die bevorzugten Formate in den jeweiligen Browsern:
- Google Browser Chrome, Firefox, Opera – WebP Format
- Safari – JPG 2000 Format
- beim ewigen Eigenbrödler Microsoft – JPG XR Format
Aber wie liefern wir jetzt dem jeweiligen Browser das optimale Format?
Eigentlich ganz einfach. Mit dem schon erwähnten HTML5 Tags <picture> und <source>. Wir liefern jedem Browser genau das Format das er haben will. Wir wandeln das Bild mit entsprechender Software in das jeweilige Format um und stellen es auf unserem Webserver zur Verfügung. Anfangs ein gewisser Aufwand, der sich aber später lohnt. Im nächsten Schritt binden wir das Bild mit folgendem Code auf unserer Seite ein:
<picture>
<source srcset=“img/meinbild.webp“ type=“image/webp“>
<source srcset=“img/meinbild.jxr“ type=“image/jxr“>
<source srcset=“img/meinbild.jp2″ type=“image/jp2″>
<source srcset=“img/meinbild.jpg“ type=“image/jpg“>
<img src=“img/meinbild.jpg“ alt=“Bildbeschreibung“ />
</picture>
Was macht dieser Codeblock jetzt genau?
- Versteht der Browser nur das JPG Format wird die JPG Datei geladen
- Wenn der Browser WebP versteht wird das WebP Format geladen
- Versteht der Browser das JPG 2000 Format wird dieses geladen, usw.
Natürlich kann man dieses Verhalten für die verwendeten Grafiken je nach Webseite und verwendetem System automatisieren und muss nicht für jedes Bild den Codeblock einfügen.
Folglich ist dies die Aufgabe des fähigen Webentwicklers, wie unsere fähigen Webentwickler bei webdots. So wird je nach Browser das bestmögliche Format ausgeliefert und wir haben die optimalen Ladezeiten.
3. Da wäre jetzt noch der Rest
Wir bei webdots verwenden für den „Rest“ bevorzugt folgende Formate:
- Icons liefern wir bevorzugt über Icon Sets wie Font Awesome aus.
- Ist es der Fall das wir eigene Icons ausliefern müssen, wählen wir SVG oder PNG
- Für kurze, ganz spezielle Bildanimationen wählen wir GIF Animationen
- Für weitere bewegte Animationen wie Pfeile die sich fließend verändern sollen wählen wir CSS Animationen. Diese sind mit wenigen CSS Anweisungen umzusetzen und verlangen keine Bilder die geladen werden müssen und sparen so Ladezeit.
- Außerdem laden wird diese Animationen auch über unsere Standard CSS Dateien, das heißt wir binden keine zusätzlichen Ressourcen ein.
Fazit
Zusammenfassend lässt sich sagen, dass es bei der Auswahl des Grafikformates kein richtig oder falsch gibt. Je nachdem welche Art von Grafik du benötigst und je nachdem wo und auf welche Weise deine Bilder veröffentlich werden sollten, ist ein anderes Format die bessere Wahl.
Wenn du dir noch immer unsicher bist, welches Bildformat das richtige für dich ist, kannst du gerne webdots kontaktieren.
Unsere Webentwickler kümmern sich darum, dass deine Bilder je nach Browser im bestmögliche Format ausgeliefert werden und zugleich eine optimale Ladezeit deiner Website erreicht wird.