Leitfaden zu Bilddateitypen und -formaten

Häufig verwendete Bilddateitypen

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 für Webinhalte vermieden werden sollten (in der Regel, weil sie entweder keine breite Browserunterstützung haben oder es bessere Alternativen gibt).

Details zu Bilddateiformaten

Die folgenden Abschnitte geben einen kurzen Überblick über jeden der Bilddateitypen, die von Webbrowsern unterstützt werden.

In den unten stehenden 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. Andererseits ist die Bit-Tiefe die Gesamtanzahl der Bits, die benötigt werden, um jedes Pixel im Speicher darzustellen.

APNG (Animated Portable Network Graphics)

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

APNG ist ideal für grundlegende Animationen, die nicht mit anderen Aktivitäten oder mit einer Tonspur synchronisiert werden müssen, wie etwa Fortschrittsanzeigen, Aktivitätsdrehungen 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-App auf iOS) unterstützt werden. Sie werden auch häufig für die animierten Teile von Benutzeroberflächen von Webbrowsern verwendet.

AVIF-Bild

AV1 Image File Format (AVIF) ist ein leistungsstarkes, quelloffenes, lizenzfreies Dateiformat, das AV1-Bitstreams 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 signifikanten Fortschritten bei der Video-Encoding in den letzten Jahren und kann möglicherweise von der damit verbundenen Unterstützung für Hardware-Rendering profitieren. Es hat jedoch auch Nachteile in einigen Fällen, da Video- und Bild-Encoding 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).
• Generell hat AVIF eine bessere Kompression als WebP – mediane 50% vs. 30% Kompression für denselben JPG-Satz (Quelle: AVIF WebP Vergleich (CTRL Blog)).
• Verluste Kompression.
• Animationen/Multi-Bild-Speicherung (ähnlich wie animierte GIFs, aber mit viel besserer Kompression)
• Alpha-Kanal-Unterstützung (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 Farbspektrum: 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 realen Benutzererfahrungen, da AVIF-Dateien viel kleiner als die entsprechenden JPEG- oder PNG-Dateien sind und daher viel schneller heruntergeladen und angezeigt werden können. Bei größeren Dateigrößen kann der Einfluss signifikant werden, und Sie sollten erwägen, ein Format zu verwenden, 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 aufweist), sollten Sie ein Fallback in WebP, JPEG oder PNG Format bieten, indem Sie das <picture>-Element (oder eine andere Methode) verwenden.

BMP (Bitmap-Datei)

Der BMP (Bitmap Image) Dateityp ist vor allem auf Windows-Computern verbreitet und wird allgemein nur für Sonderfälle in Web-Apps und Inhalten genutzt.

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 aus 3 Bytes besteht, 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 genutzt und oft gar nicht implementiert. Diese Eigenschaften beinhalten: Unterstützung für unterschiedliche Bit-Tiefen, indizierte Farben, Alphakanäle und unterschiedliche Pixelanordnungen (standardmäßig wird BMP von der unteren linken Ecke zur rechten und nach oben navigiert, anstatt von der oberen linken Ecke zur rechten und nach unten).

Theoretisch werden mehrere Kompressionsalgorithmen 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 (Graphics Interchange Format) Bilddateiformat ein, 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 Farb-Grafiken 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 dient (8 Bit je für Rot, Grün und Blau). Die Länge einer Farbpalette ist stets eine Zweierpotenz (also hat jede Palette 2, 4, 8, 16, 32, 64 oder 256 Einträge). Um mehr als 255 oder 256 Farben zu simulieren, wird im Allgemeinen Dithering verwendet. Es ist technisch möglich, mehrere Bildblöcke mit jeweils eigener Farbpalette zu kacheln, um echte Farbbilder zu erstellen, aber in der Praxis wird dies selten gemacht.

Pixel sind undurchsichtig, es sei denn, ein bestimmter Farbindex wird als transparent definiert. In diesem Fall sind Pixel mit diesem Wert 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 Rahmen ändern.

GIF war über Jahrzehnte hinweg extrem populär, was seiner Einfachheit und Kompatibilität zu verdanken ist. Seine Animation unterstützte eine Wiederbelebung 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 von Interlacing, bei dem Pixelreihen in einer anderen Reihenfolge 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 das Konvertieren von Vollfarbbildern nach GIF zu unbefriedigendem Dithering führen kann. Typischerweise sollten moderne Inhalte PNG für verlustfreie und indizierte Standbilder verwenden und sollten erwägen, APNG für verlustfreie Animationssequenzen zu verwenden.

ICO (Microsoft Windows Icon)

Das ICO (Microsoft Windows Icon) Dateiformat wurde von Microsoft für Desktop-Symbole von Windows-Systemen entworfen. Noch früher führte Internet Explorer die Möglichkeit ein, dass eine Website eine ICO-Datei mit dem Namen favicon.ico im Stammverzeichnis einer Webseite bereitstellen konnte um ein**Favicon** anzugeben — ein Symbol, das im Favoritenmenü angezeigt wird, und an anderen Stellen, an denen eine symbolische Darstellung der Seite hilfreich wäre.

Eine ICO-Datei kann mehrere Symbole enthalten und beginnt mit einem Verzeichnis, das Details zu jedem Listet. 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 sein (einschließlich des Dateikopfs). 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.

JPEG (Joint Photographic Experts Group Image)

Das JPEG (typischerweise "Jay-Peg" ausgesprochen) Bildformat ist derzeit das am häufigsten verwendete verlustbehaftete Komprimierungsformat für Standbilder. 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 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.

PNG (Portable Network Graphics)

Das PNG (ausgesprochen "ping") Bildformat verwendet verlustfreie Kompression und unterstützt höhere Farbtiefen als GIF und ist dabei effizienter, sowie mit voller Alphatransparenz-Unterstützung.

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

SVG (Scalable Vector Graphics)

SVG ist ein XML-basiertes Vektorgrafik-Format, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen spezifiziert, die Formen, Linien zeichnen und Farben, Filter usw. anwenden. 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 in modernem Webdesign.

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 diagonal durch die Box gezeichnete 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 auf drei Arten in Webinhalten 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 in HTML mittels Elementen wie <iframe>, <object> und <embed> eingebettet sein.
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, usw. 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, insbesondere wenn die Größe, in der das Bild gerendert wird, unbekannt ist oder variieren kann, da SVG sanft auf die gewünschte Größe skaliert. Es ist im Allgemeinen nicht nützlich für strikt Bitmap- oder fotografische Bilder, obwohl es möglich ist, Bitmap-Bilder innerhalb eines SVG zu inkludieren.

TIFF (Tagged Image File Format)

TIFF ist ein Rastergrafik-Dateiformat, das erstellt wurde, um gescannte Fotos zu speichern, obwohl es jede Art von Bild sein kann. Es ist ein etwas "schweres" Format, da TIFF-Dateien tendenziell größer als Bilder in anderen Formaten sind. Dies liegt an den oft enthaltenen Metadaten sowie der Tatsache, dass die meisten TIFF-Bilder entweder unkomprimiert sind oder Kompressionsalgorithmen verwenden, die immer noch ziemlich große Dateien nach der Kompression belassen.

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

Jeder Wert in einer TIFF-Datei wird mit seinem Tag (das angibt, welche Art von Information es ist, wie etwa die Breite des Bildes) und seinem Typ (das 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 Einzelwerten). Dadurch können für dieselben Eigenschaften unterschiedliche Datentypen verwendet werden. Zum Beispiel ist die Breite eines Bildes, ImageWidth, mit dem Tag 0x0100 gespeichert und ist ein Array mit einem Eintrag. Wenn der Typ 3 (SHORT) spezifiziert wird, wird der Wert von ImageWidth als 16-Bit-Wert gespeichert:

Beim Spezifizieren 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, zum Beispiel (wie ein mehrseitiges gescanntes Dokument oder ein empfangenes Fax). Allerdings muss Software, die TIFF-Dateien liest, 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 Fernseher vorgesehen sind.

Mit Ausnahme von Safari unterstützen Browser TIFF-Bilder in Webinhalten nicht nativ, außer durch spezielle Bibliotheken oder Browser-Add-ons. Daher werden TIFF-Dateien nicht zum Anzeigen von Webinhalten weit verbreitet verwendet, jedoch ist es üblich, herunterladbare TIFF-Dateien bereitzustellen, wenn Fotos und andere Kunstwerke verteilt werden sollen, die für präzises Bearbeiten oder Drucken bestimmt sind.

WebP-Bild

WebP unterstützt verlustbehaftete Kompression durch prädiktives Kodieren basierend auf dem VP8-Videocodec 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 typischerweise 26 % kleiner als die gleichen 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 enthalten den ANIM-Chunk, der die Animation beschreibt, und den ANMF-Chunk, der einen Frame einer Animationssequenz repräsentiert. 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 hat. Bieten Sie ein Fallback in entweder JPEG oder PNG Format, 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 potenziell Sicherheitsbedenken aufwerfen kann. Moderne Browser haben seit vielen Jahren keine Unterstützung für XBM-Dateien mehr, aber wenn man mit älteren Inhalten umgeht, kann man noch auf einige stoßen.

XBM verwendet ein C-Code-Snippet, um den Inhalt des Bildes als ein Array von Bytes darzustellen. Jedes Bild besteht aus 2 bis 4 #define Anweisungen, die die Breite und Höhe des Bitmaps angeben (und optional den Hotspot, wenn das Bild als Cursor konzipiert ist), gefolgt von einem Array aus unsigned char, bei dem jeder Wert acht 1-Bit Monochrom-Pixel enthält.

Das Bild muss ein Vielfaches von 8 Pixeln breit sein. Zum 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
};

Auswahl eines Bildformats

Die Wahl des besten Bildformats für Ihre Bedürfnisse ist wahrscheinlich einfacher als Videoformate, da es weniger Optionen mit breiter Unterstützung gibt und jedes Format in der Regel eine bestimmte Menge an Anwendungsfällen hat.

Fotografien

Fotografien eignen sich typischerweise 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 kompatibler ist, WebP jedoch möglicherweise eine bessere Kompression bietet. Um die Qualität zu maximieren und die Downloadzeit zu minimieren, sollten Sie in Erwägung ziehen, beide Formate mit einem Fallback bereitzustellen, wobei WebP die erste Wahl und JPEG die zweite ist. Andernfalls ist JPEG die sichere Wahl für Kompatibilität.

Symbole

Für kleinere Bilder wie Symbole verwenden Sie ein verlustfreies Format, um einen Detailverlust 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 eine 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 in der Regel mit seiner indizierten Kompressionsoption (PNG-8) 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 skalieren lässt, was es perfekt für responsives Design macht. Obwohl die Unterstützung für SVG gut ist, kann es sich lohnen, für ältere Browser einen PNG-Fallback anzubieten.

Bildschirmfotos

Sofern Sie nicht bereit sind, Abstriche bei der Qualität zu machen, sollten Sie für Bildschirmfotos ein verlustfreies Format verwenden. Dies ist besonders wichtig, wenn Text in Ihrem Bildschirmfoto enthalten ist, da Text bei verlustbehafteter Kompression leicht unscharf und unklar wird.

PNG ist wahrscheinlich Ihre beste Option, aber verlustfreies WebP wird vermutlich besser komprimiert.

Diagramme, Zeichnungen und Grafiken

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 entscheiden, wie JPEG oder verlustbehaftetes WebP, sollten Sie den Komprimierungsgrad sorgfältig abwägen, um zu vermeiden, dass Text oder andere Formen unscharf oder unklar werden.

Bereitstellung von Bild-Fallbacks

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, die jeweils eine Version des Bildes in einem anderen Format oder unter verschiedenen Medienbedingungen angeben, sowie ein <img>-Element, das angibt, wo das Bild angezeigt wird, und das Fallback zur Standard- oder "kompatibelsten" Version.

Wenn Sie beispielsweise ein Diagramm anzeigen, das am besten mit SVG dargestellt wird, aber einen Fallback zu einem 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>-Elemente angeben, wie Sie wünschen, obwohl in der Regel 2 oder 3 ausreichend sind.

Siehe auch

• Leitfaden zu Medientypen und -formaten
• Web-Medientechnologien
• Leitfaden zu Videocodecs, die im Web verwendet werden
• Die HTML <img>- und <picture>-Elemente
• Die CSS-background-image-Eigenschaft
• Der Image()-Konstruktor und die HTMLImageElement-Schnittstelle