Formats d'images en haute résolution pour sites Web

Nous avons tous déjà entendu l'adage « une image en dit plus que mille mots », mais comment vérifier sa véracité ? Existe-t-il un moyen permettant de renforcer l'impact de vos images ? Le choix du format le plus adapté pour une image affichée sur un terminal spécifique, dans des conditions réseau spécifiques et via un navigateur spécifique peut vous aider à optimiser l'impact de votre image.

Penchons-nous sur les fonctionnalités, les caractéristiques et la compatibilité des formats d'images les plus courants utilisés aujourd'hui sur les sites Web, à savoir les formats GIF, JPEG et PNG. Nous fournirons également ces informations pour les nouveaux formats (et les formats spécifiques aux navigateurs) WebP, JPEG 2000 et JPEG XR. Enfin, nous présenterons le format BPG (Better Portable Graphics), un nouveau format d'image conçu pour remplacer le format JPEG.

GIF

Le format GIF (Graphics Interchange Format) est un format d'image bitmap qui s'est répandu sur le Web en raison de sa prise en charge étendue et de sa portabilité.

Il prend en charge jusqu'à 8 bits par pixel pour chaque image, permettant à une image de référencer jusqu'à 256 couleurs différentes. Il prend également en charge les animations (palette distincte d'un maximum de 256 couleurs pour chaque trame) et une transparence de 1 bit.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Oui
Oui
Oui    
Oui
Oui
Oui

JPEG

Le format JPEG (Joint Photographic Experts Group) est un fichier graphique avec perte. Les images JPEG présentent plusieurs extensions de fichiers, y compris .jpg, .jpe, .jif, .jfif et .jfi. Les fichiers JPG présentent 2 sous-formats : JPG/Exif (appareils photo numériques et équipement photographique) et JPG/JFIF (Web).

Le format JPEG prend en charge jusqu'à 16,8 millions de couleurs différentes. Il ne prend en charge ni les animations, ni la transparence.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Oui
Oui
Oui    
Oui
Oui
Oui

PNG

PNG (Portable Network Graphics) est un format sans perte, ce qui signifie que la compression n'affecte pas la qualité de l'image. Format de substitution open source avancé du format GIF (Graphics Interchange Format), le format PNG est surtout utilisé en tant que format de compression d'images sans perte sur Internet.

PNG-8 prend en charge 256 couleurs et une transparence de 1 bit ; PNG-24 prend en charge une transparence de 24 bits et 16,8 millions de couleurs. Le format PNG prend en charge une transparence évolutive (niveau opaque à totalement transparent) via un canal alpha.

Les animations sont prises en charge via l'extension APNG (Animated Portable Network Graphics). Les fichiers PNG animés fonctionnent comme les fichiers GIF animés, mais la prise en charge des images 24 bits et de la transparence 8 bits n'est pas disponible au format GIF. Ce format est également rétrocompatible avec les fichiers PNG non animés. Le format APNG n'est pas encore très utilisé, c'est pourquoi les principaux navigateurs ne le prennent pas en charge.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
De base Oui
Oui
Oui    
Oui
>=7
Oui
Animé Non
Oui
Oui    
Oui
Non
Non

WebP

WebP est un format d'image moderne développé par Google, qui utilise à la fois la compression avec et sans perte. Ce format ouvert, largement disponible depuis 2010, constitue une nouvelle norme de compression avec perte pour les graphiques Web. À l'instar du format JPEG, il pourrait produire des graphiques à trois couleurs dans des tailles plus petites, tout en conservant la même qualité d'image.

Le format WebP prend en charge une transparence de 24 bits et 16,8 millions de couleurs. Il prend également en charge les animations, les profils ICC, les métadonnées XMP et les transparences via un canal alpha.

En plus d'être un format de fichier simple/de base, le format WebP prend également en charge les formats étendus et animés. Le conteneur étendu permet d'intégrer des métadonnées avancées, y compris le profil de couleurs, le contrôle de l'animation, EXIF et XMP. Le format d'image animé inclut plusieurs trames, ainsi que les fragments ANIM (paramètres d'animation globaux) et ANIMF (informations sur une trame).

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
De base >=9
>=29
Non  
Non
Non
>=11,5
Animé >=32
Non
Non   
Non
Non
>=20
Étendu >=23
>=29
Non   
Non
Non
>=12,1

JPEG 2000

Le format JPEG 2000 (JP2) est un standard de compression d'image avec perte et un système de codage. Il a été créé par le comité Joint Photographic Experts Group en 2000 dans le but de remplacer la norme JPEG. Même si le format JP2 peut prendre en charge n'importe quelle profondeur de couleurs, la plupart des mises en œuvre utilisent les couleurs 24 bits.

Le format JP2 (basé sur les ondelettes) n'est pas rétrocompatible avec le format JPEG (basé sur le cosinus discret). Il prend en charge la transparence, mais pas les animations.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Non
Oui
Non
>=5
Non
Non

JPEG XR

Le format JPEG XR (eXtended Range) est un format de fichier et un standard de compression avec et sans perte pour les images photographiques à tons continus, basé sur une technologie développée et brevetée par Microsoft sous le nom de HD Photo. Il prend en charge une profondeur de couleurs allant jusqu'à 32 bits, ainsi que la transparence au moyen d'un canal alpha. Le format JPEG XR ne prend pas en charge les animations.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Non
Non Non     Non
>=10
Non

BPG

BPG (Better Portable Graphics) est un nouveau format d'image qui vise à remplacer le format d'image JPEG lorsque la qualité ou la taille du fichier pose problème. Il présente un ratio de compression élevé : les fichiers sont beaucoup plus petits qu'au format JPEG pour une qualité similaire. Le format BPG prend en charge la compression avec et sans perte, ainsi que la transparence (canal alpha), les animations et les métadonnées intégrées (profils de couleurs, métadonnées XMP et EXIF). Le format BPG prend en charge 14 bits par canal de couleur (contre 8 bits par canal pour le format JPEG).

Aucun navigateur natif ne prend actuellement en charge le format BPG, car l'affichage d'images BPG nécessite une bibliothèque JavaScript de 56 Ko (après compression gzip).

Résumé

Le tableau suivant résume les fonctionnalités et caractéristiques de chacun des formats d'image évoqués, et fournit des informations supplémentaires.

GIF
JPEG PNG : De base PNG : Animé
JPEG 2000
JPEG XR
WebP : De base WebP : Étendu WebP : Animé
Couleur indexée
Oui
Non
Oui
Oui
Non
Non Non Non Non  
En couleurs
Non
Oui
Oui   Oui Oui Oui Oui
Oui Oui  
Transparence binaire
Oui
Non
Oui   Oui Non
Non Non Non Non  
Transparence totale
Non 
Non 
Oui   Oui
Non
Non Oui
Non
Non  
Sous-échantillonnage de la couleur
Non
Oui
Non   Non  Oui 
Oui 4:2:0 4:2:0 4:2:0  
Chargement progressif
Oui
Oui
Oui   Oui
Oui
Oui Non
Non
Non  
Animation Oui
Non
Non  
Oui
Non Non Non
Non
Oui  
Compression avec perte
Oui
Oui
Oui   Oui
Oui
Oui Oui
Oui
Oui  
Compression sans perte
Non
Non
Oui   Oui
Oui
Oui Non
Oui Oui  
Enregistrements d'octets
Mauvais
Satisfaisant
Mauvais  
Satisfaisant
Bon
Bon Bon
Bon
Bon  

Découvrez plus en détail le processus de gestion des formats d'image en ligne les plus connus avec Akamai Image Manager.