Das perfekte Bildformat für Websites

Visuelle Inhalte sind die „Geheimwaffe“, wenn Sie versuchen, mit Ihrem Publikum online zu kommunizieren.
Egal ob Sie eine Website erstellen, mit einer Infografik etwas erklären wollen oder ein Video verwenden.

Um Ihre Produkte und Dienstleistungen im Internet zu verkaufen, sollten Sie auf eigene und hochwertige Bilder setzen.
Das Problem: Die Wahl des richtigen Bilddateiformats kann sich wie ein Informationskrieg anfühlen.

Viele Formate beanspruchen für sich, das perfekte Bildformat zu sein.
Die idealen Bilddateiformate hängen jedoch immer davon ab, wie sie online verwendet werden.

• Versuchen Sie, Platz zu sparen und die Ladezeiten zu verbessern?
• Benötigen Sie ein hochwertiges, editierbares Bild?
• Möchten Sie eine Animation?

Die „Big Four“ – JPG, GIF, PNG und SVG – konkurrieren seit Jahrzehnten.
Mit modernen Formaten wie WebP und AvIF kommen inzwischen weitere Optionen dazu.

Also, was sollten Sie im Internet verwenden?
Wir zerlegen nun alle wichtigen Formate, damit die wesentlichen Unterschiede deutlich werden.

Übersicht der Dateiformate (Dateigröße & Qualität)

Probleme, das richtige Bildformat auszuwählen?
Dann lohnt sich ein Blick auf das WHAT THE IMG Tool.

JPG / JPEG – Das Fotoformat

JPG (Joint Photographic Experts Group) wurde 1986 erschaffen.
Dieses Bildformat benötigt sehr wenig Speicherplatz und lässt sich schnell hoch- und herunterladen.

JPGs können Millionen von Farben unterstützen.
Daher ist dieser Dateityp ideal für reale Bilder wie Fotos.

Sie funktionieren gut auf Websites und sind die beste Wahl, wenn sie auf Social-Media-Kanälen veröffentlicht werden.
Tatsächlich speichern die meisten Digitalkameras und Smartphones ihre Bilder als JPGs.

JPG – der Webstandard

Das JPG ist „verlustbehaftet“.
Wenn die Daten komprimiert werden, werden unnötige Informationen dauerhaft aus der Datei gelöscht.

Das bedeutet, dass eine bestimmte Qualität verloren geht oder beeinträchtigt wird, wenn eine Datei in ein JPG konvertiert wird.
Stellen Sie sich JPG als das Standard-Dateiformat für das Hochladen von Bildern ins Web vor, es sei denn:

• Sie benötigen Transparenz
• Das Bild enthält viel Text
• Sie brauchen Animationen
• Sie arbeiten mit harten Kanten / Vektor-Optik (Logos, Icons, UI-Elemente)

JPG – Ladezeiten bei Onlineshops

Besonders bei Onlineshops kommt es auf schnelle Ladezeiten an.
Vermeiden Sie also den typischen Fehler, Produktbilder im PNG-Format zu verwenden.

Verwenden Sie stattdessen komprimierte JPG-Bilder.
Bei dem GAVERO-Onlineshop hat allein die Umstellung von PNG auf komprimierte JPG-Bilder die durchschnittliche Ladezeit von 2,1 auf 0,6 Sekunden reduziert.

Logo JPG Format – Dateigröße: 27 KB

Farbverlauf JPG Format – Dateigröße: 3 KB

Foto JPG Format – Dateigröße: 126 KB

WebP – Das Bildformat mit der besten Komprimierung im Test

Besonders bei Fotos hat sich im Test gezeigt, dass dieses Bildformat das beste Verhältnis von Qualität zu Dateigröße bietet.
Die Dateigröße fällt oft rund 30 % kleiner aus als beim JPG-Format – bei ähnlicher visueller Qualität.

WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz und Animation.
Damit ist es ein sehr flexibles Format für moderne Websites.

WebP und AVIF – Browser-Unterstützung

Das Problem war lange Zeit die Browser-Unterstützung.
Vor allem Safari auf älteren macOS-Versionen hat WebP und AVIF verzögert unterstützt.

Inzwischen können moderne Browser WebP weitgehend darstellen, AVIF holt stark auf, ist aber noch nicht überall Standard.
Aus diesem Grund sollten WebP und AVIF nicht als einziges Format verwendet werden, sondern immer mit Fallback (z.B. JPG/PNG) ausgeliefert werden.

Quelle: https://caniuse.com/#feat=webp

WebP-Lösungen für WordPress

Das WordPress-Plugin Optimus bietet eine automatisierte Lösung.
Es erstellt automatisch WebP-Bildvarianten, löscht jedoch nicht die Originalbilder.

Mit Raidboxes.io als Hoster oder dem perfmatters.io-Plugin lässt sich das WebP-Format sicher verwenden.
Wenn ein Browser dieses Format nicht unterstützt, wird automatisch die JPG- oder PNG-Variante geladen.

GIF – Das Format für kurze Clips und Animationen

GIF (Graphics Interchange Format) kam 1987 auf den Markt.
Es wurde entwickelt, um das Senden von Bildern bei langsamen Verbindungen oder geringer Bandbreite zu erleichtern.

GIFs sind nach der ursprünglichen Definition „verlustfrei“.
Sie behalten alle in der Datei enthaltenen Daten, sind aber kleiner als viele andere Formate, weil sie nur bis zu 256 indizierte Farben aufnehmen können.

Damit kann man ein GIF heute praktisch nicht mehr als wirklich verlustfrei bezeichnen.
Es war für kleine, einfache grafische Icons gedacht, hat aber einen entscheidenden Vorteil: GIFs können animiert werden.

Es gibt kein Audio bei einem GIF, aber sie sind immer noch eine einfache Möglichkeit, Bewegung in Ihre Online-Kanäle zu bringen.
Doch hochwertige Animationen von Grafiken oder Icons sollten heute nach Möglichkeit per Canvas, CSS oder SVG animiert werden.

Logo GIF Format – Dateigröße: 11 KB

Farbverlauf GIF Format – Dateigröße: 33 KB

Foto GIF Format – Dateigröße: 205 KB

PNG – Das Format für Logos

PNG (Portable Network Graphics) wurde 1995 erfunden, um das GIF-Format zu ersetzen und Patentprobleme zu umgehen.
Wenn die Dateigröße kein großes Problem darstellt und Sie mit einem komplexen Bild arbeiten, ist PNG oft die beste Wahl.

• PNG-8 ist ähnlich wie GIF, da es 256 indizierte Farben sowie Transparenz unterstützt.
• PNG-24 kann wie JPG bis zu 16 Millionen Farben darstellen.

PNGs werden am häufigsten für statische Bilder verwendet.
Wie beim GIF-Format können aber auch Animationen damit umgesetzt werden.

Wie GIF ist PNG verlustfrei, so dass während der Komprimierung keine Daten verloren gehen.
Sie sind ideal für detaillierte Grafiken oder Dateien mit größeren, einfarbigen Flächen.

Transparenz, auch in Verbindung mit Schlagschatteneffekten, wird sehr gut unterstützt.

Logo PNG Format – Dateigröße: 9 KB

Farbverlauf PNG Format – Dateigröße: 0,8 KB

Foto PNG Format – Dateigröße: 181 KB

SVG – das moderne Format für Logos und Icons

SVG (Scalable Vector Graphics) ist ein 2001 veröffentlichtes Vektorbildformat.
Es ist leistungsfähiger als andere, für das Web geeignete Dateiformate, wenn es um Logos und Icons geht.

Im Gegensatz zu den Rasterformaten JPG, GIF und PNG bleibt ein SVG-Bild bei jeder Auflösung und Größe scharf und klar.
Eine SVG-Grafik wird auf normalen Bildschirmen und Retina-Displays immer perfekt dargestellt.

Das Erstellen von zwei Grafiken in 100 % und 200 % Auflösung entfällt damit.
SVGs bestehen aus mathematisch definierten Formen und Kurven – nicht aus Pixeln.

SVGs können animiert werden, unterstützen Transparenz und beliebige Kombinationen von Farben oder Farbverläufen.
Sie sind verlustfrei und bei einfachen Grafiken (Icons, Logos, UI-Elemente) meist extrem klein.

Das Einbinden von SVG-Formaten ist allerdings nicht immer trivial.
Je nachdem, wie oft sich eine SVG-Grafik in der Website befindet und wo sie eingesetzt wird, gibt es unterschiedliche Best-Practices.

WordPress unterstützt den Dateiupload von SVG-Dateien standardmäßig nicht.
Hierfür müssen Sie ein Child-Theme oder ein SVG-Plugin einsetzen – inklusive Sicherheitsprüfung.

Das zuvor gezeigte Foto lässt sich im SVG-Format nicht sinnvoll darstellen, ohne dass sich der Browser wegen der Datenmenge „aufhängt“.
Für Fotos bleiben Rasterformate die bessere Wahl.

Welches Bildformat ist das beste?

Für mich ist es ganz klar das AvIF-Format, gefolgt von WebP – wegen der starken Komprimierung bei guter Qualität.
Da Websites aber möglichst allen Browsern eine Darstellung ermöglichen müssen, entscheide ich mich in der Praxis immer zwischen SVG, PNG und JPG als Basisformate und lasse diese zusätzlich in AvIF und WebP umwandeln.

Der Webserver prüft, welches Format der aktuelle Browser verwenden kann, und liefert dann das bestmögliche Format aus.

• Urlaubsbilder auf Facebook oder Handyfotos: JPG
• Kurze Animationen / Memes: GIF (oder besser moderne Video-Formate h256 oder v9 mit MP4)
• Hochwertige Bilder, Icons, Logos mit Transparenz: PNG
• Logos, Icons, skalierbare UI-Grafiken: SVG (bestes Format, wenn möglich)
• Performance-Optimierung / Core Web Vitals: WebP / AvIF als zusätzliche Versionen

Prüfen Sie also immer als erstes, ob die Grafik als SVG erstellt und eingebunden werden kann.
Wenn nicht, prüfen Sie PNG. Geht beides nicht, greifen Sie auf JPG zurück.

Auf https://tinypng.com können Sie PNG- und JPG-Bilder sehr gut komprimieren, um sie mit geringer Dateigröße auf Ihrer Website einzubinden.

Welche Auflösung für Website-Bilder?

Neben dem richtigen Bildformat muss noch die richtige Auflösung bzw. Bildgröße gewählt werden.
Oft werden dpi (Dots per Inch) mit Bildgröße in Pixel verwechselt.

Bei Web-Bildern ist die Auflösung in dpi egal.
Wenn von „Auflösung“ gesprochen wird, ist damit im Web eigentlich die Breite und Höhe in Pixel gemeint.

3.000 Pixel sind ein guter Ausgangspunkt

Wichtig für die Wahl der Bildgröße ist die geplante Darstellungsgröße innerhalb der Website.
Soll das Bild über die volle Breite dargestellt werden, oder nur als kleine Vorschau für einen Blogbeitrag?

Faustregel: geplante Darstellungsgröße × 2, jedoch maximal 3.000 Pixel Breite.

Beispiel:
Darstellung im Website-Layout mit 800 Pixel Breite → Bild mit 1.600 Pixel Breite anlegen.

So stellen Sie sicher, dass hochauflösende Displays (Retina, 4K, Smartphones) die Bilder gestochen scharf darstellen, selbst wenn sie komprimiert sind.
Mehr als 3.000 Pixel sind die Ladezeit in der Regel nicht wert und damit eine sinnvolle Obergrenze.

Bildersets helfen, die richtige Bildgröße auszuliefern

Ein iPhone-Display ist ca. 415 Pixel breit.
Ein Notebook erreicht schnell 1.500 Pixel Bildschirmbreite.

Für eine ideale Darstellung sollten die Bilder also in mehreren Größen vorliegen und entsprechend geladen werden:

• kleine und ältere Smartphones: 415 Pixel
• iPhone: 415 Pixel Bildschirmbreite × 2 = 830 Pixel
• normaler Monitor: 1.500 Pixel
• modernes Notebook: 1.500 Pixel Bildschirmbreite × 2 = 3.000 Pixel

In Summe gibt es also mindestens vier Bildgrößen, die angelegt werden.
Moderne Browser entscheiden selbstständig, welche Bildgröße geladen wird, wenn ein sogenanntes Bilderset (srcset, sizes) bereitgestellt wird.

Das trifft natürlich auch auf fast alle Smartphones zu.
WordPress stellt die Codes für die Bildersets automatisch bereit.

Sie müssen nur darauf achten, dass das verwendete Ausgangsbild wenigstens 3.000 Pixel hoch oder breit ist.
Die Größe bezieht sich immer auf die längste Seite.

Zusätzlich sollten Sie Ihren WordPress-Entwickler bitten, automatisch weitere Bildgrößen anlegen zu lassen.
Als Standard hat WordPress nur drei Bildgrößen aktiviert. Diese passen wahrscheinlich nicht zu Ihrem Layout.

Bei einem 6-spaltigen Layout mit Rand arbeite ich z.B. mit folgenden Bildgrößen in Pixel:
3.000 px, 2.400 px, 1.600 px, 800 px, 400 px, 200 px.

Checkliste für das perfekte Website-Bild

• Detailreiches Bild → JPG
• Wenige Details / Flächen / UI → PNG oder SVG
• Logos & Icons → bevorzugt SVG
• Maximal 3.000 Pixel Breite
• Bild-Dateigröße über ein Komprimierungstool reduziert
• Dateiname ohne Leerzeichen, Umlaute und Großbuchstaben
• Dateiname beschreibt den Bildinhalt (z.B. funktionsweise-bilder-sets.jpg)