Leitfaden zu Bilddateitypen und -formaten

Die Bilddateiformate, die am häufigsten im Web verwendet werden, sind unten aufgeführt.

Die folgende Liste umfasst Bildformate, die im Web erscheinen, aber für Webinhalte vermieden werden sollten (in der Regel, weil sie entweder keine breite Browser-Unterstützung haben oder es bessere Alternativen gibt).

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

In den Tabellen unten 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. Farbtiefe hingegen ist die Gesamtanzahl der Bits, die zur Darstellung jedes Pixels im Speicher verwendet werden.

APNG ist ein von Mozilla eingeführtes Dateiformat, das den PNG-Standard erweitert, um animierte Bilder zu unterstützen. Konzeptionell ähnlich dem seit Jahrzehnten verwendeten animierten GIF-Format, ist APNG 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 grundlegende Animationen, die nicht mit anderen Aktivitäten oder einem Soundtrack synchronisiert werden müssen, wie Fortschrittsanzeiger, Aktivitäts-Throbbers und andere animierte Sequenzen. Zum Beispiel ist APNG eines der Formate, die bei der Erstellung animierter Sticker für Apples iMessage-Anwendung (und die Nachrichtenanwendung auf iOS) unterstützt werden. Sie werden auch häufig für die animierten Teile der Benutzeroberflächen von Webbrowsern verwendet.

Das AV1 Image File Format (AVIF) ist ein leistungsstarkes, quelloffenes, lizenzfreies 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 in der Videokodierung in den letzten Jahren und könnte potenziell von der damit verbundenen Unterstützung für Hardware-Rendering profitieren. Es hat jedoch auch Nachteile für einige Fälle, da Video- und Bildkodierung unterschiedliche Anforderungen haben.

Das Format bietet:

• Hervorragende verlustbehaftete Kompression im Vergleich zu JPG und PNG bei optisch ähnlichen Kompressionsebenen (z. B. sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Generell hat AVIF eine bessere Kompression als WebP - median 50% vs. 30% Kompression für dasselbe JPG-Set (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Kompression.
• Animation/Multi-Bild-Speicherung (ähnlich dem animierten GIF, jedoch mit viel besserer Kompression)
• Alpha-Kanal-Unterstützung (d. h. für Transparenz).
• High Dynamic Range (HDR): Unterstützung zur Speicherung von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Teilen des Bildes darstellen können.
• Breiter Farbumfang: Unterstützung für Bilder, die einen größeren Farbbereich enthalten können.

AVIF unterstützt kein progressives Rendering, sodass Dateien vollständig heruntergeladen werden müssen, bevor sie angezeigt werden können. Dies hat oft wenig Auswirkungen auf die Benutzererfahrung 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 der Einfluss erheblich 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 nur wenig historischen Tiefgang hat), sollten Sie einen Fallback im WebP-, JPEG- oder PNG-Format bereitstellen, indem Sie das <picture>-Element (oder eine andere Vorgehensweise) verwenden.

Der BMP-Dateityp (Bitmap-Bild) ist am weitesten auf Windows-Computern verbreitet und wird in Web-Apps und -Inhalten in der Regel nur für spezielle Fälle verwendet.

BMP unterstützt theoretisch eine Vielzahl interner Datenrepräsentationen. Die einfachste und am häufigsten verwendete Form der BMP-Datei ist ein unkomprimiertes Rasterbild, bei dem jedes Pixel 3 Bytes zur Darstellung seiner roten, grünen und blauen Komponenten beansprucht, und jede Zeile mit 0x00 Bytes auf ein Vielfaches von 4 Bytes Breite aufgefüllt wird.

Während andere Datenrepräsentationen in der Spezifikation definiert sind, werden sie nicht weit verbreitet verwendet und oft komplett nicht implementiert. Diese Funktionen umfassen: Unterstützung für verschiedene Bit-Tiefen, indizierte Farbe, Alpha-Kanäle und unterschiedliche Pixelreihenfolgen (standardmäßig wird BMP von der unteren linken Ecke in Richtung rechts und oben geschrieben, anstatt von der oberen linken Ecke in Richtung rechts und unten).

Theoretisch werden mehrere Komprimierungsalgorithmen 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 zur Verfügung zu stellen, das alle Mitglieder ihres Dienstes verwenden könnten. GIF verwendet den Lempel-Ziv-Welch (LZW)-Algorithmus, um 8-Bit indizierte Farbgrafiken 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 einzelnen 8-Bit-Wert dargestellt, der als Index in eine Palette von 24-Bit-Farben dient (8 Bits für Rot, Grün und Blau). Die Länge einer Farbtafel ist immer eine Potenz von 2 (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 normalerweise Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke zu kacheln, von denen jeder seine eigene Farbpalette hat, um Echtfarbenbilder zu erstellen, aber in der Praxis wird das selten gemacht.

Pixel sind opak, es sei denn, ein spezifischer Farbindex wird als transparent ausgewiesen, in diesem Fall sind Pixel mit diesem Wert vollständig transparent.

GIF unterstützt einfache Animationen, bei denen nach einem anfänglichen Vollbildrahmen eine Reihe von Bildern bereitgestellt wird, die die Teile des Bildes widerspiegeln, die sich mit jedem Rahmen ändern.

GIF ist seit Jahrzehnten extrem populär, aufgrund seiner Einfachheit und Kompatibilität. Seine Unterstützung für Animationen führte in der Ära der sozialen Medien zu einem Wiederaufleben seiner Beliebtheit, als animierte GIFs weit verbreitet für kurze "Videos", Memes und andere einfache Animationssequenzen verwendet wurden.

Ein weiteres beliebtes Merkmal von GIF ist die Unterstützung für Interlacing, bei der Pixelreihen außer der Reihenfolge gespeichert werden, damit teilweise empfangene Dateien in niedriger Qualität angezeigt werden können. Dies ist besonders nützlich, wenn Netzverbindungen langsam sind.

GIF ist eine gute Wahl für einfache Bilder und Animationen, auch wenn die Konvertierung von Vollfarbenbildern in GIF zu unbefriedigendem Dithering führen kann. In der Regel sollte moderner Inhalt PNG für verlustfreie und indizierte Standbilder verwenden und APNG für verlustfreie Animationssequenzen in Betracht ziehen.

Das ICO-Dateiformat (Microsoft Windows Icon) wurde von Microsoft für Desktop-Icons von Windows-Systemen entwickelt. Jedoch führten frühe Versionen von Internet Explorer die Möglichkeit ein, dass eine Website eine ICO-Datei namens favicon.ico im Stammverzeichnis einer Website bereitstellen kann, um ein Favicon - ein Icon, das im Favoritenmenü und anderen Orten angezeigt wird, wo eine ikonische Darstellung der Seite nützlich wäre.

Eine ICO-Datei kann mehrere Icons enthalten und beginnt mit einem Verzeichnis, das Details zu jedem Icon auflistet. Nach dem Verzeichnis werden die Daten für die Icons bereitgestellt. Die Daten jedes Icons 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 von PNG innerhalb von ICO-Dateien erst mit Windows Vista hinzugefügt wurde und möglicherweise nicht gut unterstützt wird.

Das JPEG-Bildformat (üblicherweise als "jay-peg" ausgesprochen) ist derzeit das am häufigsten verwendete 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 Grafiken, kann unbefriedigende Ergebnisse erzielen.

JPEG ist eigentlich ein Datenformat für komprimierte Fotos und nicht ein Dateityp. 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 und unterstützt höhere Farbtiefen als GIF, ist effizienter und bietet volle Unterstützung für Alpha-Transparenz.

PNG wird allgemein unterstützt, alle wichtigen Browser bieten eine vollständige Unterstützung für seine Funktionen.

SVG ist ein auf XML basierendes Vektorgrafik-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen spezifiziert, die Formen, Linien, Farben, Filter usw. erstellen. SVG-Dateien sind ideal für Diagramme, Icons und andere Bilder, die in jeder Größe akkurat gezeichnet werden können. Daher ist SVG in modernen Webdesigns für Benutzeroberflächenelemente beliebt.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der bei Interpretation das gewünschte Bild zeichnet. Zum Beispiel definiert dieses Beispiel einen Zeichenbereich mit einer Anfangsgröße von 100x100 Einheiten, der eine Linie enthält, die diagonal durch das Quadrat verläuft:

<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 zwei Arten in Webinhalten genutzt werden:

1. Sie können das <svg>-Element direkt im HTML schreiben, das SVG-Elemente enthält, um das Bild zu zeichnen.
2. Sie können ein SVG-Bild an jeder Stelle anzeigen, an der Sie einen der anderen Bildtypen verwenden können, einschließlich mit den <img>- und <picture>-Elementen, der background-image-CSS-Eigenschaft usw.

SVG ist eine ideale Wahl für Bilder, die durch eine 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 sich nahtlos an die gewünschte Größe anpasst. Es ist nicht generell nützlich für streng bitmap- oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder in einem SVG einzuschließen.

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

TIFF unterstützt eine Vielzahl von Komprimierungsmethoden, 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 (der Art der Information, z. B. Breite des Bildes) und seinem Typ (der spezifiziert, in welchem Format die Daten gespeichert sind) angegeben, gefolgt von der Länge des Arrays der zu diesem Tag zuzuordnenden Werte (alle Eigenschaften werden in Arrays gespeichert, auch für einzelne Werte). Dies erlaubt die Verwendung unterschiedlicher Datentypen für dieselben Eigenschaften. Beispielsweise wird die Breite eines Bildes, ImageWidth, unter Verwendung des Tags 0x0100 gespeichert und ist ein Ein-Eintrag-Array. Durch die Angabe des Typ 3 (SHORT) wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Die Angabe des Typs 4 (LONG) speichert die Breite als 32-Bit-Wert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten; dies kann verwendet werden, um mehrseitige Dokumente darzustellen, z.B. 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 den Druck, Film oder Fernsehadienste bestimmt sind.

Abgesehen von Safari unterstützen Browser keine TIFF-Bilder in Webinhalten nativ, es sei denn durch die Verwendung spezieller Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht häufig zur Anzeige von Webinhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke zur Bearbeitung oder zum Drucken verteilt werden sollen.

WebP unterstützt verlustbehaftete Kompression durch prädiktive Kodierung basierend auf dem VP8-Videocodec und verlustfreie Kompression, die Ersetzungen für sich wiederholende Daten verwendet. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35% kleiner als JPEG-Bilder mit optisch ähnlichen Kompressionsstufen. Verlustfreie WebP-Bilder sind in der Regel 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 repräsentiert, der mehrere Frames enthalten kann. Verlustfreie WebP-Dateien halten den ANIM-Block, der die Animation beschreibt, und den ANMF-Block, der einen Frame einer Animationssequenz darstellt. Schleifen werden unterstützt.

WebP hat jetzt eine breite Unterstützung in den neuesten Versionen der wichtigsten Webbrowser, obwohl es keine tiefe historische Unterstützung hat. Bieten Sie eine Fallback-Option entweder im JPEG- oder PNG-Format an, z.B. mit dem <picture>-Element.

XBM (X Bitmap)-Dateien waren die ersten, die im Web unterstützt wurden, werden jedoch nicht mehr verwendet und sollten vermieden werden, da ihr Format potenzielle Sicherheitsrisiken birgt. Moderne Browser haben XBM-Dateien seit vielen Jahren nicht mehr unterstützt, aber beim Umgang mit älteren Inhalten können Sie auf einige stoßen.

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

Das Bild muss ein Vielfaches von 8 Pixeln breit sein. Zum Beispiel repräsentiert der folgende Code ein XBM-Bild, das 8x8 Pixel groß ist, mit diesen Pixeln in einem schwarz-weißen Schachbrettmuster:

#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 jede in der Regel eine spezifische Reihe von Anwendungsfällen hat.

Fotografien kommen typischerweise gut mit verlustbehafteter Kompression zurecht (abhängig von der Konfiguration des Encoders). Das macht JPEG und WebP zu guten Entscheidungen für Fotografien, wobei JPEG kompatibler ist, WebP jedoch möglicherweise eine bessere Komprimierung bietet. Um die Qualität zu maximieren und die Downloadzeit zu minimieren, ziehen Sie in Betracht, beide mit einem Fallback anzubieten, wobei WebP die erste Wahl ist und JPEG die zweite. 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. Während verlustfreies WebP ideal für diesen Zweck ist, ist die Unterstützung noch nicht weit verbreitet, daher ist PNG eine bessere Wahl, es sei denn, Sie bieten ein Fallback an. Wenn Ihr Bild weniger als 256 Farben enthält, ist GIF eine Option, obwohl PNG mit seiner indizierten Kompressionsoption (PNG-8) oft noch kleiner komprimiert.

Wenn das Symbol mit Vektorgrafiken dargestellt werden kann, ziehen Sie SVG in Betracht, da es über verschiedene Auflösungen und Größen skaliert, was es perfekt für responsives Design macht. Obwohl SVG-Unterstützung gut ist, könnte es sich lohnen, ein PNG-Fallback für ältere Browser anzubieten.

Es sei denn, Sie sind bereit, bei der Qualität Kompromisse einzugehen, sollten Sie ein verlustfreies Format für Screenshots verwenden. Dies ist besonders wichtig, wenn sich Text in Ihrem Screenshot befindet, da Text unter verlustbehafteter Kompression leicht unscharf und unklar wird.

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

Für jedes Bild, das mit Vektorgrafiken dargestellt werden kann, ist SVG die beste Wahl. Andernfalls sollten Sie ein verlustfreies Format wie PNG verwenden. Wenn Sie ein verlustbehaftetes Format wie JPEG oder verlustbehaftetes WebP wählen, wägen Sie die Komprimierungsstufe sorgfältig ab, um zu vermeiden, dass Text oder andere Formen unscharf oder unklar werden.

Während das Standard-HTML-Element <img> keine Kompatibilitäts-Fallbacks für Bilder unterstützt, tut das <picture>-Element dies. <picture> wird als Wrapper für mehrere <source>-Elemente verwendet, von denen jedes eine Version des Bildes in einem anderen Format oder unter verschiedenen Medienbedingungen angibt, sowie ein <img>-Element, das angibt, wo das Bild angezeigt werden soll und das Fallback zur Standard- oder "kompatibelsten" Version.

Beispielsweise würden Sie, wenn Sie ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, jedoch ein Fallback zu einem PNG oder GIF des Diagramms anbieten möchten, etwas Ähnliches tun:

<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>s angeben, wie Sie möchten, obwohl in der Regel 2 oder 3 ausreichen.

• 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