Y a-t-il quelque chose de plus frustrant que de créer un site web et de vous rendre compte qu’il ne vous permet pas de toucher votre audience de façon organique ?
Peut-être que Google Insights est au rouge ?
Ou avez-vous réalisé que votre site Web prend beaucoup de temps à charger et que votre portée diminue au lieu d’augmenter à chaque nouvelle publication ?
En réalité, il y a de fortes chances que vos images ne soient pas optimisées de la bonne manière. Et donc qu’elles ralentissent votre site Web et nuisent à ses performances.
Dans cet article, on va donc vous expliquer comment optimiser ses images dans l’optique de booster les performances de votre site web.
Pourquoi optimiser les images sur son site web ?
Optimiser ses images consiste à utiliser des images de la plus haute qualité dans le format, la taille et la résolution appropriés tout en les compressant.
Si vous optimisez correctement vos images, cela améliorera non seulement les performances de votre site, mais également d’autres mesures telles que :
- La vitesse de chargement des pages
- Le classement SEO
- Votre expérience utilisateur
Optimiser les images de son site sans coder
Commençons donc par la première façon d’optimiser des images : le formatage.
Le but principal du formatage d’images est de trouver un équilibre entre la plus petite taille de fichier possible et une qualité acceptable.
Voici comment procéder étape par étape :
Choisissez le format d’image
La première étape, et la plus importante, consiste à choisir le bon format d’image.
Les formats les plus populaires sont :
- JPG : convient aux images en couleur complexes. Les images JPG ont de petites tailles de fichiers, ce qui vous permet d’en stocker plusieurs à la fois et améliore les temps de chargement des pages.
- PNG : Ce format est de meilleure qualité que les images JPG, donc plus lourd. Son utilisation aura ainsi un effet sur le temps de chargement de votre page. Les fichiers PNG peuvent également comporter des arrière-plans transparents.
- SVG : Ce format est utilisé pour les graphiques vectoriels tels que les logos ou les icônes. L’avantage du format SVG est qu’il ne perd pas en qualité lorsqu’il est mis à l’échelle.
- WebP : un format d’image moderne qui offre une excellente compression tout en conservant une excellente qualité.
- AVIF : c’est le format d’image le plus récent qui a gagné en popularité, notamment parce qu’il règle nombreux des problèmes du format JPEG.
Compresser les images
L’étape suivante consiste à compresser vos images. La compression d’image est le processus d’encodage des données d’image en utilisant moins de bits que l’image d’origine. Un procédé qui permet donc de réduire la taille d’une image.
Il faut distinguer les compressions sans perte et avec perte :
- La compression sans perte comprime les données de pixels afin que la qualité de l’image reste la même. Seule la taille du fichier est réduite.
- La compression avec perte élimine certaines données. Cela dégrade l’image, attention donc à trouver un bon équilibre pour ne pas trop sacrifier la qualité de votre image.
Réduire la taille de l’image
L’étape suivante consiste simplement à réduire la taille de l’image. C’est-à-dire à couper/recadrer l’élément qui nous intéresse, afin de ne pas télécharger de photos trop grandes sur notre site.
Utiliser un serveur CDN pour optimiser ses images
Une autre façon d’optimiser ses images est d’utiliser un serveur CDN. Il s’agit de serveurs qui permettent d’accélérer les temps de chargement des pages en réduisant la distance entre le visiteur du site et le serveur.
Comment optimiser ses images grâce au codage ?
Maintenant que nous avons présenté les solutions no-code, passons aux options d’optimisation des images nécessitant de coder.
Utiliser des images réactives
Il s’agit d’ajuster l’image pour qu’elle occupe l’espace disponible à sa taille maximale tout en conservant les proportions d’origine.
Depuis peu, les navigateurs Web réservent suffisamment d’espace pour une image avant de la charger – si l’élément d’image a des attributs de largeur et de hauteur.
Cela évite le changement de disposition cumulatif (CLS).
Utiliser le chargement différé
Voici une technique avec laquelle le navigateur ne télécharge pas toutes les ressources du serveur en une seule fois (lorsque la page est lancée). Il le fait uniquement quand elles sont nécessaires.
Le temps de chargement des images pourrait être grandement accéléré à l’avenir grâce au nouvel attribut CSS – content-visibility – qui permet à l’utilisateur d’ignorer le travail de rendu d’un élément jusqu’à ce qu’il soit nécessaire.
element {content-visibility: hidden;}
Utiliser des formats d’image plus modernes
Si possible, vous devriez utiliser des formats d’image modernes et ajouter une solution de secours avec prise en charge des anciens navigateurs.
<image><source srcset= »image.webp » type= »image/webp »><source srcset= »image.jpg » type= »image/jpg »><img src= »image.jpg”></image>
Le décodage asynchrone
L’attribut asynchrone indiquera au navigateur qu’il est possible de décoder les images ultérieurement. Cela permettra donc de vous assurer que le navigateur puisse continuer à afficher le contenu même si les images ne sont pas entièrement chargées.
<img decoding= »async »/>
Activer la mise en cache du navigateur
Cela peut aider à optimiser les images de votre site en stockant certains de ces fichiers localement dans le navigateur de l’utilisateur.
Ainsi, lorsqu’il se rendra sur votre site pour la première fois, les données des images seront enregistrées localement. Et lorsqu’il reviendra, il disposera déjà de certains fichiers dont il a besoin.
Comment optimiser ses images pour le SEO ?
L’optimisation des images sur votre site peut également vous permettre d’améliorer votre trafic organique. Et donc d’attirer naturellement des prospects qualifiés sur votre page, augmentant en parallèle votre taux de conversion.
Bien nommer ses images
La première chose à faire pour optimiser ses images, mais aussi la plus importante, est de leur donner la bonne dénomination. Le nom de l’image doit décrire ce qu’elle représente, sans caractères ni lettres inutiles.
Ajouter un texte-alt
Une autre chose importante est d’ajouter une description d’image alt car elle aide les web crawlers à mieux comprendre l’intérêt de votre image et le contenu auquel elle est associée. Les moteurs de recherche pourront ainsi orienter les internautes vers votre page en fonction de leur centre d’intérêt.
Le texte alt doit être court – pas plus de 16 mots et environ 80-125 caractères.
Attention à la taille de l’image
Tant que la plupart de vos images font moins de 500 Ko, selon leurs dimensions, elles ne devraient pas affecter le temps de chargement de votre site web.
Choisir le bon format d’image
Là encore, le format d’image que vous utilisez aura un impact sur vos performances SEO.
Le mot de la fin
Optimiser les images de votre site est un excellent moyen d’accélérer son temps de chargement. Et donc d’en faire une véritable machine d’acquisition organique.
Comme vous avez pu vous en rendre compte, il existe toujours une solution pour conserver la qualité de vos images sans compromettre la vitesse et les performances de votre site.
Pour vous aider à optimiser vos images et vos pages, vous pouvez aussi faire appel à Agily ! Découvrez comment nous pouvons vous aider et parlez-nous de vos besoins !
