Leitfaden zu Bilddateitypen und -formaten

Häufige Bilddateitypen

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

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

Details zu Bilddateitypen

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

In den unten stehenden Tabellen bezeichnet der Begriff Bits pro Komponente 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. Die Bittiefe hingegen ist die Gesamtzahl der Bits, die verwendet werden, um jedes Pixel im Speicher darzustellen.

APNG (Animated Portable Network Graphics)

APNG ist ein von Mozilla ursprünglich eingeführtes Dateiformat, das den Standard PNG erweitert, um Unterstützung für animierte Bilder hinzuzufügen. APNG ähnelt konzeptionell dem seit Jahrzehnten verwendeten animierten GIF-Format, ist jedoch leistungsfähiger, da es eine Vielzahl von 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, etwa Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. APNG ist beispielsweise eines der unterstützten Formate zum Erstellen animierter Sticker für Apples iMessage-Anwendung (und die Anwendung „Nachrichten“ unter iOS). Sie werden auch häufig für die animierten Teile von Benutzeroberflächen in 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 einige Anwendungsfälle, da Video- und Bildkodierung unterschiedliche Anforderungen haben.

Das Format bietet:

• Ausgezeichnete verlustbehaftete Komprimierung im Vergleich zu JPG und PNG bei visuell ähnlichen Komprimierungsstufen (z. B. sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Im Allgemeinen bietet AVIF eine bessere Komprimierung als WebP — 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, jedoch mit wesentlich besserer Komprimierung)
• Unterstützung für Alphakanäle (d.h. für Transparenz).
• High Dynamic Range (HDR): Unterstützung zum Speichern von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Teilen des Bildes darstellen können.
• Großer 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 werden, und Sie sollten die Verwendung eines Formats 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 mithilfe von dem Element <picture> (oder einem anderen Ansatz) einen Fallback im Format WebP, JPEG oder PNG bereitstellen.

BMP (Bitmap-Datei)

Der Dateityp BMP (Bitmap-Bild) 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 eine Vielzahl interner 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. Zu diesen Funktionen gehören: Unterstützung für unterschiedliche Bittiefen, indizierte Farben, Alphakanäle und unterschiedliche Pixelreihenfolgen (standardmäßig wird BMP von der linken unteren Ecke nach rechts und oben geschrieben, nicht von der linken oberen 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 Algorithmus Lempel-Ziv-Welch (LZW), um 8-Bit-Grafiken mit 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 im Allgemeinen 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 deckend, 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 ersten Frame in voller Größe eine Reihe von Bildern bereitgestellt wird, die die Teile des Bildes darstellen, die sich mit jedem Frame ändern.

GIF war aufgrund seiner Einfachheit und Kompatibilität jahrzehntelang äußerst beliebt. Seine Animationsunterstützung führte in der Ära sozialer Medien zu einem Wiederaufleben seiner Popularität, 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 von Interlacing, bei dem Pixelzeilen außerhalb ihrer Reihenfolge gespeichert werden, sodass 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 Umwandlung von Echtfarbbildern in GIF zu unbefriedigendem Dithering führen kann. Moderne Inhalte sollten in der Regel PNG für verlustfreie und indizierte Standbilder verwenden und die Verwendung von APNG für verlustfreie Animationssequenzen erwägen.

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 bereitstellen kann, um ein Favicon anzugeben — 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 aufführt. 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 in 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 als „jay-peg“) ist derzeit das am weitesten verbreitete verlustbehaftete Komprimierungsformat für Standbilder. Es ist besonders für Fotografien nützlich; die Anwendung verlustbehafteter Komprimierung auf Inhalte, die Schärfe erfordern, etwa Diagramme oder Grafiken, kann unbefriedigende Ergebnisse erzeugen.

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

Die Browserunterstützung ist noch nicht universell. Stellen Sie bei der Verwendung von JPEG XL ein alternatives Format wie AVIF, WebP oder JPEG mit dem Element <picture> 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, und alle großen Browser bieten vollständige Unterstützung für seine Funktionen.

SVG (Scalable Vector Graphics)

SVG ist ein auf XML basierendes Vektorgrafikformat, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen festlegt, die Formen und Linien erzeugen, 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 beispielsweise 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 Element <svg> kann direkt im 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. Es ist möglich, SVG-Bilder überall dort zu verwenden, wo andere Bildtypen verwendet werden können, einschließlich mit dem Element <img>, der CSS-Eigenschaft background-image usw. Es gibt jedoch zusätzliche Einschränkungen, wenn SVG auf diese Weise verwendet wird.

SVG ist eine ideale Wahl für Bilder, die mithilfe einer Reihe von Zeichenbefehlen dargestellt werden können, 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 ausschließlich Bitmap- oder fotografische Bilder ist es im Allgemeinen nicht nützlich, obwohl Bitmap-Bilder in SVG eingebettet werden können.

TIFF (Tagged Image File Format)

TIFF ist ein Rastergrafik-Dateiformat, das zum Speichern gescannter Fotos entwickelt wurde, obwohl es jede Art von Bild sein kann. Es ist ein vergleichsweise „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 recht große Dateien hinterlassen.

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

Jeder Wert in einer TIFF-Datei wird durch sein Tag (das angibt, um welche Art von Information es sich handelt, etwa die Breite des Bildes) und seinen Typ (der das Format angibt, in dem die Daten gespeichert werden) angegeben, gefolgt von der Länge des Arrays von Werten, die diesem Tag zugewiesen werden sollen (alle Eigenschaften werden in Arrays gespeichert, selbst bei einzelnen Werten). Dadurch können verschiedene Datentypen für dieselben Eigenschaften verwendet werden. Beispielsweise wird die Breite eines Bildes, ImageWidth, unter Verwendung des Tags 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:

Bei Angabe von 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 jedoch nur das erste Bild unterstützen.

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

Abgesehen von Safari unterstützen Browser TIFF-Bilder in Webinhalten nicht nativ, außer durch die Verwendung spezieller Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht breit zur Anzeige von Webinhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke für präzise Bearbeitung oder Druck verteilt werden.

WebP-Bild

WebP unterstützt verlustbehaftete Komprimierung durch prädiktive Kodierung auf Grundlage des VP8-Video-Codecs sowie verlustfreie Komprimierung, die Ersetzungen für wiederholte 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 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 Chunk ANIM, der die Animation beschreibt, und den Chunk ANMF, der einen Frame einer Animationssequenz darstellt. Wiederholungen werden unterstützt.

WebP wird inzwischen von den neuesten Versionen großer Webbrowser breit unterstützt, hat jedoch keine tiefe historische Unterstützung. Stellen Sie einen Fallback im Format JPEG oder PNG bereit, beispielsweise mit dem Element <picture>.

XBM (X Window System Bitmap-Datei)

XBM-Dateien (X Bitmap) waren die ersten im Web unterstützten Dateien, werden aber nicht mehr verwendet und sollten aufgrund potenzieller Sicherheitsbedenken ihres Formats vermieden werden. 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 ein C-Code-Snippet, um den Inhalt des Bildes als Array von Bytes darzustellen. Jedes Bild besteht aus 2 bis 4 #define-Direktiven, die die Breite und Höhe der Bitmap bereitstellen (und optional den Hotspot, wenn das Bild als Cursor gestaltet 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 XBM-Bild mit 8 mal 8 Pixeln 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 danach 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 für große Rasterbilder mit hoher Auflösung auch JPEG XL in Betracht ziehen. Die meisten Browser können sie 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 unten unter Bereitstellen von Bild-Fallbacks gezeigt.

Komprimierung kann verlustbehaftet sein, wobei Bilddaten verworfen werden, um wesentlich kleinere Dateien zu erhalten, oder verlustfrei, wobei das Original exakt reproduziert wird. Bevorzugen Sie für Screenshots, Diagramme, Logos und Strichzeichnungen eine verlustfreie Kodierung, da Unschärfen und farbige Säume um Text und scharfe Kanten sehr deutlich sichtbar sind. Fotografien und andere Bilder mit kontinuierlichen Farbtönen vertragen normalerweise verlustbehaftete Komprimierung, da die verworfenen Details schwerer zu erkennen sind. WebP und AVIF unterstützen sowohl verlustbehaftete als auch verlustfreie Komprimierung als Einstellung, die Sie beim Kodieren wählen. JPEG ist verlustbehaftet und daher oft ein gutes Fallback-Format für Fotografien, während PNG verlustfrei ist und sich deshalb besser für Screenshots, Diagramme und Strichzeichnungen eignet. PNG ist außerdem der Fallback für jedes Bild, das Transparenz benötigt, da JPEG keinen Alphakanal besitzt.

Verwenden Sie für Diagramme, Grafiken und andere Bilder, die in unterschiedlichen Größen präzise gezeichnet werden müssen, SVG. Die meisten Symbole haben Vektorgrafikversionen, und Sie sollten die SVG-Version wann immer möglich priorisieren. Wenn 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> dies. <picture> wird als Container für mehrere Elemente <source> verwendet, die jeweils eine Version des Bildes in einem anderen Format oder unter anderen Medienbedingungen angeben, sowie für ein Element <img>, das festlegt, wo das Bild angezeigt wird und welches der Fallback zur Standard- oder „kompatibelsten“ Version ist.

Wenn Sie beispielsweise ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, aber einen Fallback zu einem PNG oder GIF 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>s angeben, normalerweise benötigen Sie jedoch nur 2 oder 3.

Siehe auch

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