Optimiser les images d’un site Web

Dans ce tutoriel, vous découvrirez pourquoi et comment optimiser vos images afin de rendre votre site WordPress rapide et performant.

Les points-clés à retenir

  • Les images et les vidéos sont la première source de lenteur et de ralentissement sur un site web.
  • Il est possible de vérifier la vitesse d’une page à l’aide des outils PageSpeed Insights et Pingdom
  • La définition d’une image numérique correspond au nombre de pixels en longueur fois le nombre de pixels en largeur.
  • Il y a peu d’ordinateurs dont la largeur dépasse 1920 pixels. Le trafic web est désormais plus important sur mobile que sur ordinateur.
  • Le MacBook Pro 16 pouces Retina possède une Résolution native de 3072 x 1920 pixels.
  • L’iMac Retina 5K de 27 pouces possède une Résolution native de 5 120 x 2 880 pixels.
  • Un appareil photo muni d’un capteur 4/3 (4 000 x 3 000 pixels) produit une image de 12 mégapixels. Les photos prisent avec un appareil photo numérique doivent donc être retravaillées avant d’être diffusées sur le Web.
  • WordPress créait automatiquement plusieurs versions de différentes tailles des images téléchargées.
  • Le format JPEG (plus performant) est à privilégier au format PNG.
  • Le format WebP est désormais recommandé par Google. Le plugin Imagify vous permet de transformer vos images au format WebP.
  • Le format SVG (image vectorielle) est à privilégier pour les icônes et les logos.

Les ressources utiles

Les liens utiles

Le mot de votre formateur

formateur WordPress

Clément Rousseau

Consultant SEO et formateur WordPress

Avant de télécharger vos images sur votre site WordPress, vous devez vous assurer de les mettre au format JPG, de les redimensionner et de les compresser. Par la suite, il vous sera possible de les convertir au format WebP, à l’aide du plugin Imagify, afin de les rendre parfaitement optimisées.

Questions fréquentes sur les images web

Qu’est-ce qu’une image vectorielle ?

Une image vectorielle est une image numérique composée d’éléments géométriques sur lesquels il est possible d’appliquer plusieurs transformations. Une image vectorielle contient en quelque sorte des coordonnées géométriques et des formes. Les images vectorielles ont la particularité de pouvoir être agrandies sans perdre de qualité.

Les images SVG sont particulièrement adaptées pour les logos, mais inadaptées pour les photos.

Qu’est-ce qu’une image matricielle (ou bitmap) ?

Les images matricielles ou images bitmap sont composées de petits points appelés « pixels ». Plus la résolution de l’image sera grande et plus la netteté de celle-ci le sera. Les formats les plus présents sur le Web sont le Gif, le png, le jpeg et le WebP.

Qu’est-ce qu’une image WebP ?

Le WebP est un format d’image, à l’instar du JPEG ou du PNG, développé par Google. Le but du format WebP est de réduire la taille (le poids) des images afin d’économiser de la bande passante et des sites qui se chargent plus rapidement. Comparativement, au JPEG et PNG, le format WebP peut réduire la taille des images de 19 à 64 % selon Google.

Comment connaître la résolution d’un écran ?

La résolution d’un écran en PPP (DPI) se calcule en prenant en compte la définition native largeur en pixels × hauteurs en pixels et la longueur de la diagonale (en pouces).

Le moyen le plus simple de connaîte les dimensions de son écran et d’utilisation l’outil en ligne dpilove qui permet de connaître la taille de son écran et des principaux écrans du marché.

Que signifie PPP (ou DPI)?

L’acronyme PPP signifie pixels par pouce, celui-ci correspondant à l’acronyme anglais DPI de dots per inch.

Le nombre de Pixel par pixels par piuce permet de déterminer la résolution (densité de pixels) d’un écran.