Leitfaden zu Bilddateitypen und -formaten

Gängige Bilddateitypen

Die im Web am häufigsten verwendeten Bilddateiformate sind nachfolgend aufgeführt.

Die folgende Liste enthält Bildformate, die im Web vorkommen, für Webinhalte jedoch vermieden werden sollten (im Allgemeinen, weil sie entweder nicht von vielen Browsern unterstützt werden oder weil es bessere Alternativen gibt).

Details zu Bilddateitypen

Die folgenden Abschnitte bieten einen kurzen Überblick über die einzelnen Bilddateitypen, die von Webbrowsern unterstützt werden.

In den folgenden Tabellen bezeichnet Bits pro Komponente die Anzahl der Bits, mit denen jede Farbkomponente dargestellt wird. Eine RGB-Farbtiefe von 8 bedeutet beispielsweise, dass die roten, grünen und blauen Komponenten jeweils durch einen 8-Bit-Wert dargestellt werden. Die Bittiefe hingegen ist die Gesamtzahl der Bits, mit denen jedes Pixel im Speicher dargestellt wird.

APNG (Animated Portable Network Graphics)

APNG ist ein ursprünglich von Mozilla eingeführtes Dateiformat, das den PNG-Standard um Unterstützung für animierte Bilder erweitert. APNG ähnelt konzeptionell dem seit Jahrzehnten verwendeten Format für animierte GIFs, bietet jedoch mehr Möglichkeiten: Es unterstützt verschiedene Farbtiefen, während animierte GIFs nur 8-Bit-Indexfarben unterstützen.

APNG eignet sich ideal für einfache Animationen, die nicht mit anderen Aktivitäten oder einer Tonspur synchronisiert werden müssen, etwa Fortschrittsanzeigen, animierte Aktivitätsindikatoren und andere Animationssequenzen. APNG ist beispielsweise eines der unterstützten Formate zum Erstellen animierter Sticker für Apples iMessage-Anwendung (und die Nachrichten-App unter iOS). Es wird auch häufig für animierte Teile der Benutzeroberflächen von Webbrowsern verwendet.

AVIF-Bild

AV1 Image File Format (AVIF) ist ein leistungsfähiges, quelloffenes und lizenzgebührenfreies Dateiformat, das AV1-Bitstreams im High Efficiency Image File Format (HEIF)-Container kodiert.

AV1 ist ein Kodierungsformat, das ursprünglich für die Videoübertragung über das Internet entwickelt wurde. Das Format profitiert von den erheblichen Fortschritten bei der Videokodierung in den letzten Jahren und könnte möglicherweise auch von der damit verbundenen Unterstützung für hardwarebeschleunigte Darstellung profitieren. In manchen Fällen hat es jedoch auch Nachteile, da Video- und Bildkodierung unterschiedliche Anforderungen stellen.

Das Format bietet:

• Hervorragende verlustbehaftete Komprimierung im Vergleich zu JPG und PNG bei visuell ähnlicher Qualität (beispielsweise sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• AVIF bietet im Allgemeinen eine bessere Komprimierung als WebP – im Median 50 % gegenüber 30 % Komprimierung für dieselbe JPG-Bildsammlung (Quelle: Vergleich von AVIF und WebP (CTRL Blog)).
• Verlustfreie Komprimierung.
• Speicherung von Animationen und mehreren Bildern (ähnlich wie animierte GIFs, jedoch mit wesentlich besserer Komprimierung).
• Unterstützung für einen Alpha-Kanal (also für Transparenz).
• High Dynamic Range (HDR): Unterstützung für die Speicherung von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Bildbereichen darstellen können.
• Großer Farbraum: Unterstützung für Bilder, die ein breiteres Farbspektrum enthalten können.

AVIF unterstützt keine progressive Darstellung. Dateien müssen daher vollständig heruntergeladen werden, bevor sie angezeigt werden können. Dies hat häufig kaum Auswirkungen auf die tatsächliche Benutzererfahrung, da AVIF-Dateien wesentlich kleiner sind als entsprechende JPEG- oder PNG-Dateien und deshalb deutlich schneller heruntergeladen und angezeigt werden können. Bei größeren Dateien kann sich dies jedoch erheblich auswirken; in diesem Fall sollten Sie ein Format in Betracht ziehen, das progressive Darstellung unterstützt.

AVIF wird von Chrome, Edge, Opera, Safari und Firefox unterstützt. Da die Unterstützung noch nicht umfassend ist (und historisch noch nicht weit zurückreicht), sollten Sie mit dem <picture>-Element (oder einem anderen Ansatz) ein Ersatzbild im Format WebP, JPEG oder PNG bereitstellen.

BMP (Bitmap file)

Der Dateityp BMP (Bitmap image) ist vor allem auf Windows-Computern verbreitet und wird in Webanwendungen und -inhalten im Allgemeinen nur für Sonderfälle verwendet.

Theoretisch unterstützt BMP verschiedene interne Datendarstellungen. Die einfachste und am häufigsten verwendete Form einer BMP-Datei ist ein unkomprimiertes Rasterbild: Jedes Pixel belegt drei Bytes für seine roten, grünen und blauen Komponenten, und jede Zeile wird mit 0x00-Bytes auf eine Breite aufgefüllt, die ein Vielfaches von vier Bytes ist.

In der Spezifikation sind weitere Datendarstellungen definiert, die jedoch nicht weit verbreitet und häufig überhaupt nicht implementiert sind. Dazu gehören die Unterstützung verschiedener Bittiefen, Indexfarben und Alpha-Kanäle sowie unterschiedliche Pixelreihenfolgen (standardmäßig wird BMP von der linken unteren Ecke nach rechts und oben geschrieben, statt von der linken oberen Ecke nach rechts und unten).

Theoretisch werden mehrere Komprimierungsalgorithmen unterstützt; die Bilddaten können innerhalb der BMP-Datei auch im Format JPEG oder PNG gespeichert werden.

GIF (Graphics Interchange Format)

1987 führte der Online-Dienstanbieter CompuServe das Bilddateiformat GIF (Graphics Interchange Format) ein, um ein komprimiertes Grafikformat bereitzustellen, das alle Mitglieder seines Dienstes nutzen konnten. GIF verwendet den Lempel-Ziv-Welch-Algorithmus (LZW), um Grafiken mit 8-Bit-Indexfarben verlustfrei zu komprimieren. Zusammen mit XBM war GIF eines der ersten beiden von HTML unterstützten Grafikformate.

Jedes Pixel in einem GIF wird durch einen einzelnen 8-Bit-Wert dargestellt, der als Index in eine Palette mit 24-Bit-Farben dient (jeweils 8 Bit für Rot, Grün und Blau). Die Länge einer Farbtabelle ist immer eine Zweierpotenz (das heißt, jede Palette hat 2, 4, 8, 16, 32, 64 oder 256 Einträge). Um mehr als 255 oder 256 Farben zu simulieren, wird im Allgemeinen Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke mit jeweils eigener Farbpalette aneinanderzureihen, um Echtfarbenbilder zu erzeugen; in der Praxis geschieht dies jedoch selten.

Pixel sind deckend, sofern nicht ein bestimmter Farbindex als transparent festgelegt ist. Pixel mit diesem Farbwert sind dann vollständig transparent.

GIF unterstützt einfache Animationen: Auf einen ersten Frame in voller Größe folgt eine Reihe von Bildern, die jeweils die Bildbereiche enthalten, die sich von Frame zu Frame ändern.

GIF ist aufgrund seiner Einfachheit und Kompatibilität seit Jahrzehnten äußerst beliebt. Die Unterstützung für Animationen sorgte im Zeitalter sozialer Medien für einen erneuten Popularitätsschub, als animierte GIFs zunehmend für kurze „Videos“, Memes und andere einfache Animationssequenzen verwendet wurden.

Eine weitere beliebte Funktion von GIF ist die Unterstützung für Interlacing. Dabei werden Pixelzeilen in einer anderen Reihenfolge gespeichert, sodass teilweise empfangene Dateien bereits in geringerer Qualität angezeigt werden können. Dies ist besonders bei langsamen Netzwerkverbindungen nützlich.

GIF ist eine gute Wahl für einfache Bilder und Animationen, obwohl die Umwandlung von Echtfarbenbildern in GIF zu unbefriedigendem Dithering führen kann. Für moderne Inhalte sollten Sie normalerweise PNG für verlustfreie und indizierte Standbilder verwenden und APNG für verlustfreie Animationssequenzen in Betracht ziehen.

ICO (Microsoft Windows icon)

Das Dateiformat ICO (Microsoft Windows icon) wurde von Microsoft für Desktop-Symbole von Windows-Systemen entwickelt. Frühe Versionen des Internet Explorer führten jedoch die Möglichkeit ein, im Stammverzeichnis einer Website eine ICO-Datei namens favicon.ico bereitzustellen, um ein Favicon festzulegen – ein Symbol, das im Favoritenmenü und an anderen Stellen angezeigt wird, an denen eine symbolische Darstellung der Website nützlich ist.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem Symbol auflistet. Auf das Verzeichnis folgen die Daten der Symbole. Die Daten jedes Symbols können entweder ein BMP-Bild ohne Dateiheader oder ein vollständiges PNG-Bild (einschließlich Dateiheader) sein. Wenn Sie ICO-Dateien verwenden, sollten Sie das BMP-Format wählen, da die Unterstützung für PNG innerhalb von ICO-Dateien erst mit Windows Vista eingeführt wurde und möglicherweise nicht überall zuverlässig funktioniert.

JPEG (Joint Photographic Experts Group image)

Das Bildformat JPEG (üblicherweise „Dschei-peg“ ausgesprochen) ist derzeit das am weitesten verbreitete Format zur verlustbehafteten Komprimierung von Standbildern. Es eignet sich besonders für Fotografien; bei Inhalten, die scharfe Konturen erfordern, etwa Diagrammen oder Schaubildern, kann eine verlustbehaftete Komprimierung zu unbefriedigenden Ergebnissen führen.

JPEG ist streng genommen ein Datenformat für komprimierte Fotos und kein Dateityp. Die JFIF-Spezifikation (JPEG File Interchange Format) beschreibt das Format der Dateien, die wir als „JPEG“-Bilder kennen.

JPEG-XL-Bild

JPEG XL (JXL) ist ein lizenzgebührenfreies Rasterbildformat, das als ISO/IEC 18181 standardisiert ist. Es unterstützt verlustbehaftete und verlustfreie Komprimierung, progressive Dekodierung, hohe Bittiefen, große Farbräume, High Dynamic Range (HDR), Transparenz und Animationen. JPEG XL kann außerdem vorhandene JPEG-Bilder verlustfrei transkodieren, sodass sich die ursprüngliche JPEG-Datei wiederherstellen lässt.

Noch nicht alle Browser unterstützen das Format. Wenn Sie JPEG XL verwenden, stellen Sie mit dem <picture>-Element ein alternatives Format wie AVIF, WebP oder JPEG bereit.

PNG (Portable Network Graphics)

Das Bildformat PNG (ausgesprochen „Ping“) verwendet verlustfreie Komprimierung, unterstützt höhere Farbtiefen als GIF, ist effizienter und bietet vollständige Unterstützung für Alpha-Transparenz.

PNG wird breit unterstützt; alle großen Browser unterstützen seine Funktionen vollständig.

SVG (Scalable Vector Graphics)

SVG ist ein auf XML basierendes Vektorgrafikformat, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen festlegt. Diese erzeugen Formen und Linien und wenden Farben, Filter und Ähnliches an. SVG-Dateien eignen sich ideal für Diagramme, Symbole und andere Bilder, die in jeder Größe präzise dargestellt werden können. Daher ist SVG im modernen Webdesign für Benutzeroberflächenelemente beliebt.

SVG-Dateien sind Textdateien mit Quellcode, der bei der Interpretation das gewünschte Bild zeichnet. Dieses Beispiel definiert etwa eine Zeichenfläche mit einer anfänglichen Größe von 100 × 100 Einheiten und einer diagonal durch die Fläche verlaufenden Linie:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

SVG kann auf drei Arten in Webinhalten verwendet werden:

1. Ein <svg>-Element kann direkt im HTML stehen. Es kann SVG-Elemente enthalten, die das Bild zeichnen.
2. Ein SVG-Bild kann mit Elementen wie <iframe>, <object> und <embed> in HTML eingebettet werden.
3. SVG-Bilder können überall dort verwendet werden, wo auch andere Bildtypen verwendet werden können, beispielsweise mit dem <img>-Element oder der CSS-Eigenschaft background-image. Bei dieser Verwendung von SVG gelten jedoch zusätzliche Einschränkungen.

SVG ist eine ideale Wahl für Bilder, die sich durch eine Reihe von Zeichenbefehlen darstellen lassen. Das gilt insbesondere, wenn die Darstellungsgröße unbekannt ist oder variieren kann, da SVG stufenlos auf die gewünschte Größe skaliert. Für reine Bitmap- oder Fotografiebilder ist es im Allgemeinen nicht sinnvoll, obwohl Bitmap-Bilder in ein SVG eingebunden werden können.

TIFF (Tagged Image File Format)

TIFF ist ein Rastergrafik-Dateiformat, das zur Speicherung gescannter Fotos entwickelt wurde, aber auch andere Arten von Bildern enthalten kann. Es ist ein vergleichsweise „schwergewichtiges“ Format: TIFF-Dateien sind tendenziell größer als Bilder in anderen Formaten. Das liegt sowohl an den häufig enthaltenen Metadaten als auch daran, dass die meisten TIFF-Bilder entweder unkomprimiert sind oder Komprimierungsalgorithmen verwenden, die auch nach der Komprimierung recht große Dateien ergeben.

TIFF unterstützt verschiedene Komprimierungsverfahren. Am häufigsten werden jedoch die von Faxsoftware verwendeten Verfahren CCITT Group 4 (und bei älteren Faxsystemen Group 3) sowie LZW und die verlustbehaftete JPEG-Komprimierung eingesetzt.

Jeder Wert in einer TIFF-Datei wird durch seinen Tag (der angibt, um welche Art von Information es sich handelt, beispielsweise die Bildbreite) und seinen Typ (der das Speicherformat der Daten angibt) beschrieben. Darauf folgt die Länge des Werte-Arrays, das diesem Tag zugeordnet wird (alle Eigenschaften werden in Arrays gespeichert, auch einzelne Werte). Dadurch können für dieselben Eigenschaften unterschiedliche Datentypen verwendet werden. Die Breite eines Bildes, ImageWidth, wird beispielsweise unter dem Tag 0x0100 als Array mit einem Eintrag gespeichert. Mit Typ 3 (SHORT) wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Mit Typ 4 (LONG) wird die Breite als 32-Bit-Wert gespeichert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten. Dies kann beispielsweise zur Darstellung mehrseitiger Dokumente verwendet werden (etwa eines mehrseitigen gescannten Dokuments oder eines empfangenen Faxes). Software, die TIFF-Dateien liest, muss allerdings nur das erste Bild unterstützen.

TIFF unterstützt verschiedene Farbräume, nicht nur RGB. Dazu gehören CMYK, YCbCr und weitere. Daher eignet sich TIFF gut zur Speicherung von Bildern, die für Druck-, Film- oder Fernsehmedien bestimmt sind.

Abgesehen von Safari unterstützen Browser TIFF-Bilder in Webinhalten nicht nativ, sondern nur mithilfe spezieller Bibliotheken oder Browser-Erweiterungen. TIFF-Dateien werden deshalb nicht häufig zur Anzeige von Webinhalten verwendet. Allerdings werden oft herunterladbare TIFF-Dateien angeboten, wenn Fotos oder andere grafische Werke für die präzise Bearbeitung oder den Druck bereitgestellt werden.

WebP-Bild

WebP unterstützt verlustbehaftete Komprimierung mittels prädiktiver Kodierung auf Basis des Videocodecs VP8 sowie verlustfreie Komprimierung, bei der wiederkehrende Daten durch Verweise ersetzt werden. Verlustbehaftete WebP-Bilder sind bei visuell ähnlicher Qualität durchschnittlich 25–35 % kleiner als JPEG-Bilder. Verlustfreie WebP-Bilder sind normalerweise 26 % kleiner als dieselben Bilder im PNG-Format.

WebP unterstützt auch Animationen: In einer verlustbehafteten WebP-Datei werden die Bilddaten durch einen VP8-Bitstream dargestellt, der mehrere Frames enthalten kann. Verlustfreies WebP enthält den ANIM-Chunk, der die Animation beschreibt, und den ANMF-Chunk, der einen Frame einer Animationssequenz darstellt. Wiederholungen werden unterstützt.

WebP wird inzwischen von aktuellen Versionen der großen Webbrowser breit unterstützt, auch wenn die Unterstützung historisch nicht weit zurückreicht. Stellen Sie ein Ersatzbild im Format JPEG oder PNG bereit, beispielsweise mit dem <picture>-Element.

XBM (X Window System Bitmap file)

XBM-Dateien (X Bitmap) waren die ersten im Web unterstützten Bilddateien. Sie werden jedoch nicht mehr verwendet und sollten vermieden werden, da ihr Format potenzielle Sicherheitsrisiken birgt. Moderne Browser unterstützen XBM-Dateien seit vielen Jahren nicht mehr. Bei älteren Inhalten können Sie dennoch auf solche Dateien stoßen.

XBM verwendet einen C-Codeausschnitt, um den Bildinhalt als Byte-Array darzustellen. Jedes Bild besteht aus zwei bis vier #define-Direktiven, die die Breite und Höhe der Bitmap angeben (und optional den Hotspot, falls das Bild als Cursor gedacht ist). Darauf folgt ein Array vom Typ unsigned char, in dem jeder Wert acht monochrome 1-Bit-Pixel enthält.

Die Bildbreite muss ein Vielfaches von acht Pixeln sein. Der folgende Code stellt beispielsweise ein 8 × 8 Pixel großes XBM-Bild mit einem schwarz-weißen Schachbrettmuster dar:

#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};

Ein Bildformat auswählen

Bildformate werden üblicherweise anhand von Faktoren wie Komprimierung, Qualität, Umfang der Browser-Unterstützung und der Frage ausgewählt, ob Funktionen wie Transparenz oder Animation benötigt werden.

Bevorzugen Sie für Rasterbilder WebP oder AVIF, die im Allgemeinen eine bessere Komprimierung als PNG, JPEG und GIF bieten. Für große, hochauflösende Rasterbilder sollten Sie auch JPEG XL in Betracht ziehen. Die meisten Browser können solche Bilder progressiv darstellen, indem sie eine erste Version anzeigen, bevor das vollständige Bild heruntergeladen ist.

Wenn Sie Browser unterstützen müssen, die WebP, AVIF oder JPEG XL nicht darstellen können, verwenden Sie das Element <picture>, um ein PNG- oder JPEG-Ersatzbild bereitzustellen. Dies wird weiter unten unter Ersatzbilder bereitstellen gezeigt.

Die Komprimierung kann verlustbehaftet sein, wobei Bilddaten verworfen werden, um wesentlich kleinere Dateien zu erhalten, oder verlustfrei, wobei das Original exakt wiedergegeben wird. Bevorzugen Sie für Screenshots, Diagramme, Logos und Strichzeichnungen eine verlustfreie Kodierung, da Unschärfe und Farbsäume um Text und scharfe Kanten deutlich sichtbar sind. Fotografien und andere Bilder mit kontinuierlichen Tonwerten vertragen normalerweise eine verlustbehaftete Komprimierung, da die verlorenen Details schwerer zu erkennen sind. WebP und AVIF unterstützen sowohl verlustbehaftete als auch verlustfreie Komprimierung; die gewünschte Variante wählen Sie bei der Kodierung. JPEG ist verlustbehaftet und daher häufig ein gutes Ersatzformat für Fotografien. PNG ist dagegen verlustfrei und eignet sich besser für Screenshots, Diagramme und Strichzeichnungen. PNG ist auch das Ersatzformat für Bilder, die Transparenz benötigen, da JPEG keinen Alpha-Kanal hat.

Verwenden Sie für Diagramme, Schaubilder und andere Bilder, die in unterschiedlichen Größen präzise dargestellt werden müssen, SVG. Für die meisten Symbole gibt es Vektorgrafikversionen, denen Sie nach Möglichkeit den Vorzug geben sollten. Wenn nur Rasterversionen verfügbar sind, wählen Sie WebP, stellen Sie aber wie bei anderen Rasterbildern ein Ersatzformat bereit.

Ersatzbilder bereitstellen

Das übliche HTML-Element <img> unterstützt keine Ersatzbilder für Kompatibilitätszwecke, das Element <picture> hingegen schon. <picture> dient als Container für mehrere <source>-Elemente, die jeweils eine Bildversion in einem anderen Format oder für andere Medienbedingungen angeben. Hinzu kommt ein <img>-Element, das festlegt, wo das Bild angezeigt wird, und als Ersatz auf die Standardversion oder die „am besten kompatible“ Version verweist.

Wenn Sie beispielsweise ein Diagramm anzeigen, das sich am besten als SVG darstellen lässt, aber ein PNG- oder GIF-Ersatzbild anbieten möchten, könnten Sie Folgendes tun:

<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <source srcset="diagram.webp" type="image/webp" />
  <source srcset="diagram.png" type="image/png" />
  <img
    src="diagram.gif"
    width="620"
    height="540"
    alt="Diagram showing the data channels" />
</picture>

Sie können beliebig viele <source>-Elemente angeben, wobei normalerweise zwei oder drei ausreichen.

Siehe auch

• Leitfaden zu Medientypen und -formaten
• Web-Medientechnologien
• Leitfaden zu im Web verwendeten Videocodecs
• Die HTML-Elemente HTML <img> und <picture>
• Die CSS-Eigenschaft background-image
• Der Konstruktor Image() und die Schnittstelle HTMLImageElement