Leitfaden zu Bilddateitypen und -formaten

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

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

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

In den Tabellen unten bezieht sich der Begriff Bits pro Komponente auf die Anzahl der Bits, die zum Darstellen jeder Farbkomponente verwendet werden. Zum Beispiel bedeutet eine RGB-Farbtiefe von 8, dass jede der roten, grünen und blauen Komponenten durch einen 8-Bit-Wert dargestellt wird. Bittiefe hingegen ist die Gesamtanzahl der Bits, die zur Darstellung jedes Pixels im Speicher verwendet werden.

APNG ist ein Dateiformat, das zuerst von Mozilla eingeführt wurde und den PNG-Standard erweitert, um die Unterstützung für animierte Bilder hinzuzufügen. Konzeptuell ähnlich dem seit Jahrzehnten verwendeten animierten GIF-Format ist APNG leistungsfähiger, da es eine Vielzahl von Farbiefen 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 einem Soundtrack synchronisiert werden müssen, wie Fortschrittsanzeigen, Aktivitäts-Spiralen und andere animierte Sequenzen. Zum Beispiel ist APNG eines der Formate, die unterstützt werden, wenn animierte Sticker für Apples iMessage-Anwendung (und die Nachrichten-App auf iOS) erstellt werden. Sie werden auch häufig für die animierten Abschnitte von Benutzeroberflächen von Webbrowsern verwendet.

Das AV1 Image File Format (AVIF) ist ein leistungsstarkes, quelloffenes, lizenzfreies Dateiformat, das AV1-Bitströme im High Efficiency Image File Format (HEIF) Container kodiert.

AV1 ist ein Codierungsformat, das ursprünglich für die Videoübertragung über das Internet entwickelt wurde. Das Format profitiert von den bedeutenden Fortschritten in der Videocodierung in den letzten Jahren und könnte potenziell von der damit verbundenen Unterstützung für Hardware-Rendering profitieren. Es hat jedoch auch Nachteile in einigen Fällen, da Video- und Bildcodierung einige unterschiedliche Anforderungen haben.

Das Format bietet:

• Hervorragende verlustbehaftete Komprimierung im Vergleich zu JPG und PNG bei visuell ähnlichen Komprimierungsniveaus (z. B. sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Generell hat AVIF eine bessere Komprimierung als WebP - median 50 % vs. 30 % Komprimierung für den gleichen JPG-Satz (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Komprimierung.
• Animation/Multi-Bild-Speicherung (ähnlich wie animierte GIFs, aber mit viel besserer Komprimierung)
• 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.
• Breites Farbspektrum: Unterstützung für Bilder, die einen größeren Farbraum 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 Einfluss auf die reale Benutzererfahrung, 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 ein Format in Betracht ziehen, 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 eine Rückfallebene in WebP, JPEG oder PNG Format bereitstellen, indem Sie das <picture> Element (oder einen anderen Ansatz) verwenden.

Der BMP-Dateityp (Bitmap-Bild) ist vorwiegend auf Windows-Computern verbreitet und wird in Webanwendungen 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 von BMP-Dateien ist ein unkomprimiertes Rasterbild, wobei jedes Pixel 3 Bytes belegt, die seine roten, grünen und blauen Komponenten darstellen, und jede Zeile mit 0x00-Bytes auf ein Vielfaches von 4 Byte Breite aufgefüllt wird.

Obwohl andere Datenrepräsentationen in der Spezifikation definiert sind, sind sie nicht weit verbreitet und oft vollständig nicht implementiert. Diese Funktionen umfassen: Unterstützung für verschiedene Bittiefen, indizierte Farben, Alphakanäle und verschiedene Pixelordnungen (standardmäßig wird BMP von der unteren linken Ecke nach rechts und oben geschrieben, anstatt von der oberen linken Ecke nach 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.

1987 führte der Onlinedienstleister CompuServe das Bilddateiformat GIF (Graphics Interchange Format) ein, um ein komprimiertes Grafikformat zu bieten, 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 durch HTML unterstützten Grafikformate, 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 (8 Bits jeweils für Rot, Grün und Blau) dient. Die Länge einer Farbtafel 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 in der Regel Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke zu kacheln, von denen jeder seine eigene Farbpalette hat, um Bilder mit echten Farben zu erstellen, aber in der Praxis wird dies selten gemacht.

Pixel sind undurchsichtig, es sei denn, ein bestimmter Farbindex wird als transparent bezeichnet, in diesem Fall sind Pixel mit diesem Farbwert 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 darstellen, die sich mit jedem Frame ändern.

GIF war jahrzehntelang außerordentlich populär aufgrund seiner Einfachheit und Kompatibilität. Seine Animationsunterstützung führte zu einem Wiederaufleben seiner Popularität im Zeitalter sozialer Medien, als animierte GIFs weit verbreitet für kurze "Videos", Memes und andere einfache Animationssequenzen verwendet wurden.

Ein weiteres beliebtes Feature von GIF ist die Unterstützung von Interlacing, bei dem Pixelreihen außer der Reihe 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 die Konvertierung von Vollfarbbildern 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 (Microsoft Windows-Symbol)-Dateiformat wurde von Microsoft für Desktopsymbole von Windows-Systemen entwickelt. Frühe Versionen des Internet Explorers 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 bereitzustellen – ein Symbol, das im Favoritenmenü und an anderen Orten angezeigt wird, wo eine symbolhafte Darstellung der Website nützlich wäre.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem auflistet. Nach dem 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 des Dateikopfs) 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.

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

JPEG ist eigentlich ein Datenformat für komprimierte Fotos, anstelle 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 Komprimierung und unterstützt höhere Farbtiefen als GIF, während es effizienter ist und vollständige Transparenzunterstützung bietet.

PNG wird weitgehend unterstützt, wobei alle großen Browser umfassende Unterstützung für seine Funktionen bieten.

SVG ist ein auf XML basierendes Vektorgrafik-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen festlegt, die Formen, Linien, Farben, Filter usw. erzeugen. SVG-Dateien sind ideal für Diagramme, Icons und andere Bilder, die genau in jeder Größe gezeichnet werden können. Dadurch ist SVG in der modernen Webgestaltung 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 Zeichenbereich mit einer Anfangsgröße von 100 x 100 Einheiten, der eine Linie enthält, die diagonal durch das Feld gezogen wird:

<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 in Webinhalten auf zwei Arten verwendet 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 überall anzeigen, wo Sie einen der anderen Bildtypen nutzen 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 mit einer Reihe von Zeichenbefehlen dargestellt werden können, insbesondere wenn die Größe, in der das Bild gerendert wird, unbekannt oder variabel sein könnte, da SVG reibungslos auf die gewünschte Größe skaliert. Es ist allgemein nicht nützlich für strikt Bitmap- oder fotografische Bilder, obwohl es möglich ist, Bitmapbilder innerhalb eines SVGs zu integrieren.

TIFF ist ein Rastergrafikdateiformat, das ursprünglich erstellt 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 hinzugefügten Metadaten sowie daran, dass die meisten TIFF-Bilder entweder unkomprimiert oder Komprimierungsalgorithmen verwenden, die immer noch recht große Dateien nach der Komprimierung 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) Komprimierungssysteme, die von Faxsoftware verwendet werden, sowie LZW und verlustbehaftete JPEG-Komprimierung.

Jeder Wert in einer TIFF-Datei wird unter Verwendung seines Tags (das angibt, um welche Art von Informationen es sich handelt, wie beispielsweise die Breite des Bildes) und seines Typs (das angibt, in welchem Format die Daten gespeichert sind) spezifiziert, gefolgt von der Länge des Arrays von Werten, die diesem Tag zugewiesen werden (alle Eigenschaften werden in Arrays gespeichert, selbst für Einzelwerte). Dadurch können unterschiedliche Datentypen für dieselben Eigenschaften verwendet werden. Zum Beispiel wird die Breite eines Bildes, ImageWidth, unter Verwendung des Tags 0x0100 gespeichert und ist ein Array mit einem Eintrag. Durch die Angabe von Typ 3 (SHORT) wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Durch die Angabe von Typ 4 (LONG) wird die Breite als 32-Bit-Wert gespeichert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten; dies kann verwendet werden, um mehrseitige Dokumente darzustellen, zum Beispiel (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax). Software, die TIFF-Dateien liest, ist jedoch nur verpflichtet, das erste Bild zu 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 Fernsehmedien bestimmt sind.

Abgesehen von Safari unterstützen Browser nativ keine TIFF-Bilder in Webinhalten, es sei denn, spezielle Bibliotheken oder Browser-Add-Ons werden verwendet. Daher werden TIFF-Dateien nicht allgemein für die Anzeige von Webinhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke für eine präzise Bildbearbeitung oder den Druck geliefert werden sollen.

WebP unterstützt verlustbehaftete Komprimierung über prädikative Kodierung basierend auf dem VP8-Videocodec und verlustfreie Komprimierung, die Substitutionen für sich wiederholende Daten verwendet. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35 % kleiner als JPEG-Bilder mit ähnlich visuellem Kompressionsgrad. Verlustfreie WebP-Bilder sind typischerweise 26 % kleiner als dieselben Bilder im PNG-Format.

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

WebP hat jetzt breite Unterstützung in den neuesten Versionen der großen Webbrowser, obwohl es keine tiefe historische Unterstützung gibt. Stellen Sie daher eine Rückfallebene bereit, entweder im JPEG- oder PNG-Format, 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 Sicherheitsbedenken aufweist. Moderne Browser unterstützen XBM-Dateien seit vielen Jahren nicht mehr, aber beim Umgang mit älteren Inhalten können Sie möglicherweise noch einige finden.

XBM verwendet einen C-Code-Schnipsel, 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 konzipiert ist) bereitstellen, gefolgt von einem Array von unsigned char, von denen jeder Wert acht 1-Bit monochromatische Pixel enthält.

Das Bild muss ein Vielfaches von 8 Pixeln breit sein. Zum Beispiel stellt der folgende Code ein XBM-Bild dar, das 8 Pixel mal 8 Pixel umfasst, mit diesen Pixeln in einem Schwarz-Weiß-Schachbrettmuster angeordnet:

#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 tendenziell einen spezifischen Anwendungssatz hat.

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

Für kleinere Bilder wie zum Beispiel Icons verwenden Sie ein verlustfreies Format, um Detailverluste in einem größenbeschränkten Bild zu vermeiden. Während verlustfreies WebP für diesen Zweck ideal ist, ist die Unterstützung noch nicht weit verbreitet, daher ist PNG die 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 oft sogar kleiner mit seiner indizierten Kompressionsoption (PNG-8) komprimiert.

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

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

PNG ist wahrscheinlich Ihre 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 sich für ein verlustbehaftetes Format wie JPEG oder verlustbehaftetes WebP entscheiden, wägen Sie das Kompressionsniveau sorgfältig ab, um zu vermeiden, dass Text oder andere Formen unscharf 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, wobei jedes eine Version des Bildes in einem anderen Format oder unter verschiedenen Medienbedingungen angibt, sowie ein <img>-Element, das definiert, wo das Bild angezeigt werden soll und das Fallback zur Standard- oder "meist kompatiblen" Version.

Zum Beispiel, wenn Sie ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, aber ein Fallback zu einem PNG oder GIF des Diagramms bieten möchten, würden Sie etwas wie folgt 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 typischerweise 2 oder 3 ausreichen.

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