[TL ;DR : Checklist en fin d’article]
Les images sur un site web sont essentielles pour vendre un produit, montrer son activité, rendre son site vitrine attractif mais représentent environ 50% du poids moyen de votre site web au chargement.
Avec l’immense impact qu’aura la rapidité d’un site web sur son référencement SEO, l’optimisation des images deviens une étape essentielle dans la création d’un site internet rapide, optimisé et parfois, dans certaines démarches, « écologique ».
L’objectif principal de l’opération est simple : compresser au maximum les images secondaires et parvenir à l’équation parfaite entre qualité et compression pour les images principales.
Avant tout chose, il est important de comprendre :
Quels formats d’images pour le web
Dans cet article, je parlerais essentiellement d’image matricielle (à l’inverse d’image vectorielle) qui sont les images numériques caractérisés par des points de couleurs.
Les formats d’images matricielles sont les formats les plus utilisés aujourd’hui sur le web :
– .jpg (ou .jpeg, c’est pareil) qui est un format de compression et de stockage d’image numérique.
– .png, demande plus d’espace de stockage mais permet de gérer la transparence de couleurs. Pratique pour les logos ou les illustrations, par exemple.
– .gif, principalement utilisé pour les animations.
L’image matricielle comprends donc la notion de pixel, qui est l’élément qui, agencé en grille, permettra bout-à-bout de former l’image souhaitée.
C’est là que ça se complique un tout petit peu : les pixels, ça n’a pas de taille physique mesurable. C’est simplement un point de couleur qui peut être affiché aussi bien sur une dalle d’iPhone et être minuscule, ou bien affiché sur un écran géant à Wall Street et faire 2cm de côté.
Les images vectorielles pour le web
A l’inverse des images matricielles, les images vectorielles affichent du contenu non pas grâce à des points placés dans une grille mais de segments organisés entre eux par des formules mathématiques de proportionnalité et de coordonnées. Ce format, utilisé principalement pour des illustrations, permet un élargissement et un zoom sans limite et sans aucune perte de qualité.
La notion de pixel, de définition, de résolution et de taille
Les pixels vont donc définir la définition de notre image, mais pas sa taille !
Une image de 1000px par 1000px pourra tout aussi bien être imprimé sur une carte postale ou sur une feuille A3 : on aura le même nombre de pixel, mais le rendu visuel sera différent : c’est la résolution de l’image.
De façon générale, l’impression sur des supports physique se fait en 300 DPI (ou PPP) : 300 pixels Dots Per Inch, ou Pixels Par Pouce, c’est la résolution
Si nous avons une image de 1000 pixels par 1000 pixels, sa taille avec une résolution de 300 PPP sera de 8,47cm par 8,47cm. La même image de 1000px par 1000px mais avec une résolution de 100 PPP (donc 3 fois moins « dense ») prendra 3 fois plus de place et donc recouvrira 25,4cm par 25,4cm de surface.
L’adaptation de cette règle aux écrans d’ordinateur
Lorsqu’on dimensionne une image pour l’afficher sur un site web, qu’il s’agisse d’image produit, de bannière ou de n’importe quel autre type d’image, c’est un peu différent. L’affichage prendra deux paramètres en compte :
- Le nombre de pixels de l’image
- La taille du pixel affiché par l’écran de téléphone ou d’ordinateur qui affichera cette image
Dans la théorie, la résolution d’une image n’aura aucun impact sur son affichage puisque cela dépend de la résolution offerte par l’écran de l’utilisateur. L’image apparaîtra simplement plus grande sur un écran avec un DPI plus faible, et vice versa. Le web n’a donc pas de DPI fixe.
Il est pourtant d’usage de travailler en format web avec des résolutions aux alentours des 96 DPI, par soucis de praticité car la plupart des écrans d’ordinateur affichent un DPI dans ces tranches. Ce n’est simplement pas un paramètre à prendre en compte en premier.
Afin d’utiliser la résolution optimale, il est possible d’utiliser une extension telle que Page Ruler pour mesurer à l’écran directement la résolution dont vous avez besoin à l’emplacement prévu de votre image :
Comment optimiser une image pour son site WordPress?
Il faut avant tout bien adapter le format de fichier. On privilégie le .jpg pour les photos, le .png pour les fonds transparents ou avec peu de couleurs et le vectoriel (.svg) pour les icônes, logos ou autres illustrations.
Il faut ensuite adopter la bonne définition. Il est complètement contreproductif d’uploader une image de 6000x6000px pour un affichage sur un site internet. Il existe plusieurs outils pour redéfinir les pixels d’une image : Gimp, Photoshop, ou des outils en ligne gratuit tel que IloveImg.com.
Une fois l’image correctement redimensionnée, il est important de choisir le bon taux de compression. (voir plus bas)
Enfin, il faudra nommer correctement la photo et ajouter une balise « alt » pour l’accessibilité.
Le Lossy et le Lossless : les optimisations d’images sur le web
Deux « types » de compressions disponibles pour deux formats différents :
Lossy : L’élimination de données, dégrade l’image pour la réduire en grande quantité. A utiliser avec précaution ou pour les images secondaires.
Lossless : Compresse les données, une meilleure conservation de la qualité d’image pour une compression du poids moins importante.
La checklist pour ajouter efficacement des images sur votre site web
- Définissez la résolution souhaitée
- Définissez le bon format, jpg pour l’image numérique, PNG pour les fonds transparents et SVG pour les illustrations vectorielles
- Utiliser le Lossless ou le Lossy
- Renommez votre image (SEO)
- Uploadez l’image sur votre site
- Ajoutez une balise ALT
Félicitations, votre image est optimisée !
Liens utiles :
Pour recadrer ou compresser vos images directement en ligne : TinyPNG, Compressor.io, ILoveIMG
Le plugin par excellence pour le faire automatiquement : Imagify
Pour mesurer les pixels sur votre écran : Page Ruler
