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, jedoch 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 jeden der von Webbrowsern unterstützten Bilddateitypen.

In den untenstehenden Tabellen bezieht sich der Begriff bits per component auf die Anzahl der Bits, die zum Darstellen jeder Farbkomponente verwendet werden. Beispielsweise weist eine RGB-Farbtiefe von 8 darauf hin, dass jede der Rot-, Grün- und Blaukomponenten durch einen 8-Bit-Wert dargestellt wird. Die Farbtiefe bezieht sich hingegen auf die Gesamtanzahl der Bits, die für die Darstellung jedes Pixels im Speicher verwendet werden.

APNG ist ein Dateiformat, das zuerst von Mozilla eingeführt wurde und den PNG-Standard erweitert, indem es Unterstützt für animierte Bilder hinzufügt. Konzeptuell ähnlich dem animierten GIF-Format, das seit Jahrzehnten in Gebrauch ist, ist APNG leistungsfähiger, da es eine Vielzahl von Farb-Tiefen unterstützt, während animierte GIFs nur 8-Bit indizierte Farben unterstützen.

APNG eignet sich ideal für einfache Animationen, die nicht mit anderen Aktivitäten oder einem Soundtrack synchronisiert werden müssen, wie z. B. Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. Zum Beispiel ist APNG eines der Formate, die beim Erstellen von animierten Stickern für Apples iMessage-Anwendung (und die Nachrichten-Anwendung auf iOS) unterstützt werden. Sie werden auch häufig für die animierten Teile von Webbrowser-Benutzeroberflächen verwendet.

AV1 Image File Format (AVIF) ist ein leistungsfähiges, quelloffenes, gebührenfreies 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 signifikanten Fortschritten in der Video-Kodierung 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 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 — median 50% vs. 30% Kompression für das gleiche JPG-Set (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Kompression.
• Animation/Speicherung mehrerer Bilder (ähnlich wie animierte GIFs, jedoch mit weit besserer Kompression).
• Unterstützung des Alpha-Kanals (d.h. für Transparenz).
• High Dynamic Range (HDR): Unterstützung für das Speichern von Bildern, die größere Kontraste zwischen den hellsten und dunkelsten Teilen des Bildes darstellen können.
• Breites Farbgamut: Unterstützung für Bilder, die eine größere Farbpalette 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 in der Regel wenig Auswirkungen auf die reale Benutzererfahrung, da AVIF-Dateien viel kleiner sind als die entsprechenden JPEG- oder PNG-Dateien und daher schneller heruntergeladen und angezeigt werden können. Bei größeren Dateigrößen kann der Einfluss jedoch signifikant werden und Sie sollten in Erwägung ziehen, 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 wenig historische Tiefe aufweist), sollten Sie einen Rückfall auf WebP, JPEG oder PNG Format bereitstellen, indem Sie das <picture>-Element (oder eine andere Herangehensweise) verwenden.

Der BMP (Bitmap Image) Dateityp ist am weitesten verbreitet auf Windows-Rechnern und wird im Allgemeinen nur für Sonderfälle in Webanwendungen und -inhalten 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 Byte belegt, die die Rot-, Grün- und Blaukomponenten darstellen, und jede Zeile mit 0x00-Bytes aufgefüllt wird, um ein Vielfaches von 4 Byte breit zu sein.

Obwohl andere Datenrepräsentationen in der Spezifikation definiert sind, werden sie nicht weit verbreitet verwendet und sind oft völlig unimplementiert. Diese Funktionen umfassen: Unterstützung für unterschiedliche Farbtiefen, indizierte Farbdarstellung, Alpha-Kanäle und unterschiedliche Pixel-Ordnungen (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.

Im Jahr 1987 stellte der Online-Dienstanbieter CompuServe das GIF (Graphics Interchange Format) Bilddateiformat vor, um ein komprimiertes Grafikformat bereitzustellen, das alle Mitglieder ihres Dienstes nutzen können. GIF verwendet den Lempel-Ziv-Welch (LZW) Algorithmus zur verlustfreien Kompression von 8-Bit indizierten Farbgrafiken. 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 repräsentiert, der als Index in eine Palette von 24-Bit-Farben (je 8 Bit für Rot, Grün und Blau) dient. Die Länge einer Farbtabelle ist immer eine Zweierpotenz (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 allgemein Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke zu kacheln, von denen jeder seine eigene Farbpalette enthält, um echte Farbbilder zu erstellen, 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 in dieser Farbe 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 Frame ändern.

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

Ein weiteres populäres Merkmal von GIF ist die Unterstützung von Interlacing, bei dem Zeilen von Pixeln aus der Reihe gespeichert werden, sodass 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 die Umwandlung von Vollfarbenbildern in GIF zu unbefriedigendem Dithering führen kann. Normalerweise sollte moderner Inhalt PNG für verlustfreie und indizierte Standbilder verwenden und sollte in Erwägung ziehen, APNG für verlustfreie Animationssequenzen zu verwenden.

Das ICO (Microsoft Windows Icon)-Dateiformat wurde von Microsoft für Desktop-Symbole von Windows-Systemen entwickelt. Frühere Versionen des Internet Explorers ermöglichten jedoch einer Website, eine ICO-Datei namens favicon.ico im Stammverzeichnis einer Website bereitzustellen, um ein Favicon anzugeben — ein Symbol, das im Favoritenmenü und an anderen Stellen angezeigt wird, wo eine ikonische Darstellung der Website nützlich wäre.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem Symbol auflistet. Nach dem Verzeichnis kommen die Daten für die Symbole. Die Daten jedes Symbols können entweder ein BMP-Bild ohne die Dateikopfzeile oder ein vollständiges PNG-Bild sein (einschließlich der Dateikopfzeile). 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 als "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 tatsächlich 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 (ausgesprochen "ping") Bildformat verwendet verlustfreie Komprimierung, unterstützt höhere Farbtiefen als GIF und ist effizienter, während es vollständige Alpha-Transparenz unterstützt.

PNG ist weit verbreitet und wird von allen gängigen Browsern vollständig unterstützt.

SVG ist ein XML-basiertes Vektorgrafik-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenkommandos angibt, die Formen und Linien erzeugen, Farben, Filter usw. anwenden. SVG-Dateien eignen sich ideal für Diagramme, Symbole und andere Bilder, die in beliebiger Größe präzise gezeichnet werden können. Als solches ist SVG beliebt für Benutzeroberflächenelemente in modernem Webdesign.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der bei der Interpretation das gewünschte Bild zeichnet. Beispielsweise definiert dieses Beispiel einen Zeichenbereich mit einer Anfangsgröße von 100 mal 100 Einheiten, der eine Linie enthält, die diagonal durch das Kästchen 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 drei Arten in Webinhalten 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 dort zu verwenden, wo andere Bildtypen verwendet werden können, einschließlich mit dem <img>-Element, der background-image CSS-Eigenschaft und so weiter. Jedoch gibt es zusätzliche Einschränkungen, wenn SVG auf diese Weise verwendet wird.

SVG ist eine ideale Wahl für Bilder, die mit einer Reihe von Zeichenkommandos dargestellt werden können, insbesondere wenn die Größe, in der das Bild gerendert wird, unbekannt ist oder variieren kann, da SVG sich glatt in die gewünschte Größe skaliert. Es ist im Allgemeinen nicht nützlich für rein bitmap- oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder innerhalb eines SVGs einzufügen.

TIFF ist ein Rastergrafik-Dateiformat, das entwickelt wurde, um gescannte Fotos zu speichern, obwohl es für jede Art von Bild verwendet werden 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 trotz Komprimierung recht große Dateien hinterlassen.

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

Jeder Wert in einer TIFF-Datei ist durch seinen Tag (der angibt, um welche Art von Information es sich handelt, wie die Breite des Bildes) und seinen Typ (der angibt, in welchem Format die Daten gespeichert sind) spezifiziert, gefolgt von der Länge des Arrays von Werten, die diesem Tag zugeordnet werden (alle Eigenschaften werden in Arrays gespeichert, auch bei einzelnen Werten). Dies ermöglicht die Verwendung verschiedener Datentypen für dieselben Eigenschaften. Beispielweise wird die Breite eines Bildes, ImageWidth, unter Verwendung des Tags 0x0100 gespeichert und ist ein Array mit einem Eintrag. Durch die Angabe des Typs 3 (SHORT) wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Wenn Typ 4 (LONG) angegeben wird, wird die Breite als 32-Bit-Wert gespeichert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten; dies kann verwendet werden, um mehrseitige Dokumente darzustellen, wie z. B. ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax. Software, die TIFF-Dateien liest, muss nur das erste Bild unterstützen.

TIFF unterstützt eine Vielzahl von Farbräumen, nicht nur RGB. Diese umfassen CMYK, YCbCr und andere, was TIFF zu einer guten Wahl für die Speicherung von Bildern macht, die für den Druck, Film oder Fernsehmedien bestimmt sind.

Mit Ausnahme von Safari unterstützen Browser TIFF-Bilder nicht nativ in Webinhalten, außer durch spezielle Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht breit genutzt, um Webinhalte anzuzeigen, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke verteilt werden, die zur präzisen Bearbeitung oder zum Drucken bestimmt sind.

WebP unterstützt verlustbehaftete Kompression über prädiktive Kodierung basierend auf dem VP8-Video-Codec und verlustfreie Kompression, die Ersetzungen für sich wiederholende Daten verwendet. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35% kleiner als JPEG-Bilder mit visuell ähnlichen Kompressionsstufen. Verlustfreie WebP-Bilder sind in der Regel 26% kleiner als dieselben Bilder im PNG-Format.

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

WebP hat mittlerweile breite Unterstützung in den neuesten Versionen der wichtigsten Webbrowser, obwohl es nicht über eine tiefe historische Unterstützung verfügt. Sorgen Sie für einen Rückfall entweder im JPEG- oder PNG-Format, zum Beispiel mit dem <picture>-Element.

XBM (X Bitmap)-Dateien wurden zuerst für das Web unterstützt, werden aber nicht mehr verwendet und sollten vermieden werden, da ihr Format potenzielle Sicherheitsprobleme hat. Moderne Browser haben XBM-Dateien seit vielen Jahren nicht mehr unterstützt, aber wenn Sie mit älterem Inhalt zu tun haben, könnten Sie auf einige stoßen.

XBM verwendet ein Snippet von 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 den Hotspot, wenn das Bild als Cursor gedacht ist) bereitstellen, gefolgt von einem Array von unsigned char, von denen jeder Wert acht 1-Bit monochrome 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 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 Wahl des besten Bildformats für Ihre Bedürfnisse ist wahrscheinlich einfacher als die Wahl von Videoformaten, da es weniger Optionen mit breiter Unterstützung gibt und jedes tendenziell einen spezifischen Anwendungsbereich hat.

Fotografien eignen sich typischerweise gut für verlustbehaftete Komprimierung (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 Komprimierung 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 die Kompatibilität.

Für kleinere Bilder wie Symbole verwenden Sie ein verlustfreies Format, um den Detailverlust in einem größenbegrenzten Bild zu vermeiden. Obwohl verlustfreies WebP für diesen Zweck ideal ist, ist die Unterstützung noch nicht weit verbreitet, sodass PNG eine bessere Wahl ist, 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 Komprimierungsoption (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 und somit ideal für responsives Design ist. Obwohl die SVG-Unterstützung gut ist, kann es sich lohnen, ein PNG-Fallback für ältere Browser anzubieten.

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

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

Für jedes Bild, das mit Vektorgrafiken dargestellt werden kann, ist SVG die beste Wahl. Ansonsten sollten Sie ein verlustfreies Format wie PNG verwenden. Wenn Sie ein verlustbehaftetes Format wie JPEG oder verlustbehaftetes WebP wählen, sollten Sie den Komprimierungsgrad sorgfältig abwägen, 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 dies das <picture> Element. <picture> wird als Wrapper für eine Reihe von <source> Elementen verwendet, die jeweils eine Version des Bildes in einem anderen Format oder unter anderen Medienbedingungen angeben, sowie ein <img> Element, das angibt, wo das Bild angezeigt werden soll, und das Fallback zur Standard- oder "kompatibelsten" Version.

Zum Beispiel, wenn Sie ein Diagramm anzeigen, das am besten mit SVG angezeigt wird, aber ein Fallback auf eine PNG oder GIF des Diagramms anbieten möchten, würden Sie so etwas 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 Video-Codecs, die im Web verwendet werden
• Die HTML <img> und <picture> Elemente
• Die CSS background-image Eigenschaft
• Der Image() Konstruktor und das HTMLImageElement Interface