Leitfaden zu Bilddateitypen und -formaten

Allgemeine Bilddateitypen

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

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

Details zu Bilddateitypen

In den folgenden Abschnitten erhalten Sie einen kurzen Überblick über jeden der von Webbrowsern unterstützten Bilddateitypen.

In den untenstehenden Tabellen bezieht sich der Begriff Bits pro Komponente auf die Anzahl der Bits, die zur Darstellung 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. Die Bit-Tiefe wiederum ist die Gesamtanzahl der Bits, die zur Darstellung jedes Pixels im Speicher verwendet werden.

APNG (Animated Portable Network Graphics)

APNG ist ein Dateiformat, das erstmals von Mozilla eingeführt wurde, um den PNG-Standard zu erweitern und die Unterstützung für animierte Bilder hinzuzufügen. Konzeptionell ähnlich dem animierten GIF-Format, das seit Jahrzehnten verwendet wird, ist APNG in der Lage, verschiedene Farbtiefen zu unterstützen, 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 beispielsweise Fortschrittsanzeigen, Aktivitätsindikatoren ("throbbers") und andere animierte Sequenzen. Beispielsweise ist APNG eines der unterstützten Formate beim Erstellen animierter Sticker für Apples iMessage-Anwendung (und die Nachrichten-Anwendung auf iOS). Sie werden auch häufig für die animierten Teile der Benutzeroberflächen von Webbrowsern verwendet.

AVIF-Bild

Das AV1-Bilddateiformat (AVIF) ist ein leistungsstarkes, quelloffenes, gebührenfreies Dateiformat, das AV1-Bitströme 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 der letzten Jahre und kann möglicherweise von der damit verbundenen Unterstützung für Hardware-Rendering profitieren. Es hat jedoch auch Nachteile in bestimmten Fällen, da Video- und Bildkodierung unterschiedliche Anforderungen haben.

Das Format bietet:

• Hervorragende verlustbehaftete Komprimierung im Vergleich zu JPG und PNG bei visuell ähnlichen Komprimierungsgraden (z.B. sind verlustbehaftete AVIF-Bilder etwa 50% kleiner als JPEG-Bilder).
• Allgemein hat AVIF eine bessere Komprimierung als WebP - median 50% vs. 30% Komprimierung für denselben JPG-Satz (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verlustfreie Komprimierung.
• Unterstützung für Animationen/Mehrbildspeicher (ähnlich wie animierte GIFs, jedoch mit viel besserer Komprimierung)
• Unterstützung für Alphakanäle (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.
• Großer Farbraum: Unterstützung für Bilder, die einen größeren Farbbereich 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 die tatsächliche Benutzererfahrung, da AVIF-Dateien viel kleiner sind als die entsprechenden JPEG- oder PNG-Dateien und daher schneller heruntergeladen und angezeigt werden können. Für größere Dateigrößen kann der Effekt signifikant werden und Sie sollten die Verwendung eines Formats 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 ein Fallback in WebP, JPEG oder PNG Format mit Hilfe des <picture>-Elements (oder einem anderen Ansatz) bereitstellen.

BMP (Bitmap-Daten)

Der BMP (Bitmap Image) Dateityp ist hauptsächlich 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 von internen Datenrepräsentationen. Die einfachste und am häufigsten verwendete Form einer BMP-Datei ist ein unkomprimiertes Rasterbild, bei dem jedes Pixel 3 Bytes belegt, die seine roten, grünen und blauen Komponenten darstellen, und jede Zeile mit 0x00 Bytes zu einem Vielfachen von 4 Bytes Breite aufgefüllt wird.

Während andere Datenrepräsentationen in der Spezifikation definiert sind, sind sie nicht weit verbreitet und oft völlig unimplementiert. Diese Funktionen umfassen: Unterstützung für verschiedene Bit-Tiefen, indizierte Farben, Alphakanäle und verschiedene Pixelreihenfolgen (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 in der BMP-Datei gespeichert werden.

GIF (Graphics Interchange Format)

Im Jahr 1987 führte der Online-Dienstanbieter CompuServe das GIF-Dateiformat (Graphics Interchange Format) ein, um ein komprimiertes Grafikformat bereitzustellen, das alle Mitglieder ihres Dienstes verwenden können. 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 einzigen 8-Bit-Wert dargestellt, der als Index in eine Palette von 24-Bit-Farben (jeweils 8 Bit 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, die jeweils ihre eigene Palette haben, um echte Farbbilder zu erstellen, aber in der Praxis wird dies selten gemacht.

Pixel sind undurchsichtig, es sei denn, ein bestimmter Farbindex ist als transparent festgelegt, in diesem Fall sind Pixel in dieser Farbe vollständig transparent.

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

GIF ist seit Jahrzehnten äußerst populär, dank seiner Einfachheit und Kompatibilität. Die Unterstützung für Animationen führte zu einem Wiederaufleben der Popularität im Zeitalter der sozialen Medien, als animierte GIFs begann, weithin für kurze "Videos", Memes und andere einfache Animationssequenzen verwendet zu werden.

Ein weiteres beliebtes Feature von GIF ist die Unterstützung für Interlacing, bei dem Pixelreihen aus der Reihenfolge gespeichert werden, so dass 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 Umwandlung von Farbbildern in GIF zu unbefriedigendem Dithering führen kann. Normalerweise sollte moderne Inhalte PNG für verlustfreie und indizierte Standbilder verwenden und APNG für verlustfreie Animationssequenzen in Erwägung ziehen.

ICO (Microsoft Windows-Symbol)

Das ICO (Microsoft Windows-Symbol) Dateiformat wurde von Microsoft für Desktopsymbole von Windows-Systemen entwickelt. Frühere Versionen des Internet Explorer führten jedoch die Möglichkeit ein, dass eine Website eine ICO-Datei mit dem Namen favicon.ico im Stammverzeichnis einer Website bereitstellen kann, um ein Favicon zu spezifizieren - ein Symbol, das im Favoritenmenü angezeigt wird und an anderen Orten, wo eine symbolische Darstellung der Website nützlich ist.

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

JPEG (Joint Photographic Experts Group Image)

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 Diagramme, kann zu unzufriedenstellenden Ergebnissen führen.

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

PNG (Portable Network Graphics)

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

PNG ist weit verbreitet, da alle großen Browser eine volle Unterstützung für seine Funktionen bieten.

SVG (Scalable Vector Graphics)

SVG ist ein XML-basiertes Vektorgraphik- 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, Symbole und andere Bilder, die in jeder Größe genau gezeichnet werden können. Daher ist SVG beliebt für Benutzerschnittstellenelemente im modernen Webdesign.

SVG-Dateien sind Textdateien, die Quellcode enthalten, der, wenn interpretiert, das gewünschte Bild zeichnet. Zum Beispiel beschreibt dieses Beispiel einen Zeichenbereich mit anfangs 100 x 100 Einheiten Größe, der eine diagonal durch die Box gezogene Linie enthält:

<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 drei Arten verwendet werden:

1. Ein <svg>-Element kann direkt innerhalb des HTML erscheinen. Es kann SVG-Elemente enthalten, um das Bild zu zeichnen.
2. Ein SVG-Bild kann mit Elementen wie <iframe>, <object> und <embed> eingebettet werden.
3. Es ist möglich, SVG-Bilder überall zu verwenden, wo auch andere Bildtypen verwendet werden können, einschließlich des <img>-Elements, der background-image CSS-Eigenschaft und so weiter. Es gibt jedoch zusätzliche Einschränkungen, wenn SVG auf diese Weise verwendet wird.

SVG ist eine ideale Wahl für Bilder, die mit einer Reihe von Zeichenbefehlen dargestellt werden können, besonders wenn die Größe, in der das Bild gerendert wird, unbekannt ist oder variieren kann, da SVG nahtlos auf die gewünschte Größe skaliert wird. Es ist im Allgemeinen nicht nützlich für streng bitmapbasierte oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder innerhalb eines SVGs zu integrieren.

TIFF (Tagged Image File Format)

TIFF ist ein Rastergrafik-Dateiformat, 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. Das liegt daran, dass oft Metadaten enthalten sind, sowie der Tatsache, dass die meisten TIFF-Bilder entweder unkomprimiert sind oder Komprimierungsalgorithmen verwenden, die nach der Komprimierung immer noch recht große Dateien hinterlassen.

TIFF unterstützt eine Vielzahl von Komprimierungsmethoden, aber am häufigsten sind die CCITT Group 4 (und, für ältere Faxsysteme, Group 3) Kompressionssysteme, die von Faxsoftware verwendet werden, sowie LZW- und verlustbehaftete JPEG-Komprimierung.

Jeder Wert in einer TIFF-Datei wird unter Verwendung seines Tags angegeben (der anzeigt, welche Art von Information er ist, wie die Breite des Bildes) und seines Typs (der angibt, in welchem Format die Daten gespeichert werden), gefolgt von der Länge des Wertearrays, das diesem Tag zugewiesen wird (alle Eigenschaften werden in Arrays gespeichert, auch für Einzelwerte). Dies ermöglicht es, verschiedene Datentypen für dieselben Eigenschaften zu verwenden. Zum Beispiel wird die Breite eines Bildes, ImageWidth, durch das Tag 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:

Durch die Angabe des Typs 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 (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax). Software zum Lesen von TIFF-Dateien 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 Fernsehmedien bestimmt sind.

Abgesehen von Safari unterstützen Browser keine TIFF-Bilder in Webinhalten nativ, es sei denn durch die Verwendung spezieller Bibliotheken oder Browsererweiterungen. Infolgedessen werden TIFF-Dateien nicht für die Anzeige von Webinhalten verwendet, aber es ist üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke verteilt werden sollen, die für präzise Bearbeitung oder zum Drucken geeignet sind.

WebP-Bild

WebP unterstützt verlustbehaftete Komprimierung durch prädiktive 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 visuell ähnlichen Komprimierungsgraden. 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 das ANIM-Segment, das die Animation beschreibt, und das ANMF-Segment, das einen Frame einer Animationssequenz darstellt. Wiederholung wird unterstützt.

WebP hat jetzt breite Unterstützung in den neuesten Versionen der großen Webbrowser, obwohl es keine tiefgehende historische Unterstützung hat. Stellen Sie ein Fallback entweder im JPEG- oder PNG-Format bereit, wie zum Beispiel mit dem <picture>-Element.

XBM (X Window System Bitmap-Datei)

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 Sicherheitsbedenken hat. Moderne Browser haben seit vielen Jahren keine XBM-Dateien mehr unterstützt, aber wenn Sie mit älteren Inhalten arbeiten, finden Sie möglicherweise noch einige.

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 den Hotspot, wenn das Bild als Cursor entworfen ist) bereitstellen, gefolgt von einem Array von unsigned char, wobei jeder Wert acht 1-Bit-Pixel in Schwarzweiß enthält.

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

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

Auswahl eines Bildformats

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 in der Regel eine spezifische Menge an Anwendungsfällen hat.

Fotografien

Fotografien eignen sich normalerweise gut für verlustbehaftete Kompression (abhängig von der Konfiguration des Encoders). Das macht JPEG und WebP zu guten Optionen für Fotografien, wobei JPEG universeller kompatibel ist, WebP jedoch möglicherweise eine bessere Kompression bietet. Um die Qualität zu maximieren und die Downloadzeit zu minimieren, sollten Sie in Betracht ziehen, beide mit einem Fallback bereitzustellen, wobei WebP die erste Wahl und JPEG die zweite ist. Ansonsten ist JPEG die sichere Wahl für die Kompatibilität.

Symbole

Für kleinere Bilder wie Symbole verwenden Sie ein verlustfreies Format, um den Verlust von Details 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, sodass PNG die 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 Kompressionsoption (PNG-8) häufig noch kleiner komprimiert.

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

Screenshots

Es sei denn, Sie sind bereit, Qualitätseinbußen hinzunehmen, 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 verschwommen und unklar wird.

PNG ist wahrscheinlich die beste Wahl, aber verlustfreies WebP bietet möglicherweise eine bessere Kompression.

Diagramme, Zeichnungen und Charts

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 verschwommen oder unklar werden.

Bereitstellung von Bild-Fallbacks

Während das Standard-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, von denen jedes eine Version des Bildes in einem anderen Format oder unter anderen Medienbedingungen spezifiziert, sowie ein <img>-Element, das definiert, wo das Bild angezeigt werden soll und das Fallback auf die Standardeinstellung oder die "kompatibelste" Version.

Wenn Sie beispielsweise ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, aber ein Fallback auf ein PNG oder GIF des Diagramms anbieten möchten, würden Sie dies in etwa so 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>-Elemente angeben, wie Sie möchten, obwohl 2 oder 3 typischerweise ausreichen.

Siehe auch

• 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