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, jedoch für Webinhalte vermieden werden sollten (in der Regel liegt dies daran, dass sie entweder nicht breit von Browsern unterstützt werden oder es bessere Alternativen gibt).

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

In den nachfolgenden Tabellen bezieht sich der Begriff Bits pro Komponente auf die Anzahl der Bits, die zur Darstellung jeder Farbkomponente verwendet werden. Beispielsweise zeigt eine RGB-Farbtiefe von 8 an, 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 von Mozilla eingeführt wurde und den PNG-Standard erweitert, um die Unterstützung für animierte Bilder hinzuzufügen. Konzeptionell ähnlich wie das animierte GIF-Format, das seit Jahrzehnten verwendet wird, ist APNG leistungsfähiger, da es verschiedene 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 z. B. Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. Zum Beispiel ist APNG eines der Formate, das unterstützt wird, wenn animierte Sticker für Apples iMessage-Anwendung (und die Nachrichtenanwendung auf iOS) erstellt 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 codiert.

AV1 ist ein Kodierungsformat, das ursprünglich für die Videotransmission ü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 in einigen Fällen Nachteile, da die Anforderungen an die Video- und Bildkodierung unterschiedlich sind.

Das Format bietet:

• Hervorragende verlustbehaftete Komprimierung im Vergleich zu JPG und PNG für visuell ähnliche Komprimierungsstufen (z. B. sind verlustbehaftete AVIF-Bilder etwa 50 % kleiner als JPEG-Bilder).
• Allgemein hat AVIF eine bessere Komprimierung als WebP – im Median 50 % vs. 30 % Komprimierung für denselben JPG-Satz (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Komprimierung.
• Animation/Mehrbildspeicherung (ähnlich wie animierte GIFs, aber mit viel besserer Komprimierung)
• Alpha-Kanal-Unterstützung (z. B. 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 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 oft 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 der Einfluss jedoch bedeutend werden, und es sollte in Erwägung gezogen werden, ein Format zu verwenden, 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 kaum ein historisches Fundament hat), sollten Sie einen Fallback im WebP-, JPEG- oder PNG-Format bereitstellen, indem Sie das <picture>-Element (oder einen anderen Ansatz) verwenden.

Der BMP (Bitmapbild)-Dateityp ist auf Windows-Computern am weitesten 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 beansprucht, die seine roten, grünen und blauen Komponenten darstellen, 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 völlig unimplementiert. Zu diesen Funktionen gehören: Unterstützung für verschiedene Bittiefen, indizierte Farben, Alpha-Kanäle und unterschiedliche Pixelanordnungen (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 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 verwenden konnten. GIF verwendet den Lempel-Ziv-Welch (LZW) Algorithmus, um 8-Bit-indizierte Farbgraphiken 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 24-Bit-Farbpalette (8 Bits jeweils 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 typischerweise Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke zu kacheln, von denen jeder seine eigene Farbpalette hat, um Truecolor-Bilder zu erstellen, aber in der Praxis wird dies selten gemacht.

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

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

GIF war über Jahrzehnte extrem populär, dank seiner Einfachheit und Kompatibilität. Die Unterstützung für Animation führte in der Ära der sozialen Medien zu einer Wiederbelebung seiner Beliebtheit, als animierte GIFs weit verbreitet als kurze „Videos“, Memes und andere einfache Animationssequenzen verwendet wurden.

Ein weiteres beliebtes Merkmal von GIF ist die Unterstützung von Interlacing, bei dem Pixelzeilen aus der Reihenfolge gespeichert werden, sodass nur teilweise empfangene Dateien in niedrigerer 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 Umwandeln von Vollfarbbildern in GIF zu unbefriedigendem Dithering führen kann. Typischerweise 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. Obwohl frühe Versionen des Internet Explorers es ermöglichten, dass eine Website eine ICO-Datei namens favicon.ico im Stammverzeichnis der Website bereitstellt, um ein Favicon anzugeben — ein Icon, das im Favoritenmenü und anderen Orten angezeigt wird, wo eine symbolische Darstellung der Website nützlich wäre.

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

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

JPEG ist tatsächlich ein Datenformat für komprimierte Fotos, anstatt eines Dateityps. Die JFIF (JPEG File Interchange Format)-Spezifikation beschreibt das Format der Dateien, die wir als „JPEG“-Bilder betrachten.

Das PNG (ausgesprochen „ping“) Bildformat verwendet verlustfreie Komprimierung, während es höhere Farbtiefen als GIF unterstützt und effizienter ist, sowie volle Alphatransparenz-Unterstützung bietet.

PNG ist weit verbreitet und wird von allen großen Browsern umfassend unterstützt.

SVG ist ein XML-basiertes Vektorgraphik-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen definiert, die Formen, Linien zeichnen und Farben, Filter usw. anwenden. SVG-Dateien sind ideal für Diagramme, Icons und andere Bilder, die genau in jeder Größe gezeichnet werden können. Daher ist SVG für Benutzeroberflächenelemente im modernen Webdesign populär.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der beim Interpretieren das gewünschte Bild zeichnet. Zum Beispiel definiert dieses Beispiel einen Zeichenbereich mit einer anfänglichen Größe von 100 x 100 Einheiten, der eine Linie enthält, die diagonal durch das Kästchen 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 anderen Bildtyp 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 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 auf die gewünschte Größe reibungslos skaliert. Es ist im Allgemeinen nicht nützlich für strikt bitmapbasierte oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder innerhalb eines SVG einzuschließen.

TIFF ist ein Rastergrafikdateiformat, das zur Speicherung von gescannten Fotos erstellt wurde, 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 dennoch nach der Komprimierung relativ große Dateien hinterlassen.

TIFF unterstützt eine Vielzahl von Komprimierungsmethoden, aber die am häufigsten verwendeten sind die Komprimierungssysteme CCITT Gruppe 4 (und, für ältere Faxsysteme, Gruppe 3) für Faxsoftware 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, z. B. die Breite des Bildes) und seinem Typ (der das Format angibt, in dem die Daten gespeichert sind) sowie der Länge des Arrays von Werten, die diesem Tag zugewiesen werden sollen (alle Eigenschaften werden in Arrays gespeichert, auch für einzelne Werte), angegeben. Dies ermöglicht die Verwendung unterschiedlicher Datentypen für dieselben Eigenschaften. Zum Beispiel wird die Breite eines Bildes, ImageWidth, mit dem Tag 0x0100 gespeichert und ist ein Array mit einem Eintrag. Durch Angabe des Typs 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 zur Darstellung von mehrseitigen Dokumenten verwendet werden, z. B. (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax). Allerdings sind Programme, die TIFF-Dateien lesen, nur dazu 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 Druckmedien, Film oder Fernsehen bestimmt sind.

Mit Ausnahme von Safari unterstützen Browser TIFF-Bilder in Webinhalten nicht nativ, es sei denn, durch spezielle Bibliotheken oder Browser-Erweiterungen. 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 zu verteilen sind, die für präzise Bearbeitung oder Druck bestimmt sind.

WebP unterstützt verlustbehaftete Komprimierung über prädiktives Kodieren basierend auf dem VP8-Videocodec und 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 Animation: In einer verlustbehafteten WebP-Datei werden die Bilddaten durch einen VP8-Bitstream dargestellt, der mehrere Frames enthalten kann. Verlustfreie WebP hält den ANIM-Abschnitt, der die Animation beschreibt, und den ANMF-Abschnitt, der einen Frame einer Animationssequenz darstellt. Schleifen werden unterstützt.

WebP hat jetzt breite Unterstützung in den neuesten Versionen der wichtigsten Webbrowser, obwohl es keine tiefgehende historische Unterstützung hat. Stellen Sie ein Fallback entweder im JPEG oder PNG-Format bereit, 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 birgt. Moderne Browser haben XBM-Dateien in vielen Jahren nicht mehr unterstützt, aber beim Umgang mit älteren Inhalten könnten Sie noch einige finden.

XBM verwendet ein Stück C-Code, 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 der Bitmap (und optional das Hotspot, wenn das Bild als Cursor konzipiert ist) bereitstellen, gefolgt von einem Array von unsigned char, wobei jeder Wert 8 1-Bit-Schwarz-Weiß-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 groß ist und jene Pixel in einem schwarz-weißen Schachbrettmuster anzeigt:

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

Die Wahl 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 eine spezifische Menge von Anwendungszwecken aufweist.

Fotografien erzielen typischerweise gute Ergebnisse mit verlustbehafteter Kompression (abhängig von der Konfiguration des Encoders). Dies macht JPEG und WebP zu guten Optionen 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, ziehen Sie in Betracht, beide bereitzustellen, indem Sie einen Fallback anbieten, 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 den Verlust von Details in einem größenbeschränkten Bild zu vermeiden. Während verlustfreies WebP dafür ideal ist, ist die Unterstützung noch nicht weit verbreitet, sodass PNG eine bessere Wahl ist, es sei denn, Sie bieten einen Fallback an. Wenn Ihr Bild weniger als 256 Farben enthält, ist GIF eine Option, obwohl PNG oft noch kleiner mit seiner indizierten Kompressionsoption (PNG-8) komprimiert.

Wenn das Symbol mit Vektorgrafiken dargestellt werden kann, ziehen Sie SVG in Betracht, da es sich über verschiedene Auflösungen und Größen skalieren lässt und daher perfekt für responsives Design 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, bei der Qualität Kompromisse einzugehen, sollten Sie ein verlustfreies Format für Screenshots verwenden. Dies ist besonders wichtig, wenn in Ihrem Screenshot Text enthalten ist, da Text bei verlustbehafteter Kompression leicht unscharf und unklar werden kann.

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 die Kompressionsstufe sorgfältig ab, um zu vermeiden, dass Text oder andere Formen unscharf oder unklar werden.

Während das standardmäßige HTML-Element <img> keine Kompatibilitäts-Fallbacks für Bilder unterstützt, tut dies das <picture>-Element. <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 anderen Medienbedingungen sowie ein <img>-Element angibt, das definiert, wo das Bild angezeigt wird und den Fallback auf die Standard- oder "am kompatibelsten" Version.

Zum Beispiel, wenn Sie ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, aber einen Fallback auf eine PNG oder GIF des Diagramms anbieten möchten, würden Sie 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 spezifizieren, wie Sie möchten, jedoch sind typischerweise 2 oder 3 ausreichend.

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