Websites Wiki: Bilder fürs Web optimieren - welche Bilddateiformate sind geeignet?

Nicht jedes Bildformat ist für jeden Einsatz geeignet. Hier eine Auflistung, wann JPEG, PNG, SVG oder GIF für das Web am besten zum Einsatz kommen.

Bildformate für Fotos: WebP oder JPEG (Qualität: 70)

Fotos haben viele reichhaltige Details in sich, was es für unkomprimierte Dateiformate sehr schwer an Datenlast macht. Entsprechend sollte für Fotos immer ein Bildformat gewählt werden, das eine Komprimierung zulässt. Hierfür wurde das Format JPEG entwickelt, das mit .jpg oder .jpeg im Dateinamen endet.

JPEG-Bilder haben darüber hinaus die Fähigkeit, eine Qualitätsrate zwischen dem Wert 0 und Wert 100 festlegen zu können. Je niedriger der Wert, desto geringer ist die Dateigröße - allerdings nimmt dabei die Qualität des Bildes immer deutlicher ab. Für das Web empfielt sich der Einsatz der Qualitätsstufe 70.

Unterstützt Ihre Website auch die dynamische Ausgabe von WebP-Bildern, sollten Sie standardmäßig allerdings WebP für Fotos einsetzen. WebP ist noch mal deutlich kleiner als JPEG, wird allerdings nicht von allen Browsern unterstützt.

Fotogrößen anhand Dateiformaten - Beispiele:

Zur Vergrößerung auf das Bild klicken:

WebP: 83,45 KB 1920x1277 Pixel Wird von Safari und Internet Explorer nicht unterstützt.

JPG (70 Qualität): 258,08 KB 1920x1277 Pixel

JPG (100 Qualität): 924,05 KB 1920x1277 Pixel

PNG: 2,29 MB 1920x1277 Pixel

GIF: 1,2 MB 1920x1277 Pixel Einschränkung auf 256 Farben

Bildformate für Logos: SVG, WebP oder PNG (8-Bit)

Logos enthalten üblicherweise scharfe Kanten und der Hintergrund soll in der Regel transparent sein. In solchen Fällen eignet sich eine Vektorgrafik am besten. Vektorgrafiken wie das Bildformat SVG es bereitstellt enthalten nur die Formen in einem Bildkoordinatensystem und die Farbwerte und ist damit extrem klein. Ein weiterer großer Vorteil von SVG-Dateien ist, dass diese ihre Qualität beim Vergrößern der Datei - dank dem Koordinatensystem - nicht verlieren. Ein SVG-Logo kann sowohl klein im Header, als auch groß im Footer eingesetzt werden, obwohl es sich dabei um exakt das gleiche Bild handelt.

PNG-Dateien wären die Zweitwahl für Logos, wenn keine SVG-Vektorgrafik vorliegt. PNG ist unkomprimiert, aber erlaubt scharfe Kanten und hat keine "Komprimierungs-Artefakte", wie sie bei JPEG etwa vorkommen. Zusätzlich erlauben sie einen transparenten Hintergrund über einen Alpha Kanal, was für Logos auf einer Bildergalerie im Hintergrund zum Einsatz kommen kann.

Empfohlene Logoformate - Beispiele:

Zur Vergrößerung auf das Bild klicken:

SVG: 2,28 KB 417x228 Pixel Größe "unendlich" skalierbar

WebP: 3,91 KB 417x228 Pixel Transparenz möglich Wird von Safari und Internet Explorer nicht unterstützt.

PNG (8 Bit) 4,08 KB 417x228 Pixel Transparenz möglich

PNG (normal): 7,34 KB 417x228 Pixel Transparenz möglich

GIF: 5,73 KB 417x228 Pixel Je nach Skalierung treten Artefakte auf Keine guten scharfen Kanten möglich Transparenz möglich

JPG (Qual. 70): 14,25 KB 417x228 Pixel Je nach JPG-Qualität treten Artefakte auf Keine Transparenz möglich

Bildformate für Icons: Font, SVG oder PNG

Setzen Sie auf Ihrer Website verschiedene Icons ein, empfiehlt sich hierfür ebenfalls Vektorgrafiken und damit der Einsatz von SVG. Diese sind deutlich kleiner und können in ihrer Größe je nach Einsatz skaliert werden.

Überlegenswert ist aber, alle SVG-Icons in einem Font zusammenzuführen. Ja, das bedeutet, alle SVG-Icons in einer eigenen Schriftart zusammenzufassen. Innerhalb einer Schriftart haben Icons zusätzliche Eigenschaften. Zwar verlieren die Icons ihre originalen Farbwerte damit, aber wie bei normalen Text kann die Farbe für die Icons dann frei gewählt werden. Das gleiche Icon in drei verschiedenen Farben wird dann durch ein Icon als Schriftsatz bereitgestellt. Für die Ladezeiten hat das zusätzlich den Vorteil, dass nich mehrere Dateien nacheinander geladen werden müssen, sondern nur eine Datei, die selbst komprimiert werden kann.

Sind für die Icons keine Vektorgrafiken möglich und sind die Icons selbst PNG-Dateien, sollten sie auch bei PNG bleiben. Diese gewährleisten zumindest scharfe Kanten und Transparenz.

Bildformate für Bilder mit Text: PNG

Wenn es notwendig ist, ein Bild mit Text innerhalb des Bildes abzuspeichern, empfiehlt sich meist der Einsatz von PNGs. Obwohl JPEG-Bilder deutlich kleiner sind, hat JPEG bei harten Kanten wie Text kleine Probleme und löst Artefakte aus. Um den Effekt zu vermeiden, empfiehlt sich dann ein PNG-Bild.

In der Regel sollte aber versucht werden, keinen Text innerhalb eines Bildes unterzubringen. Text kann auch mit HTML und CSS über ein Bild gelegt werden, was deutlich freundlicher für den Nutzer und die Datenlast ist.

Animierte Bilder: WebP oder GIF

Animierte Bilder sollten Sie grundsätzlich nicht mehr einsetzen. Aber wenn Sie es trotzdem wünschen, sollten Sie vorrangig WebP als Format wählen, da das eine Animation und Komprimierung des Bildes zulässt. In der Regel ist es damit kleiner in der Dateigröße als das fossile Bildformat GIF. WebP unterstützt zudem auch 24-Bit RGB-Farben und Transparenz mit 8-Bit Alpha Kanal.

Dem gegenüber steht GIF, ein altes Bildformat, das nur 256 Farben zulässt. Animationen sind damit möglich und auch Transparenz über einen 1-Bit Alpha Kanal. 256 Farben und nur 1-Bit Alpha Kanal sind der Grund, warum GIF-Animationen häufig nicht gut aussehen. Und die Datengröße ist im Vergleich zu anderen Formaten relativ enorm.

Eine Alternative zu animierten Bildern wäre ein animiertes Kurzvideo als WemM- oder MP4-Format, das häufig besser geeignet ist.

• Bilder in korrekten Breiten und Höhen ausgeben
  Stellen Sie sicher, dass die Bilder auf der eingebundenen Seite nicht in Vollbildgröße wie etwa Full-HD-Größe geladen werden, wenn das eingesetzte Bild deutlich kleiner ausgegeben wird. In der Größe wie es für den Nutzer ausgegeben wird, sollte auch das Bild in der Bildgröße sein.
• Mehrere Bildgrößen mit srcset ausgeben
  Moderne Browser unterstützen dein Einsatz von srcset. srcset ist ein Attribut für Bilder, in dem mehrere Bildergrößen des gleichen Bilds hinterlegt werden können. Der Browser entscheidet auf Basis seiner Bildschirmbreite dann, welches Bild er herunterlädt.
• Bilder mit Lazy Loading nachladen
  Nicht jedes Bild muss beim Seitenaufruf direkt und sofort mitgeladen werden. "Lazy geladene Bilder" werden erst dann geladen, wenn man kurz vor dem Bild hin scrollt. Gerade für die Pagespeed Optimierung der eigenen Website ist das eine gute Möglichkeit, hohe Datenlast direkt beim Seitenaufbau zu verringern.