Leitfaden für Bilddateitypen und -formate

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

Die folgende Liste enthält Bildformate, die im Web auftreten, aber für Webinhalte vermieden werden sollten (normalerweise, weil sie entweder keine breite Browser-Unterstützung haben oder weil es bessere Alternativen gibt).

Die folgenden Abschnitte bieten einen kurzen Überblick über die von Web-Browsern unterstützten Bilddateitypen.

In den unten stehenden Tabellen bezieht sich der Begriff Bits pro Komponente auf die Anzahl der Bits, die zur Darstellung jeder Farbkomponente verwendet werden. Zum Beispiel zeigt eine RGB-Farbtiefe von 8 an, dass jede der roten, grünen und blauen Komponenten durch einen 8-Bit-Wert dargestellt wird. Bit-Tiefe hingegen ist die Gesamtzahl der Bits, die verwendet werden, um jedes Pixel im Speicher zu repräsentieren.

APNG ist ein Dateiformat, das erstmals von Mozilla eingeführt wurde und den PNG-Standard erweitert, um die Unterstützung für animierte Bilder hinzuzufügen. Konzeptionell ähnlich dem animierten GIF-Format, das seit Jahrzehnten verwendet wird, ist APNG leistungsfähiger, da es eine Vielzahl von Farbtiefen unterstützt, während animierte GIFs nur 8-Bit indizierte Farben unterstützen.

APNG ist ideal für einfache Animationen, die nicht mit anderen Aktivitäten oder einer Tonspur synchronisiert werden müssen, wie Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. Ein Beispiel ist APNG eines der unterstützten Formate beim Erstellen animierter Sticker für Apples iMessage-Anwendung (sowie die Nachrichten-App auf iOS). Sie werden auch häufig für die animierten Teile der Benutzeroberflächen von Webbrowsern verwendet.

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

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

Das Format bietet:

• Hervorragende verlustbehaftete Kompression im Vergleich zu JPG und PNG bei visuell ähnlichen Kompressionsstufen (z.B. sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Im Allgemeinen hat AVIF eine bessere Kompression als WebP — mediane 50 % vs. 30 % Kompression für denselben JPG-Satz (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Kompression.
• Animation/Multi-Bild-Speicher (ähnlich wie animierte GIFs, aber mit deutlich besserer Kompression)
• Unterstützung des Alphakanals (d.h. für Transparenz).
• High Dynamic Range (HDR): Unterstützung für die Speicherung von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Teilen des Bildes darstellen können.
• Großer Farbumfang: Unterstützung für Bilder, die eine größere Farbpalette 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 häufig wenig Einfluss auf das Benutzererlebnis in der realen Welt, da AVIF-Dateien viel kleiner sind als die entsprechenden JPEG- oder PNG-Dateien und daher viel schneller heruntergeladen und angezeigt werden können. Bei größeren Dateigrößen kann die Auswirkung signifikant werden, und Sie sollten in Betracht ziehen, ein Format zu verwenden, das progressives Rendering unterstützt.

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

Der BMP-Dateityp (Bitmap-Bild) ist vor allem auf Windows-Computern verbreitet und wird in Web-Anwendungen und -Inhalten im Allgemeinen nur für Spezialfälle verwendet.

BMP unterstützt theoretisch eine Vielzahl von internen Datenrepräsentationen. Die einfachste und am häufigsten verwendete Form von BMP-Dateien ist ein unkomprimiertes Rasterbild, bei dem jedes Pixel 3 Bytes einnimmt, die seine roten, grünen und blauen Komponenten darstellen, und jede Zeile mit 0x00 Bytes auf ein Vielfaches von 4 Bytes aufgefüllt wird.

Obwohl andere Datenrepräsentationen in der Spezifikation definiert sind, werden sie nicht weit verbreitet verwendet und oft vollständig nicht implementiert. Diese Merkmale umfassen: Unterstützung für verschiedene Bit-Tiefen, indizierte Farben, Alphakanäle und unterschiedliche Pixelanordnungen (standardmäßig wird BMP von der unteren linken Ecke zur rechten und nach oben geschrieben, anstatt von der oberen linken Ecke zur rechten und nach unten).

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

Im Jahr 1987 führte der Online-Dienstanbieter CompuServe das**GIF** (Graphics Interchange Format) Bilddateiformat ein, um ein komprimiertes Grafikformat bereitzustellen, das alle Mitglieder ihres Dienstes nutzen konnten. GIF verwendet den Lempel-Ziv-Welch (LZW) Algorithmus, um 8-Bit-indizierte Farbdiagramme verlustfrei zu komprimieren. GIF war eines der ersten beiden Grafikformate, die von HTML unterstützt wurden, zusammen mit XBM.

Jedes Pixel in einem GIF wird durch einen einzigen 8-Bit-Wert dargestellt, der als Index in eine Palette von 24-Bit-Farben (jeweils 8 Bit für Rot, Grün und Blau) dient. Die Länge einer Farbpalette ist immer eine Potenz von 2 (d.h. 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 zu kacheln, die jeweils ihre eigene Farbpalette haben, um Echtfarbbilder zu erzeugen, aber in der Praxis wird dies selten getan.

Pixel sind undurchsichtig, es sei denn, ein bestimmter Farbindex wird als transparent bezeichnet. In diesem Fall sind Pixel mit dieser Farbe vollständig transparent.

GIF unterstützt einfache Animationen. Nach einem ersten Vollbild kommen eine Reihe von Bildern, die die Teile des Bildes darstellen, die sich mit jedem Bild ändern.

GIF ist seit Jahrzehnten äußerst populär, aufgrund seiner Einfachheit und Kompatibilität. Seine Animationen sorgen für eine Wiederbelebung in der Ära der sozialen Medien, als animierte GIFs weithin für kurze "Videos", Memes und andere einfache Animationssequenzen verwendet wurden.

Ein weiteres beliebtes Merkmal von GIF ist die Unterstützung für Interlacing, wo Pixelreihen in nicht chronologischer Reihenfolge gespeichert werden, sodass teilweise empfangene Dateien in geringerer Qualität angezeigt werden können. Dies ist besonders nützlich, wenn Netzwerkverbindungen langsam sind.

GIF ist eine gute Wahl für einfache Bilder und Animationen, obwohl das Konvertieren von Vollfarbbildern in GIF zu unbefriedigendem Dithering führen kann. Typischerweise sollte moderner Inhalt PNG für verlustfreie und indizierte Standbilder verwenden und in Erwägung ziehen, APNG für verlustfreie Animationssequenzen zu verwenden.

Das ICO-Dateiformat (Microsoft Windows Symbol) wurde von Microsoft für Desktopsymbole von Windows-Systemen entwickelt. Frühere Versionen des Internet Explorer führten jedoch die Möglichkeit ein, dass eine Website eine ICO-Datei namens favicon.ico im Stammverzeichnis einer Website bereitstellt, um ein favicon zu spezifizieren — ein Symbol, das im Favoritenmenü und an anderen Orten, an denen eine symbolische Darstellung der Website nützlich wäre, angezeigt wird.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem auflistet. Nach dem Verzeichnis folgt der Code für die Symbole. Die Daten jedes Symbols können entweder ein BMP-Bild ohne Dateikopf oder ein komplettes 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.

Das JPEG-Bildformat (gewöhnlich als "jay-peg" ausgesprochen) ist derzeit das am weitesten verbreitete verlustbehaftete Kompressionsformat für Standbilder. Es ist besonders nützlich für Fotografien; die Anwendung verlustbehafteter Kompression auf Inhalte, die Schärfe erfordern, wie Diagramme oder Diagrammbilder, kann zu unbefriedigenden Ergebnissen führen.

JPEG ist eigentlich ein Datenformat für komprimierte Fotos, statt eines Dateityps. Die JFIF (JPEG File Interchange Format) Spezifikation beschreibt das Format der Dateien, die wir als "JPEG" Bilder betrachten.

Das PNG-Bildformat (ausgesprochen "ping") verwendet verlustfreie Kompression, während es höhere Farbtiefen als GIF unterstützt und effizienter ist, sowie vollständige Alpha-Transparenzunterstützung bietet.

PNG wird breit unterstützt, und alle großen Browser bieten volle Unterstützung für seine Funktionen.

SVG ist ein XML-basiertes Vektorgrafiken Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen definiert, die Formen, Linien, Farben, Filter und so weiter erstellen. SVG-Dateien sind ideal für Diagramme, Symbole und andere Bilder, die in jeder Größe genau gezeichnet werden können. Aus diesem Grund ist SVG in modernen Webdesigns für Benutzeroberflächenelemente beliebt.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der beim Interpretieren das gewünschte Bild zeichnet. Zum Beispiel definiert dieses Beispiel einen Zeichnungsbereich mit anfänglicher Größe von 100 x 100 Einheiten mit einer sich diagonal durch die Box ziehenden 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 Weisen in Web-Inhalten verwendet werden:

1. Ein <svg>-Element kann direkt im HTML erscheinen. Es kann SVG-Elemente enthalten, um das Bild zu zeichnen.
2. Ein SVG-Bild kann in HTML mit Elementen wie <iframe>, <object> und <embed> eingebettet werden.
3. Es ist möglich, SVG-Bilder überall zu verwenden, wo auch andere Bildtypen verwendet werden können, einschließlich mit dem <img>-Element, der background-image CSS-Eigenschaft und so weiter. 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 wird. Es ist normalerweise nicht nützlich für streng Bitmap- oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder in ein SVG aufzunehmen.

TIFF ist ein Rastergrafik-Dateiformat, das erstellt wurde, um gescannte Fotos zu speichern, obwohl es jedes beliebige Bild sein kann. Es ist ein etwas "schweres" Format, da TIFF-Dateien tendenziell größer sind als Bilder in anderen Formaten. Dies liegt an den oft enthaltenen Metadaten sowie daran, dass die meisten TIFF-Bilder entweder unkomprimiert oder Komprimierungsalgorithmen verwenden, die immer noch ziemlich große Dateien nach der Kompression hinterlassen.

TIFF unterstützt eine Vielzahl von Kompressionsmethoden, aber die am häufigsten verwendeten sind die CCITT Group 4 (und, für ältere Faxsysteme, Group 3) Kompressionssysteme, die von Faxsoftware verwendet werden, sowie LZW und verlustbehaftete JPEG-Kompression.

Jeder Wert in einer TIFF-Datei wird mithilfe seines Tags (zeigt an, um welche Art von Information es sich handelt, wie die Breite des Bildes) und seines Typs (zeigt das Format an, in dem die Daten gespeichert sind) angegeben, gefolgt von der Länge des Arrays von Werten, die diesem Tag zugewiesen sind (alle Eigenschaften werden in Arrays gespeichert, auch bei einzelnen Werten). Dies ermöglicht verschiedene Datentypen, die für dieselben Eigenschaften verwendet werden. Zum Beispiel wird die Breite eines Bildes, ImageWidth, unter Verwendung des Tags 0x0100 gespeichert und ist ein Eintrag-Array. Durch die 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 verwendet werden, um mehrseitige Dokumente zu repräsentieren (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax). Software, die TIFF-Dateien liest, muss jedoch nur das erste Bild unterstützen.

TIFF unterstützt eine Vielzahl von Farbräumen, nicht nur RGB. Dazu gehören CMYK, YCbCr und andere, was TIFF zu einer guten Wahl für die Speicherung von Bildern macht, die für Druck, Film oder Fernsehen bestimmt sind.

Mit Ausnahme von Safari unterstützen Browser TIFF-Bilder in Web-Inhalten nicht nativ, außer durch die Verwendung spezieller Bibliotheken oder Browsererweiterungen. Daher werden TIFF-Dateien nicht häufig zur Anzeige von Web-Inhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke, die für präzise Bearbeitung oder Druck gedacht sind, verteilt werden.

WebP unterstützt verlustbehaftete Kompression über prädiktive Kodierung basierend auf dem VP8-Videocodec sowie verlustfreie Kompression, die Ersetzungen für wiederholte Daten nutzt. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35 % kleiner als JPEG-Bilder mit visuell ähnlichen Kompressionsstufen. Verlustfreie WebP-Bilder sind typischerweise 26 % kleiner als dieselben Bilder im PNG-Format.

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

WebP hat jetzt breite Unterstützung in den neuesten Versionen der wichtigsten Webbrowser, obwohl es keine tiefgehende historische Unterstützung hat. Bereitstellen eines Fallbacks entweder im JPEG- oder PNG-Format, wie z.B. mit dem <picture>-Element.

XBM (X Bitmap)-Dateien waren die ersten, die im Web unterstützt wurden, werden aber nicht mehr verwendet und sollten vermieden werden, da ihr Format potenzielle Sicherheitsprobleme aufweist. Moderne Browser haben jahrzehntelang XBM-Dateien nicht unterstützt, aber wenn man mit älteren Inhalten umgeht, könnte man noch einige finden.

XBM verwendet ein C-Code-Snippet, um den Inhalt des Bildes als ein Array von Bytes darzustellen. Jedes Bild besteht aus 2 bis 4 #define Direktiven, die die Breite und Höhe des Bitmaps (und optional den Hotspot, wenn das Bild als Cursor entworfen ist) liefern, gefolgt von einem unsigned char-Array, wo jeder Wert 8 1-Bit-Monochrom-Pixel enthält.

Das Bild muss ein Vielfaches von 8 Pixel in der Breite sein. Zum Beispiel repräsentiert der folgende Code ein XBM-Bild, das 8 mal 8 Pixel groß ist, wobei diese Pixel in einem schwarz-weißen Schachbrettmuster angeordnet sind:

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

Die Auswahl des besten Bildformats für Ihre Bedürfnisse ist wahrscheinlich einfacher als bei Videoformaten, da es weniger Optionen mit breiter Unterstützung gibt und jedes dazu tendiert, spezifische Anwendungsfälle abzudecken.

Fotografien eignen sich typischerweise gut für verlustbehaftete Kompression (abhängig von der Konfiguration des Encoders). Das macht JPEG und WebP zu guten Wahlmöglichkeiten für Fotografien, wobei JPEG kompatibler ist, WebP jedoch möglicherweise eine bessere Kompression bietet. Um die Qualität zu maximieren und die Downloadzeit zu minimieren, sollten Sie in Erwägung ziehen, beide mit einem Fallback anzubieten, wobei WebP die erste Wahl und JPEG die zweite ist. Andernfalls ist JPEG die sichere Wahl für Kompatibilität.

Für kleinere Bilder wie Symbole verwenden Sie ein verlustfreies Format, um Detailverluste in einem größenbeschränkten Bild zu vermeiden. Obwohl verlustfreies WebP für diesen Zweck ideal ist, ist die Unterstützung noch nicht weit verbreitet, sodass PNG die bessere Wahl ist, es sei denn, Sie bieten einen Fallback an. Wenn Ihr Bild weniger als 256 Farben enthält, könnte GIF eine Option sein, obwohl PNG oft noch kleiner mit seiner indizierten Kompressionsoption (PNG-8) komprimiert.

Wenn das Symbol mit Vektorgrafiken dargestellt werden kann, sollten Sie SVG in Betracht ziehen, da es über verschiedene Auflösungen und Größen skaliert und somit ideal für responsives Design ist. Obwohl die SVG-Unterstützung gut ist, könnte es sinnvoll sein, für ältere Browser einen PNG-Fallback anzubieten.

Es sei denn, Sie sind bereit, einen Qualitätsverlust in Kauf zu nehmen, sollten Sie für Bildschirmfotos ein verlustfreies Format verwenden. Dies ist besonders wichtig, wenn in Ihrem Bildschirmfoto Text enthalten ist, da Text unter verlustbehafteter Kompression leicht verschwommen und unklar wird.

PNG ist wahrscheinlich die beste Wahl, aber verlustfreies WebP wird voraussichtlich besser komprimiert sein.

Für alle Bilder, die mit Vektorgrafiken dargestellt werden können, ist SVG die beste Wahl. Andernfalls sollten Sie ein verlustfreies Format wie PNG verwenden. Wenn Sie sich für ein verlustbehaftetes Format wie JPEG oder verlustbehaftetes WebP entscheiden, sollten Sie das Kompressionsniveau sorgfältig abwägen, um zu vermeiden, dass Text oder andere Formen verschwommen oder unklar werden.

Während das standardmäßige HTML-<img>-Element keine Kompatibilitäts-Fallbacks für Bilder unterstützt, tut das <picture>-Element dies. <picture> wird als Wrapper für eine Anzahl von <source>-Elementen verwendet, von denen jedes eine Version des Bildes in einem anderen Format oder unter anderen Medienbedingungen angibt, sowie ein <img>-Element, das den Anzeigebereich des Bildes und das Fallback auf die Standard- oder "am kompatibelsten" Version definiert.

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 so etwas machen:

<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <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 so viele <source>-Elemente angeben, wie Sie möchten, allerdings sind typischerweise 2 oder 3 ausreichend.

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