La question est là et souvent posé par les marketeurs  : quel format des images sur le web ?  Je reformulerais la question comme cela : quel format et quelle résolution d’image pour le web ?

Pour internet, il existe 3 formats de fichiers reconnus pour les images web et correctement affichés par tous les navigateurs : le GIF, le JPEG (ou JPG) et le PNG. Il y a aussi le WebP de Google qui est devenu universel (tandis qu’Apple, à la traîne sur ce marché, peine à faire reconnaître son format .HEIF). En effet, bien que peu connu et donc peu utilisé, le format WebP est accepté aujourd’hui par tous les navigateurs.

Explication sur la qualité d’une image

Une image a pour rôle de donner une représentation visuelle ou mentale d’une personne, d’un objet, d’un concept, etc. Sa qualité est importante pour qu’elle ne vienne pas troubler la réception du message qu’elle porte (voir le schéma de Shannon et Weaver en communication – les bruits et parasites).

Elle est importante aussi parce que la qualité des publications  (images comprises) influe sur l’image de marque de l’entreprise et donc sur sa notoriété.

Composition d’une image sur le web

Pour le web, la résolution standard est de 72 dpi pour 1 carré de 2,54 cm.

Un visuel est composé de milliers de points appelés des pixels. La résolution de l’image est exprimé en (Dots Per Inch) DPI généralement. Si vous êtes un défenseur de la langue française, vous vous exprimerez en PPP (points par pouce ou pixels par pouce, à votre convenance).

Lorsqu’on parle de 72 DPI pour un visuel sur le web (ce qui correspond à la qualité moyenne utilisée pour un compromis entre le poids du fichier et la qualité visuelle de l’image), cela représente donc :

72 points en colonne X 72 lignes de points par pouce au carré.

Note : 1 pouce = 2,54 cm

Format des images sur le web : résolution standard web : 72 dpi

Colométrie de l’image

La colométrie standard est le RVB (rouge, vert, bleu) dit aussi synthèse soustractive.

La synthèse soustractive des couleurs est le procédé consistant à combiner l’absorption d’au moins trois colorants pour obtenir les nuances d’une gamme. Le terme soustractif vient du fait qu’un objet coloré absorbe une partie de la lumière incidente. Il soustrait donc de l’énergie de celle-ci. – wikipédia

Pour le web, un développeur ou un concepteur de sites, on utilisera plutôt le Hex Color Code (HEX ou HEXA pou hexadécimal) qui commence toujours par un #. Exemple : #ff9900 correspond au orange utilisé sur ce site.

Format des images sur le web : type de fichiers les plus utilisés

Pour faire simple, nous vous proposons un tableau récapitulatif des avantages et des inconvénients pour chaque format compatible avec tous les navigateurs.

FormatsDescriptionAvantagesInconvénients
GIF
(Graphics Interchange Format)
Conçu pour transférer rapidement des images web avec un accès internet bas débit.
Le GIF est principalement utilisé pour les icônes et les animations.
• Peut être animé
• Très léger
• Compression sans perte
• Gère la transparence
• Ne restitue pas les nuances (lumières, ombres, dégradés)
• N’affiche que 256 couleurs maximum
JPEG
(Joint Photographic Expert Group)
Parmi les 1ers formats pour le web, il est conçu pour être un format universel. Il s’emploie principalement pour les photographies numériques et les images complexes (nuances, dégradés). Bien compressée et optimisée, une photo peut faire moins de 100 Ko (kilo-octet). Bref, c’est le format pour obtenir de la qualité sur le net puisqu’il gère des millions de couleurs. Par défaut, sa résolution est de 72 dpi (version RVB pour les couleurs).• Formant standard pour les photographies numériques
• Affiche 16.7 millions de couleurs
• Restitue les images complexes (nuances, dégradés)
• Chargement progressif des images possible
• Ne peut pas être animé
• Compression avec perte de qualité, mais réglable
• Ne gère pas la transparence
PNG
(Portable Network Graphics)

8 et 24
Alternative au GIF depuis 1996, il existe en 2 versions :
– PNG 8 (bits) semblable au GIF, mais plus léger. Il est principalement utilisé pour les images web avec transparence.
– PNG 24 (bits) semblable au JPEG, mais avec une compression sans perte et un poids de fichier plus élevé. Il est principalement utilisé aussi pour les images web en transparence et les nuances de couleurs quand le poids du fichier n’est pas limité.
• Compression sans perte
• PNG 8 : plus léger que le GIF
• PNG 8 : gère mieux la transparence que le GIF
• PNG 24 : affiche jusqu’à 16.7 millions de couleurs
• Ne peut pas être animé
• PNG 8 : affiche 256 couleurs comme le GIF
• PNG 24 : fichier plus lourd que le JPEG

 

Format des images sur le web : autres

Nous continuerons avec des formats qui ne sont pas universels, mais qui sont gérés par le plus grand nombre de navigateurs.

FormatsDescriptionsAvantagesInconvénients
SVG
( Scalable Vector Graphic )
Créé par IBM, Apple, Microsoft et Xerox, il est de taille réduite puisqu’il stocke les informations descriptives des formes (XML) et non les pixels.
On l’utilise pour des visuels simples (graphiques ou icônes) dans le cadre des sites responsives.
• Étirable sans perte de qualité
• Facilement modifiable et étirable, sans perte de qualité
• Taille de fichier réduite
• Résolution optimale
• Peut être stylé via le CSS
• Peut être animé par JavaScript
• Ne gère pas les photos
• Alourdit le code lorsqu’il est directement intégré au HTML
• Nécessite un éditeur graphique tel Illustrator
• Peut présenter des risques de sécurité lié au XML
WebP
(Web Picture)
Créé par Google comme alternative au JPEG et au GIF, ce format est aujourd’hui reconnu par presque tous les navigateurs. Il diminue largement le poids des images et offre une vitesse importante au téléchargement.• Format plus léger
• Meilleure qualité que le JPEG
• Chargement de la page amélioré
• Manque de compatibilité
• Multiplication des images sur le serveur
• Conversion manuelle
GIF
Graphics Interchange Format)
Inventé en 1987 pour Apple par Compuserve, ce format est codé en 8bits. il gère la transparence, mais est limité à 256 couleurs.• Format animé• Manque de compatibilité
• Alourdit le code

Enfin, nous n’approfondirons pas avec le format .HEIF d’Apple qui encore à ce jour est reconnu que par l’iOS, le système d’exploitation de la marque.

Bref, alors que choisir pour le web ?

On utilisera le format .png pour les visuels de grandes tailles et demandant une résolution de qualité (photos, headers, fonds d’écran, etc). On l’utilisera aussi dans le cas des visuels nécessitant un fond transparent. Pour le reste, on utilisera le format  jpeg qui est plus léger.


Pour aller plus loin : 
  • Quelle taille d’images pour Linkedin, Facebook, Twitter, … ?