Das richtige Bildformat für das Web wählen

Drei Fragen vorab

Auf einer echten Website läuft die Wahl für jedes Bild auf drei Fragen hinaus:

1. Was zeigt das Bild? Fotos eignen sich für verlustbehaftete Formate wie JPG, verlustbehaftetes WebP und AVIF, weil kleine Fehler in natürlichen Details untergehen. Screenshots, Text, Diagramme und Grafiken mit flächigen Farben haben harte Kanten, an denen verlustbehaftete Komprimierung sichtbare Säume hinterlassen kann. Für sie eignen sich verlustfreie Formate (PNG, verlustfreies WebP) oder, wenn sie aus Formen gezeichnet wurden, SVG.
2. Braucht es Transparenz oder Animation? JPG bietet weder das eine noch das andere. PNG, WebP und AVIF können einen vollständigen Alphakanal mit weichen Kanten speichern. GIF-Pixel sind entweder ganz transparent oder ganz deckend, daher können runde Kanten auf farbigen Hintergründen gezackt oder ausgefranst wirken. GIF, WebP, AVIF und APNG (animiertes PNG) können Animationen enthalten, ein kurzes Video ist aber oft deutlich kleiner als ein GIF.
3. Wo wird es veröffentlicht? Auf Ihren eigenen HTML-Seiten können Sie mehrere Formate anbieten. Ein Content-Management-System (CMS), ein Onlineshop oder ein Upload-Formular legt fest, was es annimmt, und wandelt Dateien unter Umständen selbst um. Sehen Sie daher in der aktuellen Dokumentation nach. E-Mail-Programme unterscheiden sich stärker als Browser, deshalb sind JPG und PNG für Newsletter die sicherere Wahl.

Wie die einzelnen Formate funktionieren, erklärt JPG vs. PNG vs. WebP vs. AVIF.

Format nach Inhalt: eine Entscheidungstabelle

Wenn Sie AVIF oder WebP auf Ihren eigenen Seiten ausliefern, behalten Sie eine JPG- oder PNG-Version für Browser und Apps, die diese Formate nicht anzeigen können. Nimmt eine Plattform nur eine einzige Datei an, ist die Spalte „Fallback oder Alternative“ meist die sichere Wahl. Für Favicons gelten eigene Regeln; siehe Favicon-Größen, -Formate und HTML-Tags.

Für eine GIF-artige Schleife auf einer Webseite ist ein stummgeschaltetes <video> mit den Attributen autoplay, loop, muted und playsinline ein verbreiteter Ersatz, weil Browser stummgeschaltete Videos in der Regel automatisch abspielen lassen. In E-Mails zeigen manche Desktop-Versionen von Outlook nur das erste Einzelbild eines animierten GIFs. Bringen Sie die Kernbotschaft daher in diesem ersten Bild unter.

WebP oder AVIF mit Fallback anbieten

Auf Seiten, deren HTML Sie selbst schreiben, lässt das Element <picture> jeden Browser das erste Format nehmen, das er unterstützt:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Schüssel mit Tomatenpasta" width="1600" height="1200">
</picture>

Der Browser liest die <source>-Elemente der Reihe nach und überspringt jedes, dessen type er nicht unterstützt. Das erforderliche <img> enthält den Alternativtext sowie Breite und Höhe, mit denen der Browser den Platz für das Bild reservieren kann. Seine Datei wird angezeigt, wenn keine Quelle passt. Mit CSS wie img { max-width: 100%; height: auto; } wird das Bild auf schmalen Bildschirmen trotzdem passend verkleinert und behält dabei seine Proportionen. Um zusätzlich mehrere Größen anzubieten, führen Sie jede Datei mit ihrer Breite in srcset auf und ergänzen ein sizes-Attribut, wie in Bildgröße ändern: Pixel, Seitenverhältnis und DPI beschrieben.

Viele CMS und Bild-CDNs können WebP- oder AVIF-Kopien erzeugen und für jeden Besucher eine davon auswählen. Wenn Ihr System das kann, laden Sie ein JPG oder PNG in hoher Qualität hoch und überlassen ihm die Umwandlung, statt eine bereits stark komprimierte Datei hochzuladen. So wird das Bild nicht zweimal komprimiert.

Praxisbeispiel: die Bilder eines Artikels

Angenommen, ein Rezeptartikel hat drei Bilder, und seine Textspalte ist höchstens 760 CSS-Pixel breit.

• Titelfoto. Das Original vom Smartphone hat 4032 × 3024 Pixel, also etwa 12,2 Megapixel. Eine 760 Pixel breite Spalte braucht auf einem Bildschirm mit zwei Gerätepixeln pro CSS-Pixel etwa 1520 Pixel in der Breite. 1600 × 1200 behält daher das Seitenverhältnis 4:3 bei und kommt auf 1,92 Megapixel, etwa 16 % des Originals. Ändern Sie zuerst die Größe und speichern Sie dann AVIF oder WebP plus ein JPG als Fallback. Das Original in voller Größe hat mehr als sechsmal so viele Pixel wie die Version mit 1600 × 1200, und der Browser würde die meisten davon wieder herunterrechnen.
• Logo mit transparentem Hintergrund. Das PNG vom Designer hat 1000 × 500 Pixel und wird 200 CSS-Pixel breit angezeigt; 400 × 200 Pixel reichen also für Bildschirme mit zwei Gerätepixeln pro CSS-Pixel. Behalten Sie es als PNG oder WebP. Ein JPG würde die transparenten Bereiche einfarbig füllen, was auf einem farbigen Seitenkopf als Kasten auffällt. Kann der Designer ein SVG exportieren, ist das noch besser.
• Screenshot einer Timer-App. Text und flächige Farben: Speichern Sie ihn als PNG. Ein JPG kann um Buchstaben herum Sprenkel erzeugen, die Lesern stärker auffallen als kleine Fehler in einem Foto.

Dateien mit dem LeedyBox-Bildkonverter umwandeln

Der Bildkonverter ändert das Format eines oder mehrerer Bilder in Ihrem Browser, ohne die Bilddaten zu LeedyBox hochzuladen.

1. Klicken Sie auf „Dateien auswählen oder hierher ziehen und ablegen“ oder legen Sie PNG-, JPG-, WebP-, BMP-, GIF- oder AVIF-Dateien darauf ab. Andere Typen wie HEIC oder SVG sowie Dateien, die Ihr Browser nicht dekodieren kann, werden mit einer Meldung abgelehnt.
2. Jede Datei erhält ein eigenes Formatmenü (auf breiteren Bildschirmen mit „To:“ beschriftet), das zunächst auf JPG steht. Wählen Sie JPG, PNG, WEBP, BMP, AVIF oder ICO für jede Datei einzeln oder unter „Stapeloptionen“ mit „Alle Formate festlegen auf...“ für alle Dateien auf einmal.
3. Klicken Sie auf „Konvertieren & herunterladen“. Eine einzelne Datei wird zum Beispiel als logo_converted.webp gespeichert, mehrere Dateien kommen gesammelt als leedybox_converted_images.zip an.

• Die Pixelmaße bleiben gleich, außer bei ICO. Ändern Sie die Größe vorher mit dem Tool Bildgröße ändern, oder verwenden Sie „Auch Breite und Höhe begrenzen“ im Tool Bilder komprimieren.
• Bei JPG, WebP und AVIF fordert der Konverter beim Browser die Qualität 0,92 auf dessen Skala von 0 bis 1 an; einen Qualitätsregler gibt es nicht. Diese Einstellung gewichtet Details stärker als die Dateigröße. Sie bedeutet auch, dass WebP verlustbehaftet gespeichert wird: Eine Option für verlustfreies WebP gibt es nicht, konvertieren Sie Screenshots und Textgrafiken daher in PNG. Für kleinere Dateien bietet „Bilder komprimieren“ einen Qualitätsregler (Standardwert 75) und eine Zieldateigröße; siehe Komprimierungseinstellungen für Bilder erklärt.
• JPG-Dateien und die BMP-Dateien des Konverters haben keine Transparenz, transparente Bereiche werden daher weiß. Die BMP-Dateien sind außerdem unkomprimiert, mit 3 Byte pro Pixel (jede Zeile wird auf ein Vielfaches von 4 Byte aufgefüllt) plus einem 54 Byte großen Header: Ein Bild mit 1200 × 800 Pixeln wird zu 2.880.054 Byte (etwa 2,9 MB), ganz gleich, was es zeigt. BMP gehört daher nicht auf Webseiten.
• Eine ICO-Datei enthält ein einzelnes PNG-Bild und behält die Transparenz. Ist eine Seite des Bildes länger als 256 Pixel, wird es so verkleinert, dass es in 256 × 256 passt; aus einem Logo mit 1000 × 500 Pixeln werden so 256 × 128 Pixel. Kleinere Bilder behalten ihre Größe. Für eine favicon.ico mit den Größen 16, 32 und 48 Pixel sowie PNG- und Apple-Touch-Icons verwenden Sie den Favicon-Generator.
• AVIF lässt sich nur auswählen, wenn Ihr Browser AVIF-Dateien erstellen kann, was viele Browser derzeit nicht können; andernfalls erscheint es als „AVIF (von diesem Browser nicht unterstützt)“ in der Liste. Kann der Browser das gewählte Format nicht erstellen (auch die WebP-Ausgabe hängt vom Browser ab), erscheint eine Meldung, und es wird nichts gespeichert, statt PNG-Daten unter der falschen Dateiendung abzulegen. Bei mehreren Dateien bricht ein solcher Fehler den gesamten Stapel ab, sodass keine ZIP-Datei entsteht.
• Jedes Bild wird neu gezeichnet und neu kodiert. EXIF-Daten, GPS-Standort und Farbprofil des Originals werden daher nicht übernommen, und aus einem animierten GIF, WebP oder AVIF wird ein Standbild mit nur einem Einzelbild. Der Konverter erstellt keine SVG-, GIF- oder animierten Dateien.

Häufige Probleme und ihre Lösung

• Ein transparentes Logo hat einen weißen oder schwarzen Kasten um sich herum. Es wurde wahrscheinlich als JPG oder als BMP ohne Transparenz gespeichert. Verwenden Sie stattdessen PNG oder WebP; siehe warum bei JPG die Transparenz verloren geht.
• Das PNG ist viel größer als das JPG, aus dem es entstanden ist. PNG speichert jedes Pixel exakt, einschließlich des Rauschens und der Kompressionsartefakte des JPGs, und die Umwandlung holt keine Details zurück, die das JPG bereits verloren hat. Verwenden Sie für Fotos WebP oder JPG.
• Ein Upload-Formular lehnt WebP oder AVIF ab. Manche Formulare akzeptieren nur JPG und PNG. Wandeln Sie Fotos in JPG und transparente Grafiken in PNG um. Das bloße Umbenennen der Dateiendung ändert das Format nicht.
• Die WebP-Datei ist kaum kleiner als das JPG oder sogar größer. Das ursprüngliche JPG war womöglich schon stark komprimiert, und die Qualität 0,92 des Konverters bewahrt viele Details, auch die Artefakte des JPGs selbst, deren Speicherung Bytes kostet. Ist die Datei so oder so zu groß, hat sie vielleicht noch die volle Kameragröße. Verkleinern Sie das Bild auf die Anzeigegröße, verwenden Sie dann „Bilder komprimieren“ und vergleichen Sie die Ergebnisse.
• Die Farben wirken blasser als im Original. Der Konverter zeichnet jedes Bild auf eine Canvas-Fläche des Browsers, die standardmäßig in sRGB arbeitet, und behält das ursprüngliche Farbprofil nicht bei. Fotos in einem größeren Farbraum wie Display P3 oder Adobe RGB können dadurch einige ihrer am stärksten gesättigten Farben verlieren, was vor allem auf Bildschirmen mit erweitertem Farbraum (Wide Gamut) auffällt. Exportieren Sie in Ihrer Bildbearbeitung eine sRGB-Kopie, prüfen Sie sie dort und konvertieren Sie diese Kopie.
• Ein HEIC-Foto vom Smartphone wird nicht angenommen. HEIC steht nicht auf der Liste des Konverters. Viele Smartphones können Fotos als JPG exportieren oder teilen; konvertieren Sie diese Kopie.

Was Sie vor dem Veröffentlichen prüfen sollten

• Öffnen Sie die Seite in zwei Browsern und auf einem Smartphone. Testen Sie bei <picture> auch den Fallback, indem Sie die AVIF- und WebP-Quellen vorübergehend entfernen.
• Vergleichen Sie die neue Datei in Originalgröße mit dem Original und achten Sie dabei auf Gesichter, Text und Farbverläufe.
• Prüfen Sie im Bereich „Netzwerk“ der Entwicklertools Ihres Browsers, welche Datei heruntergeladen wurde und wie groß sie ist.
• Wenn Ihre Website einen Dunkelmodus hat, sehen Sie sich transparente Bilder auf hellem und auf dunklem Hintergrund an.
• Bewahren Sie die Originale auf und konvertieren Sie von ihnen aus. Jedes erneute Speichern einer verlustbehafteten Datei fügt den alten Fehlern neue hinzu.

Häufige Fragen