Tutos dev’ & informatique

Quel type d’image utiliser sur son site web ?

Publié le mercredi 17 novembre 2021
Choix du format d'image adapté pour son site web

Introduction

De la simple photo de vacances publiée sur un blog jusqu’au logo d’entreprise, les images sont omniprésentes sur le web. Comment les utiliser de façon optimale quand on est chargé du webmastering d’un site internet ?

Cet article est le premier d’une série sur l’utilisation des images sur un site internet. Il est avant tout destiné aux webmasters débutants, du monde professionnel ou amateur.

On va voir quel type de fichier image utiliser sur son site, en fonction de quelle situation. On ira des plus classiques (le débat JPEG vs PNG) aux plus récents (WEBP et AVIF).

Images JPEG, pour les photos et arrières plans

Commençons par les images JPEG (fichiers .jpg et .jpeg), les plus fréquentes. Elles sont matricielles (en anglais on dit raster) et, à ce titre, supportent assez mal les agrandissements, mais tolèrent plutôt bien les réductions. Elles peuvent également être compressées pour être chargées plus rapidement par les visiteurs, au détriment de leur qualité visuelle.

👉  Image matricielle raster : affichage correct après réduction, mauvais après agrandissement

👉  Compression destructrice lossy : poids de fichier réduit au détriment de la qualité

👉  Utilisation en 72dpi sur le web, et 300 dpi sur les documents imprimés


Exemple d'image de fond
Le format JPEG est le candidat idéal pour les images d’arrière plan et les photos

 

Quand utiliser et ne pas utiliser d’images JPEG

✔︎  Les images JPEG font de bons arrières plans. Leur compression leur permet d’être plus légères que les équivalents PNG, et la diminution de qualité est acceptable pour une image de fond.

✔︎  Un reportage photo ? Pensez JPEG ! C’est le format de sortie standard des appareils photos numériques, autant en profiter.

  JPEG ne supporte pas la transparence. Si l’image doit s’afficher au premier plan et que l’on doit voir le fond derrière, il ne faut pas utiliser le format JPEG.

  Les contours sont moins nets dans les images JPEG. Pour un logo, un graphique ou un schéma, choisir un autre format.

  Les textes sont moins lisibles dans les images JPEG. Si le texte est important (slogan d’entreprise, menu de restaurant) il est préférable de choisir un autre format.

Images PNG, pour des visuels nets à fond transparent

Le pendant du format JPEG est le format PNG (fichiers .png). Matriciel et doté d’une compression non-destructrice, il supporte la transparence et a un rendu plus net, mais présente des fichiers plus lourds.

👉  Image matricielle raster : affichage correct après réduction, mauvais après agrandissement

👉  Compression non-destructrice lossless : poids de fichier réduit sans perte de qualité

👉  Support de la transparence


Exemple de personnage sur fond transparent
Le format PNG permet de disposer d’un fond transparent, parfait pour les visuels de premier plan

 

Quand utiliser et ne pas utiliser d’images PNG

✔︎  Les images PNG ont leur place au premier plan. Leur netteté, leurs détails les rendent très attractives, et leur fond transparent permet de les intégrer proprement au dessus du fond de la page.

✔︎  Les images PNG simples peuvent être utilisées en arrière plan. Simple signifie avec peu de détails, c’est à dire pas une photographie. Attention au poids de fichier tout de même.

✔︎  Les images PNG ont un rendu net des textes et des contours. Parfait pour les images où le texte est dominant (logo avec slogan, menu de restaurant), ou quand des formes géométriques sont présentes (graphique, schéma).

  Ne pas utiliser le format PNG pour les grandes dimensions. Une photographie de plusieurs mégapixels sera beaucoup plus lourde au format PNG.

GIF animés, pour les animations basse définition

Les animations GIF (fichiers .gif) sont fabriquées à partir de la succession rapide d’images matricielles limitées à 256 couleurs. Elles ont été à la mode dans le passé, lorsque les bandeaux publicitaires clignotants et les appels à l’action flashys étaient d’actualité. C’était limite agressif en fait ! De nos jours, on en trouve de moins en moins sur les sites, et de plus en plus dans les applications de messagerie instantanée.

👉  Image matricielle raster : affichage correct après réduction, mauvais après agrandissement

👉  Palette de couleur limitée : maximum de 256 couleurs

👉  Support de la transparence


Chargement en cours
GIF de chargement

 

Quand utiliser et ne pas utiliser d’images GIF

✔︎  Les images GIF permettent d’afficher de petites animations d’attente. Par exemple, le temps de soumission d’un formulaire. En anglais on parle de loader, plusieurs sont disponibles ici.

✔︎  Les animations GIF permettent d’animer des images avec un nombre de couleurs réduit. Une carte de vœux par exemple, ou un schéma explicatif.

✔︎  Une animation GIF permet d’afficher quelques secondes d’un film. C’est assez courant sur les blogs.

  Pas de contrôle possible sur l’animation GIF. Il n’est pas possible de démarrer, arrêter et rembobiner une animation GIF. Elle se joue en boucle, et c’est tout.

SVG vectoriels, pour les illustrations et les logos

Quittons le rivage des formats matriciels et passons au format SVG (fichiers .svg), qui lui est vectoriel. En conséquence, il supporte sans problème les changements de taille, agrandissement comme réduction. Les images SVG sont toujours parfaitement nettes, quand les autres formats ne le sont que quand ils sont affichés à la bonne taille.

👉  Image vectorielle : affichage parfait quelle que soit la taille

👉  Par nature léger et rapide à charger

👉  Support de la transparence


Logo Texte Code Colibri couleur
Un logo au format SVG restera toujours net, quelle que soit sa taille

 

Quand utiliser et ne pas utiliser d’images SVG

✔︎  Les images SVG sont idéales pour les illustrations et les logos. Si du texte est présent, n’oubliez pas de le vectoriser.

✔︎  Les images SVG sont toujours nettes. Un seul fichier et vous pouvez afficher n’importe quelle taille sur le site.

✔︎  Les images SVG supportent certaines animations CSS. Il y aura prochainement un article sur le sujet.

  Le format SVG est incompatible avec les photos. Eh oui, le monde réel n’est pas vectoriel !

💥  Attention au rendu dans les navigateurs ! Par exemple, Internet Explorer est connu pour ne pas apprécier les dégradés dans les images SVG. Si ca vous intéresse, vous pouvez vous renseigner sur comment tester avec Internet Explorer.

Soyez moderne : images WEBP

L’optimisation web ayant de plus en plus d’importance, de nouveaux formats d’image tels que WEBP ont vu le jour. Plus compressé, avec un rendu équivalent, il est supporté par les navigateurs les plus modernes. Son utilisation permet un temps de chargement des pages plus court, et donc d’éviter de perdre des visiteurs dès leur arrivée sur le site. C’est également apprécié dans le cadre de la SEO.

👉  Image matricielle raster : affichage correct après réduction, mauvais après agrandissement

👉  Compression destructrice lossy avec des résultats plus légers et plus nets que le format JPEG

👉  Support de la transparence comme le format PNG


Support du format WEBP selon les navigateurs
Le format WEBP est largement supporté, sur ordinateur et mobile (source caniuse.com)

 

Quand utiliser et ne pas utiliser le format WEBP

✔︎  Les images WEBP doivent être utilisées en complément des images JPEG et PNG. Elles sont largement supportées, il serait dommage de faire l’impasse dessus.

  Il n’est pas utile d’utiliser le format WEBP sur un site interne d’entreprise quand le navigateur préconisé ne le supporte pas. C’est évident.

Comment utiliser les formats modernes d’image

Les formats modernes d’image ne sont pas utilisés directement dans les pages web, qui conservent des références aux images classiques. Les fichiers aux formats modernes sont déposés dans le même dossier que les versions classiques. Le serveur web est ensuite réglé pour servir automatiquement les versions modernes aux navigateurs compatibles quand ils font une requête pour les images classiques.

Si cela vous intéresse, j’ai écrit un article complet sur le réglage du serveur Apache pour servir automatiquement des images WEBP.

Les polices d’icônes

Cet article ne serait pas complet sans la mention des polices d’icônes (fichiers .woff et .woff2) ! Elles permettent d’utiliser des icônes comme si elles étaient un caractère normal (taille de police, couleur, etc.). On peut citer la bibliothèque Font Awesome qui contient de nombreuses icônes, ou le service IcoMoon qui permet de créer ses propres polices.

👉  Police de caractère : affichage parfait quelle que soit la taille

👉  Un seul fichier à charger, plusieurs icônes



Les icônes se comportent comme du texte

 

Quand utiliser et ne pas utiliser de police d’icône

✔︎  Les polices d’icônes sont pratiques pour les icônes unicolores utilisées à de nombreux endroits. On pense aux réseaux sociaux, boutons de partage, boutons de menu, recherche, puces…

✔︎  Les polices d’icônes sont toujours nettes. Chaque caractère est basé sur une image vectorielle.

  Pas d’icône multicolore. Chaque icône affichée n’aura qu’une seule couleur.

Conclusion

Vous en savez maintenant un peu plus sur les différents types d’images que l’on rencontre sur un site web.

Il est fréquent de pouvoir utiliser un type ou l’autre à un même emplacement (un logo à fond transparent peut aussi bien utiliser une image PNG à la bonne dimension qu’une image SVG vectorielle), mais cet article devrait vous donner les pistes pour faire le bon choix.

Le prochain article portera sans doute sur la bonne dimension à fournir à ses images. D’ici là, si vous avez besoin d’une assistance pour la création ou le contenu de votre site internet, vous pouvez me contacter.

Bon code à vous, à la prochaine.

Photo de profil de Loïc Burtin Code Colibri développeur web à Dijon

A propos de l'auteur

Loïc Burtin

Développeur web indépendant, avec une tendance à couper les plumes en quatre pour que les sites se chargent plus rapidement.

Partager cet article :

Lire aussi

Mise en pratique de l'optimisation des polices font subsetting
CSS
Optimisation des polices web par font-subsetting et unicode-range
CSS
Tester son site internet avec les anciennes versions d'Internet Explorer
Développement
Inscription à la newsletter Inscription à la newsletter

Ce sujet vous intéresse ?

Inscrivez-vous à la newsletter pour être informé de la publication des nouveaux articles !

Ce formulaire est protégé par hCaptcha, dont la Politique de Confidentialité et les Conditions d'Utilisation s'appliquent.

Chargement en cours
Succès de l'opération