Hochauflösende Bildformate für Websites

Ein Bild sagt mehr als Tausend Worte – dieses Sprichwort haben wir wohl alle schon einmal gehört. Aber wie gewährleisten Sie, dass es auch wirklich die Tausend Worte wert ist. Können Sie den Wert Ihrer Bilder sogar noch steigern? Die Auswahl des optimalen Bildformats für die Anzeige unter den jeweiligen Netzwerkbedingungen, auf dem jeweiligen Gerät und im jeweiligen Browser kann den Effekt Ihrer Bilder verbessern.

Im Folgenden untersuchen wir die Funktionen, Eigenschaften und die Kompatibilität der beliebtesten Formate: GIF, JPEG und PNG. Darüber hinaus stellen wir Informationen zu kürzlich eingeführten (browserspezifischen) Formaten bereit: WebP, JPEG 2000 und JPEG XR. Und zu guter Letzt sehen wir uns das BPG-Format (Better Portable Graphics) genauer an, ein neues Bildformat, das JPEG ersetzen soll.

GIF

Beim Graphics Interchange Format (GIF) handelt es sich um ein Bitmap-Bild, das aufgrund seiner breiten Unterstützung und Portabilität häufig im Web eingesetzt wird.

Das Format unterstützt bis zu acht Bits pro Pixel für jedes Bild und ermöglicht so den Einsatz von bis zu 256 Farben. Das Format unterstützt darüber hinaus Animationen (mit 256 Farben für jeden Frame) und 1-Bit-Transparenz.

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Ja
Ja
Ja    
Ja
Ja
Ja

JPEG

Joint Photographic Experts Group (JPEG) ist ein verlustreiches Grafikformat. JPEG-Bilder können verschiedene Dateierweiterungen aufweisen, darunter .jpg, .jpe, .jif, .jfif und .jfi. JPG-Dateien verfügen über zwei Unterformate, JPG/Exif (Digitalkameras und Fotoequipment) und JPG/JFIF (Web).

JPEG unterstützt bis zu 16,8 Millionen verschiedene Farben. Das Format erlaubt jedoch keine Animation oder Transparenz.

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Ja
Ja
Ja    
Ja
Ja
Ja

PNG

Bei Portable Network Graphics (PNG) handelt es sich um ein verlustfreies Format. Das bedeutet, dass die Komprimierung keine Auswirkungen auf die Qualität des Bildes hat. PNG wurde als verbesserte Open-Source-Version des Graphics Interchange Format (GIF) entwickelt und stellt im Internet das verlustärmste Format der Bildkomprimierung dar.

PNG-8 unterstützt 256 Farben und 1-Bit-Transparenz – bei PNG-24 sind es 24 Bit und 16,8 Millionen Farben. Darüber hinaus unterstützt PNG über den Alphakanal verschiedene Transparenzgrade (von teilweiser bis zu vollständiger Transparenz).

Und über die APNG-Erweiterung (Animated Portable Network Graphics) werden auch Animationen unterstützt. Diese ermöglicht animierte PNG-Dateien, die sich ähnlich verhalten wie GIF-Dateien, aber im Gegensatz zu GIF 24-Bit-Bilder und 8-Bit-Transparenz unterstützen. Darüber hinaus bietet das Format Abwärtskompatibilität mit nicht animierten PNG-Dateien. Bisher konnte sich APNG noch nicht durchsetzen und wird dementsprechend noch nicht von den größten Browsern unterstützt.

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Standard Ja
Ja
Ja    
Ja
Ab Version 7
Ja
Animiert Nein
Ja
Ja    
Ja
Nein
Nein

WebP

WebP ist ein modernes Bildformat, das von Google entwickelt wurde und die Bildkomprimierung mit oder ohne Verluste ermöglicht. Das offene Format wurde 2010 eingeführt, um einen neuen verlustbehafteten Komprimierungsstandard für Webgrafiken bereitzustellen. Wie JPEG kann es farbechte Grafiken mit geringeren Paketgrößen generieren und dabei eine ähnliche Bildqualität beibehalten.

WebP unterstützt 24 Bit und 16,8 Millionen Farben. Das Format unterstützt darüber hinaus Animationen, ICC-Profile, XMP-Metadaten und Transparenz per Alphakanal.

Zusätzlich zum einfachen/Basisdateiformat unterstützt WebP auch erweiterte und animierte Formate. Der erweiterte Container erlaubt die Einbettung umfangreicher Metadaten, einschließlich Farbprofil, Animationssteuerung, EXIF und XMP. Das animierte Bildformat umfasst mehrere Frames, einschließlich ANIM- (globale Animationsparameter) und ANIMF-Chunks (Informationen der einzelnen Frames).

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Standard Ab Version 9
Ab Version 29
Nein  
Nein
Nein
Ab Version 11,5
Animiert Ab Version 32
Nein
Nein   
Nein
Nein
Ab Version 20
Erweitert Ab Version 23
Ab Version 29
Nein   
Nein
Nein
Ab Version 12,1

JPEG 2000

JPEG 2000 (JP2) ist Kodiersystem mit verlustbehafteter und verlustfreier Komprimierung. Es wurde 2000 vom Joint Photographic Experts Group-Komitee entwickelt, um den JPEG-Standard abzulösen. Zwar unterstützt JP2 Farbtiefe mit beliebig vielen Bits, die meisten Implementierungen jedoch nutzen 24-Bit-Farben.

JP2 (Wavelet-basiert) ist nicht abwärtskompatibel mit JPEG (basiert auf diskretem Kosinus). JP unterstützt Transparenz, aber keine Animation.

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Nein
Ja
Nein
Ab Version 5
Nein
Nein

JPEG XR

JPEG XR (eXtended Range) ist ein Dateiformat mit verlustbehafteter und verlustfreier Komprimierung für Fotografien mit einheitlichen Farben. Das Format basiert auf einer Technologie, die Microsoft ursprünglich unter dem Namen „HD Photo“ entwickelt und patentiert hatte. JPEG XR unterstützt bis zu 32 Bit Farbtiefe sowie Transparenz per Alphakanal. Das Format erlaubt jedoch keine Animation.

Chrome
Chrome (iOS)
Firefox    
Safari
Internet Explorer/Edge
Opera
Nein
Nein Nein     Nein
Ab Version 10
Nein

BPG

BPG (Better Portable Graphics) ist ein neues Bildformat, das JPEG in Fällen ersetzen soll, in denen Qualität oder Dateigröße zum Problem werden. Das Format bietet eine starke Komprimierung, die bei JPEG- oder ähnlicher Qualität zu deutlich kleineren Dateien führt. BPG unterstützt die verlustfreie und verlustbehaftete Komprimierung, Transparenz (per Alphakanal), Animation und eingebettete Metadaten (Farbprofile, XMP und EXIF). Das Format unterstützt 14 Bit pro Farbkanal (im Gegensatz zu 8 Bit pro Kanal bei JPEG).

Aktuell wird BPG von Browsern nicht nativ unterstützt, weshalb für die Anzeige von BPG-Bildern eine (nach dem Packen mit Gzip) 56 KB große JavaScript-Bibliothek erforderlich ist.

Zusammenfassung

Die folgende Tabelle enthält zusätzliche Informationen zu den Funktionen und Eigenschaften der einzelnen Bildformate.

GIF
JPEG PNG: Standard PNG: Animiert
JPEG 2000
JPEG XR
WebP: Standard WebP: Erweitert WebP: Animiert
Indizierte Farbe
Ja
Nein
Ja
Ja
Nein
Nein Nein Nein Nein  
Vollfarbe
Nein
Ja
Ja   Ja Ja Ja Ja
Ja Ja  
Binäre Transparenz
Ja
Nein
Ja   Ja Nein
Nein Nein Nein Nein  
Vollständige Transparenz
Nein 
Nein 
Ja   Ja
Nein
Nein Ja
Nein
Nein  
Farbunterabtastung
Nein
Ja
Nein   Nein  Ja 
Ja 4:2:0 4:2:0 4:2:0  
Progressives Laden
Ja
Ja
Ja   Ja
Ja
Ja Nein
Nein
Nein  
Animation Ja
Nein
Nein  
Ja
Nein Nein Nein
Nein
Ja  
Verlustbehaftete Komprimierung
Ja
Ja
Ja   Ja
Ja
Ja Ja
Ja
Ja  
Verlustfreie Komprimierung
Nein
Nein
Ja   Ja
Ja
Ja Nein
Ja Ja  
Byte-Reduzierung
Schlecht
Okay
Schlecht  
Okay
Gut
Gut Gut
Gut
Gut  

Erfahren Sie, wie Sie die beliebtesten Onlinebildformate mit Akamai Image Manager verwalten können.