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:

• 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 verwendet werden, wenn die Dateigröße eine untergeordnete Rolle spielt und es wichtig ist 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 wegen Dateigröße
• keine Animationen möglich

PNG Icons

PNG Icons in den letzten Jahren an Bedeutung verloren, da Alternativen durch eigene Icon Schriftarten wie zum Beispiel „Font Awesome“ zur Verfügung stehen.

Icon Schriftarten Vorteile:

• 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, wie es zum Beispiel im Webdesign fast immer der Fall ist.
• 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 Websites 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 erstellbar
• 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

Das SVG Format ist deutlich flexibler und daher ideal für die Darstellung von geometrischen Formen und Schriftarten.  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 verwendet werden.
• Die 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.

Die richtigen Bildformate 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 einem 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 wird das Bild automatisch durch eine WebP Datei mit dem gleichen Namen ersetzt werden, welche sich ebenfalls auf dem Webspace befindet.

4. 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.

Gehen wir jetzt vom WebP Format aus, das nicht von Safari unterstützt wird, wäre jetzt JPG 2000 das Format das bei Apple Geräten uns den Vorteil der schnelleren Ladezeit durch geringere Dateigröße bietet.

5. JPG XR

Natürlich muss bei den Grafikformaten auch noch der Softwareriese Microsoft mit dem JPG XR Format sein eigenes Süppchen kochen.

Vorteil

• Das Format JPG XR bietet eine bessere Kompression und kleinere Dateigröße im Vergleich zu den klassischen Formaten wie JPG oder PNG.

Nachteil

• auf Internet Explorer/Edge und auf Microsoft-Geräte beschränkt

Wie nutze ich jetzt die verschiedenen Bildformate?

Im Folgenden erklären wir, wie verschiedenen Grafikformate am besten für die verschiedenen Anforderungen bzw. Bereiche auf Websites eingesetzt werden können und wie eine optimale Ladezeit erreicht werden kann.

1. Das Logo der Website

Die beste Option für das Logo einer Website ist das SVG Format, deswegen sollte dieses gewählt werden. 

Vorteile eines Logos im SVG Format:

• geringe Datengröße
• stufenlose, verlustfreie Skalierung
• Möglichkeit von transparentem Hintergrund
• Das Logo sieht vom Smartphone bis hin zum Retina Display perfekt aus.

2. Fotos auf der Website

Neben Logo und Icons (aber auch Videos) machen die Fotos auf der Website den größten Teil der zu ladenden Inhalte aus. Demnach sind Fotos einer der wichtigsten Aspekte, um die Ladezeit zu optimieren.

Im ersten Schritt sollte das JPG Format in einer Qualität von 80% verwendet werden. Dabei gelten 80% nur als grober Richtwert von uns. Wer nicht zufrieden mit dem Bild ist, kann auch eine höhere Qualität verwenden, muss aber mit einer längeren Ladezeit der Website rechnen.

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 Bildformate 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 kann jetzt dem jeweiligen Browser das optimale Bildformat geliefert werden?

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?

• Versteht der Browser zum Beispiel 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 dieses Verhalten für die verwendeten Grafiken je nach Website und verwendetem System automatisiert werden  und es muss nicht für jedes Bild der Codeblock einfügt werden.

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 es werden die optimalen Ladezeiten errreicht.

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.
• Wenn der Fall auftritt, dass 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 umsetzbar, 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 benötigt wird und je nachdem wo und auf welche Weise Bilder veröffentlich werden sollen, 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.

The following two tabs change content below.

• Bio
• Neueste Artikel

Victoria Nöbauer

Victoria ist seit Jänner 2021 ein Mitglied des webdots Teams. Sie unterstützt das Onlinemarketing-Team bei der Erstellung von Web-Analyse Dashboard, beim Aufbau von Trackings und weiteren SEO Maßnahmen. In ihrer Freizeit ist Vicky entweder mit dem Musikverein oder mit der Feuerwehr unterwegs.

Neueste Artikel von Victoria Nöbauer (alle ansehen)

• Welche Bildformate gibt es und wo werden sie eingesetzt? - 25. Januar 2023
• Easyname – Achtung gefälschte E-Mails! - 5. April 2022
• In nur 6 Schritten zur € 22.500 Online Marketing Förderung - 1. April 2022

Related Posts