Leitfaden zu Bilddateitypen und -formaten

Gängige Bilddateitypen

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

Die folgende Liste umfasst Bildformate, die im Web vorkommen, aber für Webinhalte vermieden werden sollten (im Allgemeinen, weil sie entweder keine breite Browserunterstützung haben oder bessere Alternativen verfügbar sind).

Details zu Bilddateitypen

Die folgenden Abschnitte bieten einen kurzen Überblick über jeden der von Webbrowsern unterstützten Bilddateitypen.

In den folgenden Tabellen bezieht sich der Begriff Bits pro Komponente auf die Anzahl der Bits, die zur Darstellung jeder Farbkomponente verwendet werden. Eine RGB-Farbtiefe von 8 bedeutet beispielsweise, dass jede der roten, grünen und blauen Komponenten durch einen 8-Bit-Wert dargestellt wird. Bittiefe hingegen ist die Gesamtzahl der Bits, die verwendet werden, um jedes Pixel im Speicher darzustellen.

APNG (Animated Portable Network Graphics)

APNG ist ein ursprünglich von Mozilla eingeführtes Dateiformat, das den PNG-Standard erweitert, um Unterstützung für animierte Bilder hinzuzufügen. Konzeptionell ähnelt es dem seit Jahrzehnten verwendeten animierten GIF-Format, APNG ist jedoch leistungsfähiger, da es verschiedene Farbtiefen unterstützt, während animiertes GIF nur 8-Bit-indizierte Farben unterstützt.

APNG ist ideal für einfache Animationen, die nicht mit anderen Aktivitäten oder einer Tonspur synchronisiert werden müssen, beispielsweise Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. APNG ist beispielsweise eines der unterstützten Formate beim Erstellen animierter Sticker für Apples iMessage-Anwendung (und die Nachrichten-App unter iOS). Sie werden außerdem häufig für die animierten 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 Containerformat High Efficiency Image File Format (HEIF) kodiert.

AV1 ist ein Kodierungsformat, das ursprünglich für die Videoübertragung über das Internet entwickelt wurde. Das Format profitiert von den bedeutenden Fortschritten bei der Videokodierung in den letzten Jahren und kann möglicherweise von der damit verbundenen Unterstützung für Hardware-Rendering profitieren. Es hat jedoch auch Nachteile für bestimmte Anwendungsfälle, da die Video- und Bildkodierung unterschiedliche Anforderungen hat.

Das Format bietet:

• Ausgezeichnete verlustbehaftete Komprimierung im Vergleich zu JPG und PNG bei visuell ähnlichen Komprimierungsstufen (beispielsweise sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Im Allgemeinen bietet AVIF eine bessere Komprimierung als WebP — eine mediane Komprimierung von 50 % gegenüber 30 % für denselben JPG-Satz (Quelle: AVIF-WebP-Vergleich (CTRL Blog)).
• Verlustfreie Komprimierung.
• Speicherung von Animationen/mehreren Bildern (ähnlich wie animierte GIFs, aber mit wesentlich besserer Komprimierung)
• Unterstützung für Alpha-Kanäle (d.h. für Transparenz).
• High Dynamic Range (HDR): Unterstützung für das Speichern von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Teilen des Bildes darstellen können.
• Breiter Farbraum: Unterstützung für Bilder, die einen größeren Farbbereich enthalten können.

AVIF unterstützt kein progressives Rendering, daher müssen Dateien vollständig heruntergeladen werden, bevor sie angezeigt werden können. Dies hat oft nur geringe Auswirkungen auf die tatsächliche Benutzererfahrung, da AVIF-Dateien viel kleiner als die entsprechenden JPEG- oder PNG-Dateien sind und daher viel schneller heruntergeladen und angezeigt werden können. Bei größeren Dateigrößen kann die Auswirkung erheblich sein; Sie sollten dann ein Format in Betracht ziehen, das progressives Rendering unterstützt.

AVIF wird von Chrome, Edge, Opera, Safari und Firefox unterstützt. Da die Unterstützung noch nicht umfassend ist (und wenig historische Tiefe hat), sollten Sie mit dem <picture>-Element (oder einem anderen Ansatz) einen Fallback im Format WebP, JPEG oder PNG bereitstellen.

BMP (Bitmap-Datei)

Der Dateityp BMP (Bitmap image) ist auf Windows-Computern am weitesten verbreitet und wird im Allgemeinen nur für Sonderfälle in Web-Apps und -Inhalten verwendet.

BMP unterstützt theoretisch verschiedene interne Datendarstellungen. Die einfachste und am häufigsten verwendete Form der BMP-Datei ist ein unkomprimiertes Rasterbild, bei dem jedes Pixel 3 Bytes für seine roten, grünen und blauen Komponenten belegt und jede Zeile mit 0x00-Bytes auf ein Vielfaches von 4 Bytes Breite aufgefüllt wird.

Obwohl andere Datendarstellungen in der Spezifikation definiert sind, werden sie nicht häufig verwendet und oft überhaupt nicht implementiert. Diese Funktionen umfassen: Unterstützung für unterschiedliche Bittiefen, indizierte Farben, Alpha-Kanäle und unterschiedliche Pixelreihenfolgen (standardmäßig wird BMP von der unteren linken Ecke nach rechts und oben geschrieben, statt von der oberen linken Ecke nach rechts und unten).

Theoretisch werden mehrere Komprimierungsalgorithmen unterstützt, und die Bilddaten können auch im Format JPEG oder PNG innerhalb der BMP-Datei 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 verwenden konnten. GIF verwendet den Lempel-Ziv-Welch-Algorithmus (LZW), um Grafiken mit 8-Bit-indizierten Farben verlustfrei zu komprimieren. GIF war neben XBM 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 von 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 üblicherweise Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke mit jeweils eigener Farbpalette zu kacheln, um Echtfarbbilder zu erstellen, in der Praxis wird dies jedoch selten getan.

Pixel sind undurchsichtig, es sei denn, ein bestimmter Farbindex wird als transparent festgelegt; in diesem Fall sind Pixel mit diesem Farbwert vollständig transparent.

GIF unterstützt einfache Animationen, bei denen nach einem anfänglichen Frame in voller Größe eine Reihe von Bildern bereitgestellt wird, die die Teile des Bildes widerspiegeln, die sich mit jedem Frame ändern.

GIF war aufgrund seiner Einfachheit und Kompatibilität jahrzehntelang äußerst beliebt. Die Animationsunterstützung führte im Zeitalter sozialer Medien zu einem Wiederaufleben seiner Popularität, als animierte GIFs häufig für kurze „Videos“, Memes und andere einfache Animationssequenzen verwendet wurden.

Eine weitere beliebte Funktion von GIF ist die Unterstützung für Interlacing, bei dem Pixelzeilen außerhalb der Reihenfolge gespeichert werden, damit teilweise empfangene Dateien in niedrigerer Qualität angezeigt werden können. Dies ist besonders nützlich bei langsamen Netzwerkverbindungen.

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

ICO (Microsoft-Windows-Symbol)

Das Dateiformat ICO (Microsoft-Windows-Symbol) wurde von Microsoft für Desktop-Symbole von Windows-Systemen entwickelt. Frühe Versionen von Internet Explorer führten jedoch die Möglichkeit ein, dass eine Website eine ICO-Datei namens favicon.ico im Stammverzeichnis der Website bereitstellt, 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 für die Symbole. Die Daten jedes Symbols können entweder ein BMP-Bild ohne Dateikopf oder ein vollständiges PNG-Bild (einschließlich Dateikopf) sein. Wenn Sie ICO-Dateien verwenden, sollten Sie das BMP-Format verwenden, da die Unterstützung für PNG innerhalb von ICO-Dateien erst mit Windows Vista hinzugefügt wurde und möglicherweise nicht gut unterstützt wird.

JPEG (Joint Photographic Experts Group image)

Das Bildformat JPEG (typischerweise ausgesprochen „jay-peg“) ist derzeit das am weitesten verbreitete verlustbehaftete Komprimierungsformat für Standbilder. Es ist besonders für Fotografien nützlich; das Anwenden verlustbehafteter Komprimierung auf Inhalte, die Schärfe erfordern, wie Diagramme oder Charts, kann zu unbefriedigenden Ergebnissen führen.

JPEG ist eigentlich 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 betrachten.

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, breite Farbräume, High Dynamic Range (HDR), Transparenz und Animationen. JPEG XL kann außerdem vorhandene JPEG-Bilder verlustfrei transkodieren, sodass die ursprüngliche JPEG-Datei rekonstruiert werden kann.

Die Browserunterstützung ist noch nicht universell. 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 dabei höhere Farbtiefen als GIF, ist effizienter und bietet vollständige Unterstützung für Alpha-Transparenz.

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

SVG (Scalable Vector Graphics)

SVG ist ein auf XML basierendes Vektorgrafikformat, das den Inhalt eines Bildes als Satz von Zeichenbefehlen angibt, die Formen und Linien erstellen, Farben und Filter anwenden usw. SVG-Dateien sind ideal für Diagramme, Symbole und andere Bilder, die in jeder Größe präzise gezeichnet werden können. Daher ist SVG für Benutzeroberflächenelemente im modernen Webdesign beliebt.

SVG-Dateien sind Textdateien mit Quellcode, der beim Interpretieren das gewünschte Bild zeichnet. Dieses Beispiel definiert etwa einen Zeichenbereich mit einer anfänglichen Größe von 100 mal 100 Einheiten, der eine diagonal durch das Feld gezeichnete Linie enthält:

<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 innerhalb des HTML erscheinen. Es kann SVG-Elemente enthalten, um das Bild zu 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 andere Bildtypen verwendet werden können, einschließlich mit dem <img>-Element, der CSS-Eigenschaft background-image usw. Wenn SVG auf diese Weise verwendet wird, gelten jedoch zusätzliche Einschränkungen.

SVG ist eine ideale Wahl für Bilder, die sich mithilfe einer Reihe von Zeichenbefehlen darstellen lassen, insbesondere wenn die Größe, in der das Bild gerendert wird, unbekannt ist oder variieren kann, da SVG sanft auf die gewünschte Größe skaliert. Für reine Bitmap- oder fotografische Bilder ist es im Allgemeinen nicht nützlich, obwohl es möglich ist, Bitmap-Bilder in ein SVG einzubetten.

TIFF (Tagged Image File Format)

TIFF ist ein Rastergrafikdateiformat, das zum Speichern gescannter Fotos entwickelt wurde, obwohl es jede Art von Bild enthalten kann. Es ist ein eher „schweres“ Format, da TIFF-Dateien tendenziell größer als Bilder in anderen Formaten sind. Dies liegt an den häufig enthaltenen Metadaten sowie daran, dass die meisten TIFF-Bilder entweder unkomprimiert sind oder Komprimierungsalgorithmen verwenden, die auch nach der Komprimierung noch recht große Dateien hinterlassen.

TIFF unterstützt verschiedene Komprimierungsmethoden, am häufigsten verwendet werden jedoch die Komprimierungssysteme CCITT Group 4 (und für ältere Faxsysteme Group 3), die von Faxsoftware verwendet werden, sowie LZW und verlustbehaftete JPEG-Komprimierung.

Jeder Wert in einer TIFF-Datei wird mit seinem Tag (der angibt, um welche Art von Information es sich handelt, beispielsweise die Breite des Bildes) und seinem Typ (der das Speicherformat der Daten angibt) spezifiziert, gefolgt von der Länge des Wertarrays, das diesem Tag zugewiesen werden soll (alle Eigenschaften werden als Arrays gespeichert, auch einzelne Werte). Dadurch können unterschiedliche Datentypen für dieselben Eigenschaften verwendet werden. Beispielsweise wird die Breite eines Bildes, ImageWidth, mit dem Tag 0x0100 gespeichert und ist ein Array mit einem Eintrag. Durch Angabe von Typ 3 (SHORT) wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Die Angabe von Typ 4 (LONG) speichert die Breite als 32-Bit-Wert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten; dies kann beispielsweise verwendet werden, um mehrseitige Dokumente darzustellen (etwa ein mehrseitig gescanntes Dokument oder ein empfangenes Fax). Software, die TIFF-Dateien liest, muss jedoch nur das erste Bild unterstützen.

TIFF unterstützt nicht nur RGB, sondern verschiedene Farbräume. Dazu gehören CMYK, YCbCr und andere, wodurch TIFF eine gute Wahl für das Speichern von Bildern ist, die für Druck-, Film- oder Fernsehmedien bestimmt sind.

Abgesehen von Safari unterstützen Browser TIFF-Bilder in Webinhalten nicht nativ, außer durch spezielle Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht breit zur Anzeige von Webinhalten verwendet, aber beim Verteilen von Fotos und anderen Kunstwerken für präzise Bearbeitung oder Druck ist es üblich, herunterladbare TIFF-Dateien bereitzustellen.

WebP-Bild

WebP unterstützt verlustbehaftete Komprimierung über prädiktive Kodierung auf Grundlage des VP8-Video-Codecs sowie verlustfreie Komprimierung, die Ersetzungen für sich wiederholende Daten verwendet. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35 % kleiner als JPEG-Bilder mit visuell ähnlichen Komprimierungsstufen. Verlustfreie WebP-Bilder sind typischerweise 26 % kleiner als dieselben Bilder im PNG-Format.

WebP unterstützt außerdem 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. Schleifen werden unterstützt.

WebP wird inzwischen von den neuesten Versionen der wichtigsten Webbrowser breit unterstützt, verfügt jedoch nicht über eine tiefgehende historische Unterstützung. Stellen Sie einen Fallback im Format JPEG oder PNG bereit, beispielsweise mit dem <picture>-Element.

XBM (X Window System Bitmap-Datei)

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

XBM verwendet einen C-Codeausschnitt, um den Inhalt des Bildes als Byte-Array darzustellen. Jedes Bild besteht aus 2 bis 4 #define-Direktiven, die die Breite und Höhe der Bitmap bereitstellen (und optional den Hotspot, falls das Bild als Cursor konzipiert ist), gefolgt von einem Array aus unsigned char, wobei jeder Wert 8 monochrome 1-Bit-Pixel enthält.

Das Bild muss eine Breite haben, die ein Vielfaches von 8 Pixeln ist. Der folgende Code stellt beispielsweise ein 8 Pixel mal 8 Pixel großes XBM-Bild dar, dessen Pixel ein schwarz-weißes Schachbrettmuster bilden:

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

Auswahl eines Bildformats

Bildformate werden üblicherweise anhand von Faktoren wie Komprimierung, Qualität, Breite und Tiefe der Browserunterstützung sowie 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. Sie sollten außerdem JPEG XL für große Rasterbilder mit hoher Auflösung in Betracht ziehen. Die meisten Browser können diese progressiv rendern, indem sie eine erste Version anzeigen, bevor das vollständige Bild heruntergeladen wurde.

Wenn Sie Browser unterstützen müssen, die WebP, AVIF oder JPEG XL nicht zulassen, verwenden Sie das Element <picture>, um einen PNG- oder JPEG-Fallback bereitzustellen. Dies wird weiter unten unter Bereitstellen von Bild-Fallbacks gezeigt.

Komprimierung kann verlustbehaftet sein und Bilddaten verwerfen, um wesentlich kleinere Dateien zu erzielen, oder verlustfrei, um das Original exakt wiederzugeben. Bevorzugen Sie für Screenshots, Diagramme, Logos und Strichzeichnungen eine verlustfreie Kodierung, da Unschärfe und farbige Ränder um Text und scharfe Kanten sehr sichtbar sind. Fotografien und andere Bilder mit kontinuierlichen Tonwerten vertragen in der Regel verlustbehaftete Komprimierung, weil die verworfenen Details schwerer zu erkennen sind. WebP und AVIF unterstützen sowohl verlustbehaftete als auch verlustfreie Komprimierung als eine Einstellung, die Sie beim Kodieren auswählen. JPEG ist verlustbehaftet und daher häufig ein gutes Fallback-Format für Fotografien, während PNG verlustfrei ist und sich dadurch besser für Screenshots, Diagramme und Strichzeichnungen eignet. PNG ist außerdem der Fallback für alle Bilder, die Transparenz benötigen, da JPEG keinen Alpha-Kanal besitzt.

Verwenden Sie für Diagramme, Charts und andere Bilder, die in unterschiedlichen Größen präzise gezeichnet werden müssen, SVG. Die meisten Symbole haben Vektorgrafikversionen, und Sie sollten nach Möglichkeit die SVG-Version priorisieren. Falls nur Rasterversionen verfügbar sind, wählen Sie WebP, stellen Sie jedoch wie bei anderen Rasterbildern einen Fallback bereit.

Bereitstellen von Bild-Fallbacks

Während das Standard-HTML-Element <img> keine Kompatibilitäts-Fallbacks für Bilder unterstützt, unterstützt das Element <picture> diese. <picture> wird als Wrapper für eine Reihe von <source>-Elementen verwendet, von denen jedes eine Version des Bildes in einem anderen Format oder unter unterschiedlichen Medienbedingungen angibt, sowie für ein <img>-Element, das festlegt, wo das Bild angezeigt wird, und den Fallback auf die Standardversion oder die „kompatibelste“ Version definiert.

Wenn Sie beispielsweise ein Diagramm anzeigen, das am besten als SVG dargestellt wird, aber einen Fallback auf eine PNG- oder GIF-Version des Diagramms anbieten möchten, würden Sie etwa 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, obwohl normalerweise 2 oder 3 ausreichen.

Siehe auch

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