Quel format des images sur le web ? Type de fichiers et résolution

par | Mis à jour le 27/06/2022 | Publié le 31/01/2020 | Marketing digital, LinkedIn | 0 commentaires

Résumé : Quel format des images sur le web ? Les fichiers reconnus et correctement affichés par tous les navigateurs : le GIF, le JPEG (ou JPG) et le PNG. Le WebP d ...
Cet article comporte 1,128 mots.

5

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 en 2020

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

Formats Description Avantages Inconvé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
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

Format des images sur le web : depuis 2020

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

Formats Descriptions Avantages Inconvé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

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 ?

Dans le cas des visuels nécessitant un fond transparent, on préfèrera le webp. au png parce  que plus léger, surtout pour les visuels de grandes tailles et demandant une résolution de qualité (photos, headers, fonds d’écran, etc).

Pour le reste, on utilisera le format  jpeg qui est plus léger ou encore le webp.


Pour aller plus loin :

Les E-books

Rédiger son cahier des charges

Tout ce qu’il faut pour bien s’entendre avec son prestataire

Google Data Studio

Faîtes parler vos données !

Tests de connaissances

Newsletter 5Min/mois

Recevez notre newsletter pour consulter l’essentiel du marketing.

Articles pouvant vous intéresser

Comprendre Data Studio en 5 minutes

Comprendre Data Studio en 5 minutes

ous devez présenter des rapports de vos données présentes sur une application ou sur un tableur (Excel ou Google Sheet) de manière régulière ? Laissez tomber les PowerPoint et adoptez Data Studio....

Zapier, le traducteur d’API Web

Zapier, le traducteur d’API Web

Zapier est un service web utilisé dans le cadre du Growth marketing et des automatisations. Il agit comme un "connecteur traducteur" entre les applications utilisées pour gérer le flux de données...

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avertissement : L’url du site web ne sera pas affichée dans le commentaire et toute url placée dans le commentaire sera systèmatiquement effacée avant sa publication.

Pin It on Pinterest

Share This