Dans une page web, les images pèsent pour beaucoup. Or le poids de votre page web a un impact sur le temps de chargement, donc un impact sur l’accessibilité et le référencement de votre site, sans parler de son impact écologique. Découvrez dans cet article, comment l’optimisation de vos images peut augmenter la vitesse de votre site ainsi que son référencement.
Quid de la résolution et de la définition d’une image :
Avant de continuer, petit point sur la différence entre la Résolution et la Définition d’une image :
- La résolution correspond au DPI (nombre de points ou de pixels contenus dans l’image par unité de longueur – DPI : dots per inch : nombre de points ou de pixels qui seront rendus dans un pouce de l’interface)
- La définition correspond aux dimensions en pixels de votre image (largeur x hauteur).
Une image écran doit être en 72 Dpi, qui correspond à la résolution prises en compte par les écrans. Toute résolution supérieure ne sera pas prise en compte, donc autant optimiser la résolution de son image et par conséquent le poids téléchargé sur votre site.
Ce qui importe aussi est la définition de votre image, c’est-à-dire ses dimensions en pixels. Pour un conteneur de 250×250 pixels, vous n’avez pas besoin d’une image de 300×300 pixels. Celle-ci sera plus lourde sans changer pour autant la qualité de l’affichage. Il est donc important de redimensionner vos images au pixel près, autant que possible.
Pour recadrer et redimensionner vos images, il est possible d’utiliser des logiciels tels que Photoshop (Adobe – Payant), Gimp (graticiel d’édition et de retouche d’image) – entre autres – ou encore une solution en ligne comme Resize Pixel qui permet de recadrer, redimensionner et de compresser vos images dans une seule interface.
Quelques astuces :
- Photoshop propose l’option « Enregistrer pour le web » qui permet d’enregistrer votre image à différents pourcentage de la qualité maxi d’une image. Cette option est intéressante, elle permet de réduire significativement le poids de vos images sans trop en impacter la qualité.
- Avec cette option, vous pouvez aussi tramer vos images en png8. Sur des images illustrées, cela peut donner un effet intéressant.
ATTENTION : Pour une impression papier, le standard est de 300 dpi pour avoir un rendu de qualité. Vos images optimisées pour le web ne le seront donc pas pour l’impression. La plupart des images récupérées dans les banques d’images gratuites ne pourront être utilisées telles quelles en impression. Si vous le faîtes, attention à bien prendre le format le plus grand proposé et à convertir votre image en 300dpi, pour voir si elle ne perd pas trop en qualité.
Quelques ordres de grandeur :
- Pour un article, une image de largeur 600px à 800px est suffisante
- Pour une bannière pleine largeur, une largeur de 1920 px est suffisante
Les 5 formats principaux des images sur le web
Il existe 5 formats principaux d’enregistrements différents pour vos images numériques :
- JPEG ou JPG (extension .jpg ou .jpeg) : C’est le format standard d’une image. Il ne gère pas la transparence, tout fond manquant sera remplacé par un fond blanc. C’est le format le plus léger à utiliser car il utilise la pixellisation, attention donc à ne pas trop le compresser. Cas d’utilisation : images sans transparence, images de fond.
- PNG 24 (extension .png) : ce format gère la transparence avec un panel de 16 millions de couleurs, il gère également les dégradés transparents. Il sera plus lourd qu’un fichier .jpeg. Cas d’utilisations : Images avec de la transparence, par exemple votre logo détouré.
- PNG 8 (extension .png) : A l’inverse du PNG 24, le PNG 8 est limité à 256 couleurs et ne gère que la transparence absolue. Il est à utiliser pour les images avec peu de couleurs.
- GIF (extension .gif) : C’est le format qui gère les animations. Cas d’utilisations : image animée.
- SVG : Ce format est adapté aux images vectorielles, il permet de les agrandir à souhait sans en altérer la qualité. Ce format s’utilise sous forme de code HTML, il est donc réservé à un usage avancé du web.
Actu à suivre : le format Webp
Le format WEBP est un format d’image développé par Google il y a environ 10 ans. Il s’agit aujourd’hui du format d’images le plus léger pour le web. Devant la quantité grandissante d’images à stocker sur le web, Google a développé un format permettant de réduire considérablement la taille des fichiers image. Il a fallu attendre 2019 pour que les navigateurs Edge et Firefox l’adoptent.
Pour l’instant, Safari ne permet l’affichage de ces images. Or il s’agit du deuxième navigateur le plus utilisé sur mobile. Ce format d’images reste donc à suivre pour un usage plus large sur les sites internet à l’avenir.
Renommez vos images :
Avant de les télécharger sur votre site
Côté référencement, il est intéressant de renommer ses fichiers images en utilisant des mots clés et pourquoi pas le nom de votre site web également.
Séparez chacun de vos mots clés par un tiret afin d’en faire une succession de termes lisibles et compréhensibles. Comme dans tout nom de fichier, évitez l’utilisation de caractères spéciaux, accents et espaces, qui pourraient entraîner des problèmes d’incompatibilité avec les navigateurs ou extensions.
Après le téléchargement
Pensez à renseigner la balise Alt de votre image, celle-ci est lue lorsque l’image ne peut s’afficher. Elle est utile aux robots qui scannent votre site et aux personnes malvoyantes qui en auront alors la description. Celle-ci doit décrire le contenu de votre image, en y plaçant des mots clés idéalement.
A retenir pour optimiser les images de votre site internet
Pour le web :
- j’utilise des images en définition 72 dpi
- je dimensionne mes images au bon format pour mon site
- je renomme mes fichiers et renseigne les balises <alt> de mes images
Pour développer davantage le sujet, rendez-vous sur la page des designers éthiques : https://eco-conception.designersethiques.org/guide/fr/content/6-1-images.html
