Optimiser les images

Optimiser la taille d'une image et son poids permet d'améliorer son chargement et d'offrir une meilleure performance à son site web. Les dimensions, la taille et le nommage des images permettent aussi d'améliorer leur référencement (SEO) dans les moteurs de recherche.

Format d’image les plus courants

Les formats d’image (extension du fichier image) recommandés et pris en charge en HTML sont les suivants :

AVIF (AV1 Image File Format) est un format d’images qui a la particularité de proposer un meilleur taucx de compression sans perte des images par rapport aux formats JPG et Webp. Ce format étant récent, tous les navigateurs web ne prennent pas encore en charge ce format.
GIF (Graphics Interchange Format) pour les images et animations simples. Ce format peut supporter les fonds transparents ;
JPEG ou JPG (Joint Photographic Expert Group image), le format le plus utilisé notamment pour les photographies. Ce format a l’avantage de proposé un fort taux de compression de l’image et donc « d’alléger » le poids de l’image. Ce format ne supporte pas la transparence ;
PNG (Portable Network Graphics), ce format supporte les fonds transparents et est particulièrement adapté pour les logos, les images incrustées… Son taux de compression est bien moindre que celui du format JPEG.
SVG (Scalable Vector Graphics), ce format permet de décrire des images sous formes de graphique vectoriel ; c’est un format texte, standardisé pour décrire des images qui peuvent être affichées nettement à n’importe quelle taille ;
WEBP (Web Picture format), ce format récent (il a été créé en 2010 par Google) présente tous les avantages proposés par les format GIF, JPEG et PNG : une prise en charge des animations, un fort taux de compression et une gestion de la transparence. Par conséquent, ce format WEBP est recommandé même s’il n’est pas compatible avec les anciennes versions de navigateur.

attention

Les images animées peuvent provoquer un inconfort et des désagréments forts chez les personnes en situation de handicap comme celles porteuses d'un trouble du spectre autistique ou les personnes épileptiques.

Il existe un autre format d’image, très spécifique, le format ICO. Ce format est utilisé pour afficher une icône de favori sur son site (l’icône qui apparaît dans l’onglet du navigateur). Cette image porte le nom de favicon.ico. Elle s’implémente dans le code entre les balises head de la manière suivante :

<head>
     [...]
     <link rel="icon" href="favicon.ico">
     [...]
</head>

remarque

Les navigateurs modernes acceptent aussi comme icône de favori le format PNG. Dans ce cas, l'icône de favori, qui pourra porter n'importe quel nom, sera implémenté de la manière suivante :
<link rel="icon" type="image/png" href="favori.png">

Taille et poids des images

Sur le web, la taille (ou résolution) d’une image se définit en pixels. Plus une image est grande, plus son poids est important ; une image dont la poids est important mettra du temps à se charger, autrement dit à s’afficher dans la page.
Pour connaître le poids de son image, il suffit d’afficher les propriétés de l’image dans l’explorateur de fichiers.

attention

Le fait de redimensionner une image dans une page en indiquant une hauteur et une largeur inférieure à ses dimensions d'origine n'influe absolument pas sur le poids de l'image ; celui-ci reste le même.

Taille de l’image

La taille de l’image dépendra de l’utilisation ce celle-ci. Les tailles suivantes sont données à titre indicatif ; lorsqu’une seule valeur est spécifiée, c’est la valeur pour la largeur de l’image, la hauteur étant alors à calculer en fonction des dimensions de l’image d’origine.

Indications de la taille des images selon leur fonction
Type d'utilisation de l'image	Largeur recommandée (L*H)
Fond de page d'un web	1200 à 1700 pixels 1920 pixels maximum
Image moyenne	300 pixels
Petite image	200 pixels
Image Open Graph	1200 x 630 pixels
Images pour LinkedIn	Photo de profil : 300 x 300 pixels Image de couverture du profil : 1584 x 396 pixels Image dans un post : 520 x 320 pixels ou 600 x 315 pixels
Images pour Google My Business	Logo : 250 x 250 pixels Photo de couverture : 1080 x 608 pixels Images de contenu : 497*373 pixels
Images pour YouTube	Logo : 800 x 800 pixels Bannière : 2560 x 1440 pixels Miniature vidéo : 1280 x 720 pixels

Open Graph: L'Open Graph est un protocole qui indique aux réseaux sociaux comment afficher l'aperçu d'une page web partagée par un utilisateur.; Pour utiliser Open Graph, il faudra renseigner des balises `meta` spécifiques dans l'entête de la page HTML.

Exemple
Pour savoir quel contenu renseigner, référez-vous à la documentation de l’Open Graph sur le web.

<head>
     [...]
     <meta property="og:locale" content="..." />
	<meta property="og:type" content="..." />
	<meta property="og:title" content="..." />
	<meta property="og:description" content="..." />
	<meta property="og:url" content="..." />
	<meta property="og:site_name" content="..." />
	<meta property="og:image" content="..." />
     [...]
</head>

Poids des images

Optimiser le poids d’une image a une incidence importante sur le référencement de la page par les moteurs de recherche. S’il est difficile de donner un poids précis car dépendant de la taille de l’image, voici tout de même quelques indications :

Une image devrait peser en moyenne entre 50ko et 200ko, 500ko maximum ;
En aucun cas, l’image ne devrait dépasser 1Mo.

Comment baisser le poids d’une image ?

Pour cela, il est indispensable de retravailler ses images dans un logiciel de traitement d’images dédié.
Parmi tous les logiciels de traitements d’image disponibles sur le marché, GIMP est souvent considéré comme une alternative à Photoshop car il dispose de fonctions similaires. C’est un logiciel d’édition et de retouche d’image, libre et gratuit. Il possède de nombreux outils pour retravailler une image et permet de réaliser des photomontages ou encore des dessins à la main.

Dans un logiciel de traitement d’images, il faudra donc :

Redimensionner l’image en ayant à l’esprit les dimensions indiquées ci-avant ;
Diminuer la résolution de l’image. La résolution de l’image définit la qualité ou de la densité de votre image. Elle est exprimée en pixels par pouce (dpi ou ppi). Pour le web, une image aura une résolution inférieure à 72dpi ;
Enregistrer l’image au bon format en fonction de l’image d’origine (WEBP, SVG, JPEG, PNG…) ;
Donner un nom pertinent à son image (« paon.jpg », par exemple plutôt que « DSIC123454-7845.jpg »), et ce dans le but de favoriser son référencement dans un moteur de recherche.

astuce

Pour optimiser encore plus la vitesse de chargement de la page web, on pourra recourir au moment de l'implémentation de l'image dans la page à la technique du « lazy loading », une technique de chargement qui permet de ne charger les images que lorsqu'elles sont visibles sur l'écran de l'utilisateur.

Exemple d’implémentation HTML

<img src="/images/handicap-moteur.webp" alt="Pictogramme handicap moteur" loading="lazy">

Implémenter des images adaptatives

L’élément HTML picture permet de définir plusieurs formats et tailles d’images qui seront affichées selon la résolution de l’écran. En utilisant cet élément HTML, il est donc possible de proposer

différents formats d’image (par exemple un format Avif puis un format Webp si le format Avif n’est pas reconnu…)
différentes tailles d’images ; l’image affichée sera alors celle correspondant à la résolution d’écran de l’utilisateur. Plus une image est petite, moins son poids est important.

Exemple d’implémentation HTML

<picture>
     <source
          srcset="
               /images/monImage-Small.avif 300w,
               /images/monImage-Medium.avif 700w,
               /images/monImage-Large.avif 900w,
               /images/monImage-ExtraLarge.avif 1024w"
          sizes="
               (max-width: 350px) 300px,
               (max-width: 780px) 700px,
               (max-width: 960px) 900px,
               1024px"
          type="image/avif">
     <source 
          srcset="
               /images/monImage-Small.webp 320w,
               /images/monImage-Medium.webp 700w,
               /images/monImage-Large.webp 900w,
               /images/monImage-ExtraLarge.webp 1024w"
          sizes="
               (max-width: 350px) 300px,
               (max-width: 780px) 700px,
               (max-width: 960px) 900px,
               1024px"
          type="image/webp">
     <source 
          srcset="
               /images/monImage-Small.jpg 320w,
               /images/monImage-Medium.jpg 400w,
               /images/monImage-Large.jpg 500w,
               /images/monImage-ExtraLarge.jpg 600w"
          sizes="
               (max-width: 350px) 300px,
               (max-width: 780px) 700px,
               (max-width: 960px) 900px,
               1024px"
          type="image/jpg">
     <img
          src="/images/monImage-Medium.jpg" 
          alt="Mon image adaptative selon la résolution d'écran et la capacité du navigateur à reconnaître les formats d'image.">
</picture>

Autre exemple d’implémentation HTML

<picture>
     <source srcset="/images/monImage-Small.avif" media="(max-width: 350px)">
     <source srcset="/images/monImage-Medium.avif" media="(max-width: 780px)">
     <source srcset="/images/monImage-Large.avif" media="(max-width: 960px)">
     <source srcset="/images/monImage-ExtraLarge.avif">
      
     <source srcset="/images/monImage-Small.webp" media="(max-width: 350px)">
     <source srcset="/images/monImage-Medium.webp" media="(max-width: 780px)">
     <source srcset="/images/monImage-Large.webp" media="(max-width: 960px)">
     <source srcset="/images/monImage-ExtraLarge.webp">

     <source srcset="/images/monImage-Small.jpg" media="(max-width: 350px)">
     <source srcset="/images/monImage-Medium.jpg" media="(max-width: 780px)">
     <source srcset="/images/monImage-Large.jpg" media="(max-width: 960px)">
     <source srcset="/images/monImage-ExtraLarge.jpg">
     
     <img
          src="/images/monImage-Medium.jpg" 
          alt="Mon image adaptative selon la résolution d'écran et la capacité du navigateur à reconnaître les formats d'image.">
</picture>