Création de site web

Guide des formats d’images web

• Qu’est-ce qu’un format d’image web ?
• Pourquoi est-il important de choisir le bon format ?
• Les principaux formats “classiques”
• Les nouveaux formats optimisés
• Quelques conseils supplémentaires

Qu’est-ce qu’un format d’image web ?

Le format d’une image, c’est tout simplement la façon dont une image est encodée numériquement. En général, le format d’une image est facilement reconnaissable à l’extension du fichier : les 3 ou 4 lettres situées après le “.” dans le nom du fichier.

Il est important de bien faire la distinction entre le format d’une image, sa dimension (exprimée en pixels) et son poids (exprimé en octets ou en bits).

Vous vous demandez quels sont les formats et dimensions des images que vous rencontrez sur le web ? Rien de plus simple, il vous suffit de faire clic droit sur l’image -> inspecter l’élément.

La console de votre navigateur vous montrera alors le lien appelant l’image source, l’extension de l’image vous indique son format (.jpg, .png, .webp…).

Quant à la dimension, en survolant le lien vous verrez la dimension restituée par le navigateur ainsi que la dimension intrinsèque de l’image.

Pourquoi est-il important de choisir le bon format ?

Il y a plusieurs raisons de bien choisir le format des images crées pour être publiées sur votre site web ou sur les réseaux sociaux :

• La compatibilité : les formats les plus répandus sont “lisibles” par tous les navigateurs. Cependant, certains formats plus obscurs ne sont compatibles qu’avec certains navigateurs (Safari, Edge, Chrome…). De plus, les réseaux sociaux dressent pour la plupart une liste des formats d’images acceptés en image de profil, bannière ou publication.

• La prise en charge : il est important de choisir son format en fonction du type d’image que vous voulez publier. Certains formats prennent en charge plus de couleurs, la transparence ou encore les animations.

• Le temps de chargement : différents formats ont différents niveaux de compression et donc un poids plus ou moins élevé d’origine. Le poids des images sur une page web va affecter son temps de chargement. Or, conserver un temps de chargement assez court est très important pour l’expérience utilisateur et pour le référencement.

Les principaux formats “classiques”

Les principaux formats d’images, nous sommes sûrs que vous les connaissez ! Sur le web, on en utilise principalement 4 :

• Le JPEG : le format le plus répandu encore aujourd’hui. Son principal avantage est son poids léger pour sa bonne qualité d’image. Il gère plusieurs millions de couleurs et est utilisé notamment dans le domaine de la photographie. Attention cependant, il ne prend en charge ni le mouvement ni la transparence.

• Le PNG : lui aussi gère des millions de nuances de couleurs (plus de 15 millions !) et permet en plus de prendre en charge la transparence dans les images. C’est donc très utile pour faire des rendus esthétiques sur un site web. En revanche, pour une image identique, le poids d’un fichier PNG est toujours plus élevé qu’un JPEG, c’est là le principal inconvénient du format.

• Le GIF : aujourd’hui tout le monde connaît ce format car c’est celui qui permet d’afficher des images animées, sur les réseaux sociaux notamment. Mais à l’origine, ce n’était pas la seule utilité de ce format : un système de compression innovant pour l’époque assurait une bonne qualité des images, une prise en charge de la transparence et du mouvement ! Le GIF est également un format plutôt lourd, c’est pour ça qu’aujourd’hui nous ne l’utilisons plus que pour faire des animations.

• Le MP4 : est tout simplement le format préférentiel pour les vidéos sur le web. Le format permet de stocker des vidéos, des audios, mais aussi des sous-titres ou des images. Il est privilégié aux autres formats vidéo pour sa qualité de compression mais surtout car c’est le format vidéo avec le plus de compatibilité !

Les nouveaux formats optimisés

Ces formats d’images sont relativement récents. Nos équipes de graphismes et de développement front aiment travailler avec ces “nouveaux” formats pour leurs meilleures performances de compression.

SVG (Scalable Vector Graphics)

Le SVG est un format de fichier affichant du contenu graphique à partir de code XML. A la différence de la plupart des autres formats, les images ne sont pas matricielles (à partir de pixels) mais vectorielles (à partir de vecteurs).

Au lieu de calculer chaque pixel d’une image, le format SVG calcule 4 points pour créer 4 vecteurs. Il y a deux principaux avantages à cette méthode : les contenus sont très légers et peuvent être redimensionnés à volonté. Cela rend le format SVG très utile pour un site internet responsive.

Attention cependant, les images trop complexes ne peuvent pas être converties au format SVG, il est principalement utilisé pour les graphiques simples, logos et pictogrammes.

Comment obtenir une image au format SVG ? Créez votre illustration ou logo puis vectorisez là avec un logiciel adéquat (Adobe Illustrator par exemple). Puis enregistrer sous > .svg !

Le format WebP

Ce format graphique a été créé par Google avec un seul objectif en tête : réduire le poids de tout type d’image. Le format Webp combine les technologies de compressions sans perte et avec perte. En moyenne, à qualité d’image équivalente les fichiers Webp sont plus légers de 25% !

En se tenant à la compression sans perte, le format prend en charge la transparence mais aussi les images animées. C’est donc une version améliorée des formats jpeg, png et gifs !

Seul bémol, encore à l’heure actuelle le navigateur Safari ne prend pas en charge le format webp sans utiliser de plugin… On croise les doigts pour que cela arrive prochainement car Safari représente tout de même 30% du marché des navigateurs en 2022.

Pour obtenir une image au format Webp : on a longtemps utilisé les nombreux convertisseurs en ligne. Pourtant depuis peu, le logiciel Adobe Photoshop permet nativement d’enregistrer votre image au format webp.

Les formats JPEG 2000 et JPEG XR

Ces deux formats sont des évolutions modernes du format Jpeg. Les deux permettent notamment d’obtenir des images toujours plus légères.

Le format JPEG XR permet même de prendre en charge la transparence au même titre qu’un PNG. Attention cependant, ces formats ne sont pas supportés par tous les navigateurs : JPEG 2000 n’est pris en compte nativement que par Safari et JPEG XR par Internet Explorer et Edge.

A utilité similaire, nous recommandons donc de leur préférer le format WebP…

Quelques conseils supplémentaires

Vous l’avez compris, pour des raisons de temps de chargement, il est conseillé d’utiliser les formats WebP et SVG selon le type d’image que vous comptez créer. Mais nous avons encore quelques conseils pour vous aider à créer des images web efficacement !

Lorsque vous créez vos visuels pour votre site web ou les réseaux sociaux, privilégiez le mode colorimétrique RVB plutôt que CMJN (c’est le mode du print).

Toujours dans la configuration de l’image, une image destinée à être imprimée contient 300 pixels par pouce (dpi), pour le web la configuration optimale c’est 72 dpi !

Avant d’exporter vos images, redimensionnez-les toujours à la taille minimum acceptable. Pour un slider de pleine largeur, cela ne sert à d’avoir une image de 5000 x 3000 pixels : pour une image de pleine page en format desktop 1920 x 1080 pixels suffisent largement.

D’ailleurs, les réseaux sociaux vous imposent des dimensions d’image maximum quand vous uploadez photos de profils ou bannières, justement pour conserver un temps de chargement correct pour leurs pages.