Leitfaden zu Bilddateitypen und -formaten

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

Die folgende Liste enthält Bildformate, die im Web auftauchen, aber für Webinhalte vermieden werden sollten (dies liegt in der Regel daran, dass 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 verwendet werden, um jede Farbkomponente darzustellen. Beispielsweise zeigt eine RGB-Farbtiefe von 8, dass jede der roten, grünen und blauen Komponenten durch einen 8-Bit-Wert dargestellt wird. Die Bit-Tiefe hingegen ist die Gesamtanzahl der Bits, die verwendet werden, um jedes Pixel im Speicher darzustellen.

APNG ist ein von Mozilla erstmals eingeführtes Dateiformat, das den PNG-Standard erweitert, um die Unterstützung für animierte Bilder hinzuzufügen. Konzeptionell ähnlich dem Animationen unterstützenden GIF-Format, das seit Jahrzehnten in Gebrauch ist, ist APNG leistungsfähiger, da es eine Vielzahl von Farb-Tiefen unterstützt, während animiertes GIF nur 8-Bit- indizierte Farbe unterstützt.

APNG ist ideal für einfache Animationen, die nicht mit anderen Aktivitäten oder einem Soundtrack synchronisiert werden müssen, wie etwa Fortschrittsanzeigen, Aktivitäts-Throbber und andere animierte Sequenzen. Beispielsweise ist APNG eines der Formate, die unterstützt werden, 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 von Benutzeroberflächen in Webbrowsern verwendet.

Das AV1-Bilddateiformat (AVIF) ist ein leistungsstarkes, quelloffenes, lizenzgebü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 bedeutenden 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 in einigen Fällen, da Video- und Bildkodierung unterschiedliche Anforderungen haben.

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).
• Im Allgemeinen hat AVIF eine bessere Komprimierung als WebP — median 50% vs. 30% Komprimierung für das gleiche JPG-Set (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Komprimierung.
• Animationen/Mehrfachbildspeicherung (ähnlich wie animierte GIFs, aber mit wesentlich 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.
• Großer Farbumfang: Unterstützung für Bilder, die eine größere Farbpalette enthalten können.

AVIF unterstützt kein progressives Rendern, sodass Dateien komplett heruntergeladen werden müssen, bevor sie angezeigt werden können. Dies hat oft wenig Einfluss auf das Benutzererlebnis, 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 signifikant werden, und Sie sollten ein Format in Betracht ziehen, das progressives Rendern 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 aufweist), sollten Sie ein Fallback im WebP-, JPEG- oder PNG-Format verwenden, indem Sie das das <picture>-Element (oder eine andere Methode) verwenden.

Der BMP (Bitmap-Bild)-Dateityp ist auf Windows-Computern am weitesten verbreitet und wird in Webanwendungen und -inhalten in der Regel nur für Sonderfälle verwendet.

BMP unterstützt theoretisch eine Vielzahl von internen Datenrepräsentationen. Die einfachste und am häufigsten verwendete Form der BMP-Datei ist ein unkomprimiertes Rasterbild, wobei jedes Pixel 3 Bytes für seine roten, grünen und blauen Komponenten belegt und jede Zeile mit 0x00 Bytes auf ein Vielfaches von 4 Bytes Breite aufgepolstert wird.

Während andere Datenrepräsentationen in der Spezifikation definiert sind, werden sie nicht weit verbreitet verwendet und sind oft vollständig unimplementiert. Zu diesen Funktionen gehören: Unterstützung für verschiedene Bit-Tiefen, indizierte Farbe, Alphakanäle und unterschiedliche Pixelreihenfolgen (standardmäßig wird BMP von der unteren linken Ecke nach rechts und oben geschrieben, statt 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 hat der Online-Dienstleister CompuServe das GIF (Graphics Interchange Format)-Bilddateiformat eingeführt, um ein komprimiertes Grafikformat bereitzustellen, das alle Mitglieder ihres Dienstes nutzen können. GIF verwendet den Lempel-Ziv-Welch (LZW)-Algorithmus, um 8-Bit indizierte Farbgraphiken verlustfrei zu komprimieren. GIF war eines der ersten zwei 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 (je 8 Bits für Rot, Grün und Blau) dient. Die Länge einer Farbtafel 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 Dithering generell verwendet. Es ist technisch möglich, mehrere Bildblöcke zu kacheln, jede mit ihrer eigenen Farbpalette, um Truecolor-Bilder zu erstellen, aber in der Praxis wird dies selten getan.

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

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

GIF war aufgrund seiner Einfachheit und Kompatibilität über Jahrzehnte hinweg äußerst beliebt. Seine Unterstützung für Animationen führte zu einem Wiederaufleben seiner Popularität in der Ära der sozialen 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 für Interlacing, bei dem Reihen von Pixeln in falscher Reihenfolge 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. In der Regel sollte moderner Inhalt PNG für verlustfreie und indizierte Standbilder verwenden und die Verwendung von APNG für verlustfreie Animationssequenzen in Betracht ziehen.

Das ICO (Microsoft Windows-Symbol)-Dateiformat wurde von Microsoft für Desktopsymbole auf Windows-Systemen entwickelt. Frühe Versionen des Internet Explorers ermöglichten es jedoch, dass eine Website eine ICO-Datei namens favicon.ico im Stammverzeichnis der Website bereitstellen konnte, um ein Favicon festzulegen - ein Symbol, das im Favoritenmenü und an anderen Stellen angezeigt wird, an denen eine ikonische Darstellung der Seite nützlich ist.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem Symbol aufführt. Nach dem Verzeichnis kommen die Daten 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 (typischerweise als "jay-peg" ausgesprochen) Bildformat ist derzeit das am weitesten verbreitete verlustbehaftete Komprimierungsformat für statische Bilder. Es ist besonders nützlich für Fotografien; die Anwendung verlustbehafteter Kompression 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, anstatt eines Dateityps. Die JFIF (JPEG File Interchange Format)-Spezifikation beschreibt das Format der Dateien, die wir als "JPEG"-Bilder ansehen.

Das PNG (ausgesprochen "ping") Bildformat nutzt verlustfreie Komprimierung, während es höhere Farbtiefen als GIF unterstützt und dabei effizienter ist sowie volle Transparenzunterstützung mit Alphakanal bietet.

PNG ist weit verbreitet, wobei alle großen Browser vollständige Unterstützung für seine Funktionen bieten.

SVG ist ein auf XML basierendes Vektorgrafiken-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen spezifiziert, die Formen, Linien, Farben, Filter usw. erzeugen. SVG-Dateien sind ideal für Diagramme, Symbole und andere Bilder, die in jeder Größe genau gezeichnet werden können. Als solches ist SVG populär für Benutzerschnittstellenelemente im modernen Webdesign.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der bei Auswertung das gewünschte Bild zeichnet. Beispielsweise definiert dieses Beispiel einen Zeichnungsbereich mit anfänglicher Größe von 100 mal 100 Einheiten, der eine Diagonale durch das Kästchen umfasst:

<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 beliebigen anderen Bildtyp verwenden können, einschließlich der <img>- und <picture>-Elemente, der background-image-CSS-Eigenschaft und so weiter.

SVG ist eine ideale Wahl für Bilder, die mittels einer Serie von Zeichenbefehlen repräsentiert werden können, besonders wenn die Größe, in der das Bild dargestellt wird, unbekannt ist oder variieren kann, da SVG sich nahtlos auf die gewünschte Größe skalieren lässt. Es ist im Allgemeinen nicht für streng bitmap- oder fotografische Bilder nützlich, obwohl es möglich ist, Bitmap-Bilder innerhalb eines SVG einzuschließen.

TIFF ist ein Rastergrafikdateiformat, das für die Speicherung von gescannten Fotos erstellt wurde, 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 sowohl an den oft enthaltenen Metadaten als auch daran, 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 verschiedene Komprimierungsmethoden, aber die am häufigsten verwendeten sind die CCITT Gruppe 4 (und für ältere Faxsysteme, Gruppe 3) Komprimierungssysteme, die von Faxsoftware verwendet werden, sowie LZW und verlustbehaftete JPEG-Kompression.

Jeder Wert in einer TIFF-Datei wird mit seinem Tag (das zeigt, welche Art von Information es ist, z.B. die Breite des Bildes) und seinem Typ (der das Format angibt, in dem die Daten gespeichert werden) festgelegt, gefolgt von der Länge des Arrays von Werten, die dem Tag zugewiesen werden (alle Eigenschaften werden in Arrays gespeichert, auch einzelne Werte). Dies ermöglicht die Verwendung verschiedener Datentypen für dieselben Eigenschaften. Zum Beispiel wird die Breite eines Bildes, ImageWidth, wird mit Tag 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:

Die Angabe von Typ 4 (LONG) speichert die Breite als 32-Bit-Wert:

Eine einzelne TIFF-Datei kann mehrere Bilder enthalten; dies kann genutzt werden, um mehrseitige Dokumente, z.B. (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax) darzustellen. Allerdings muss die Software, die TIFF-Dateien liest, 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 Print-, Film- oder Fernsehmedien gedacht sind.

Abgesehen von Safari unterstützen Browser nativ keine TIFF-Bilder in Webinhalten, es sei denn durch Nutzung spezieller Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht häufig für die Anzeige von Webinhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien anzubieten, wenn man Fotos und andere Werke bereitstellt, die für präzise Bildbearbeitung oder Druck bestimmt sind.

WebP unterstützt verlustbehaftete Kompression über prädiktive Kodierung basierend auf dem VP8-Videocodec und verlustfreie Kompression, die Substitutionen für sich wiederholende Daten verwendet. Verlustbehaftete WebP-Bilder sind im Durchschnitt 25–35% kleiner als JPEG-Bilder bei visuell ähnlichen Komprimierungsstufen. Verlustfreie WebP-Bilder sind typischerweise 26% kleiner als dieselben Bilder im PNG-Format.

WebP unterstützt auch Animationen: In einer verlustbehafteten WebP-Datei werden die Bilddaten 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 mittlerweile eine breite Unterstützung in den neuesten Versionen der großen Webbrowser, obwohl es keine tiefgreifende historische Unterstützung gibt. Bieten Sie ein Fallback entweder im JPEG- oder im PNG-Format an, z. B. mit dem das <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 aufwerfen kann. Moderne Browser haben XBM-Dateien seit vielen Jahren nicht mehr unterstützt, aber beim Umgang mit älteren Inhalten können Sie einige davon noch 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 entworfen ist) angeben, gefolgt von einem Array von unsigned char, wobei jeder Wert 8 1-Bit-Monochrom-Pixel enthält.

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

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

Das Auswählen 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 Format tendenziell einen spezifischen Anwendungsbereich hat.

Fotografien lassen sich normalerweise gut mit verlustbehafteter Kompression verarbeiten (abhängig von der Konfiguration des Encoders). Das macht JPEG und WebP zu guten Optionen 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 in Erwägung ziehen, beide anzubieten, unter Verwendung eines Fallbacks, wobei WebP die erste Wahl und JPEG die zweite Wahl ist. Andernfalls ist JPEG die sichere Wahl in Bezug auf Kompatibilität.

Für kleinere Bilder wie Symbole sollten Sie ein verlustfreies Format verwenden, um Detailverluste bei 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 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 mit seiner indizierten Kompressionsoption (PNG-8) oft noch kleiner komprimiert.

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

Sofern Sie nicht bei der Qualität Kompromisse eingehen möchten, sollten Sie für Screenshots ein verlustfreies Format 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 Ihre beste Wahl, jedoch wird verlustfreies WebP vermutlich besser komprimiert.

Für jede Grafik, die 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 entscheiden, wie JPEG oder verlustbehaftetes WebP, wägen Sie sorgfältig den Kompressionsgrad 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 Reihe von <source>-Elementen verwendet, wobei jedes eine Version des Bildes in einem anderen Format oder unter verschiedenen Medienbedingungen spezifiziert, sowie ein <img>-Element, das angibt, wo das Bild angezeigt und der Fallback zur Standard- oder "kompatibelsten" Version vorgenommen wird.

Wenn Sie beispielsweise ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, jedoch einen Fallback zu einem PNG oder GIF des Diagramms anbieten möchten, würden Sie es folgendermaßen 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>s angeben, wie Sie möchten, allerdings sind normalerweise 2 oder 3 ausreichend.

• Leitfaden zu Medientypen und -formaten
• Webmedien-Technologien
• Leitfaden zu Video-Codecs im Web
• Die HTML <img>- und <picture>-Elemente
• Die CSS-Eigenschaft background-image
• Der Image()-Konstruktor und die HTMLImageElement-Schnittstelle