Comment optimiser ses images sur son site web ?

La vitesse de la page est importante pour le référencement et l’expérience de l’utilisateur, mais de nombreuses entreprises manquent une opportunité facile d’améliorer ce domaine : l’optimisation de l’image.

Depuis quelques années la vitesse de chargement des pages est devenue très importante pour le taux de trafic et le classement de vos sites web. Les utilisateurs veulent des sites rapides et parce qu’ils veulent des sites rapides, Google le veut aussi. Le système de référencement Google classe donc mieux les sites rapides et réactifs. Vous pouvez faire appel à un développeur pour qu’il optimise le chargement de vos pages, cependant tous ces problèmes de chargement ne nécessitent pas une grande connaissance technique. Dans notre cas, le problème que nous allons aborder ici est le poids des images. Si une page peut être longue à s’ouvrir, c’est souvent dû aux chargements des images.

Heureusement, l’optimisation des images est une victoire très simple !

Images et chargement de page

Un audit fait sur la rapidité des pages a donc révélé que le poids des images est la partie majeure du problème de chargement. Les développeurs web semblent avoir oublié qu’il est nécessaire de redimensionner et de compresser les images avant de les uploader sur un serveur.    Aujourd’hui, il est courant de voir des sites web avec des mégaoctets d’images sur les pages. Des mégaoctets !! Une page ne devrait jamais dépasser 1 mégaoctet, mais c’est une constatation fréquente sur le web. En effet beaucoup de sites web arrivent à dépasser les 10 MB par page et c’est généralement dû au problème d’optimisation d’image.Le simple fait de savoir redimensionner, compresser et sauvegarder une image peut améliorer grandement la rapidité de chargement de vos pages.

Quand est-ce que nous nous sommes égarés ?

Remontons vingt ans en arrière, les connexions étaient tellement lentes que les pages web ne pouvaient pas se permettre d’être lourdes. Cela n’avait rien avoir avec le référencement, il n’y avait juste pas le choix pour que la page s’ouvre en un temps acceptable. Un site qui contenait 1 MB par page pouvait mettre 15 minutes à s’ouvrir !Maintenant que nous sommes dans l’ère des connexions rapides, les sites sont devenus très laxistes dans la surveillance du poids de la page, ce qui se traduit par des sites pouvant atteindre 25 Mo par page. Bien que les connexions soient maintenant plus rapides, le chargement d’une page est aujourd’hui encore plus important car il y a des paramètres restrictifs qu’il n’y avait pas à l’époque comme les téléphones portables et le référencement Google.
Au début de l’Internet, comme le chargement d’une page était crucial pour la navigation, les entreprises avaient des personnes graphiques dédiées à l’optimisation de l’image. Maintenant, la plupart s’appuient sur le CMS (Content Management System) pour le redimensionnement et la compression de l’image.Cela signifie que, dans la plupart des cas, l’optimisation de l’image se produit après le téléchargement. Ce processus se traduit par des poids de fichiers trop élevés pour les images, ce qui ralentit la vitesse de la page et donc, un référencement moindre du site.

Pourquoi ne pouvez-vous pas compter sur le CMS pour redimensionner et compresser vos images ?

Car quand vous utilisez un CMS pour redimensionner une image il ne modifie généralement que la taille de l’image et ne la comprime pas.
Si vous comprimez l’image (comme dans WordPress), le taux est préréglé. Cela signifie que même si cela représente un travail décent, vos fichiers sont toujours en moyenne 15% à 30% plus gros que s’ils avaient été correctement compressés avant d’être téléchargés. Cela peut être très problématique sur les sites qui ont plusieurs images par page. Le plus souvent, dans les audits réalisés, les images représentent en moyenne 40% à 60% du poids de la page.

Alors, qu’est-ce que vous devez faire avant de télécharger vos images ?

Les redimensionner.Redimensionner vos images est très important. D’abord assurez-vous de redimensionner une image à la taille désirée dans un logiciel comme Photoshop. Ensuite, même si vous devez encore la redimensionner dans le CMS, vous travaillerez avec une taille de fichier plus petite dès le début.Les types de fichier.Redimensionner et compresser votre image n’est pas la seule tache. Beaucoup de personnes qui manipulent des images sur un site sans les compétences nécessaires utilisent du .jpg quand ils devraient utiliser du .png et vice versa. Lorsque vous utilisez le mauvais type de fichier, vous pouvez augmenter le poids du fichier de façon spectaculaire. Alors, quels types de fichiers utiliser ?Il y a plusieurs types : JPG, GIF, PNG and WebP. Ceux que vous utiliserez le plus souvent sont le JPG et le PNG.En général on ne choisit pas le type de fichier d’image mais on laisse celui par défaut. Cependant, le mauvais choix de type de fichier peut effectivement rendre vos images plus importantes qu’elles ne le doivent.La façon la plus simple pour savoir si vous devez utiliser du PNG ou JPG est de vous demander : « je regarde une photo ou autre chose comme de l’art ou un logo ? ». Chaque fois que vous sauvegardez une photo, utilisez du JPG. Pour tout le reste, logo, œuvre d’art, etc… utilisez du PNG.

La différence entre JPG et PNG

Le JPG a une « perte » lors de la compression. C’est-à-dire qu’il perd quelques données de façon permanente lors de la compression. L’œil ne perçoit pas cette perte de données ce qui permet d’avoir un fichier plus léger sans dégradation visible. Bien sûr, cela dépend de la qualité du JPG enregistré. Plus la qualité est réduite, plus les données sont perdues. Si elle est enregistrée dans une qualité trop faible, l’image sera visiblement de mauvaise qualité. Si vous souhaitez éviter ce problème, n’allez pas en-dessous d’un taux de qualité de 50% lors de la sauvegarde de l’image. Avec les cartes graphiques d’aujourd’hui, un taux de 50 pour cent devrait laisser la qualité suffisamment élevée pour avoir l’air correct, mais assez bas pour économiser beaucoup de taille de fichier.A l’inverse, le PNG ne perd pas de données lors de sa compression. L’image est rééchantillonnée et une couleur similaire peut être utilisée lors de la compilation des données, mais les données ne sont pas supprimées du fichier.Il existe deux types de PNG : l’un est un 24 bits et l’autre est un 8 bits. Lorsque vous essayez de réduire la taille du fichier, vous devrez le paramétrer en PNG 8 bits.

SEO, smartphone et poids d’images

Plus tard dans l’année, selon Google, ils passeront à l’indexation mobile, ce qui signifie qu’ils vont utiliser votre site mobile pour déterminer le positionnement de votre site. Rappelez-vous, la vitesse de la page est importante pour vos utilisateurs, et cela importe plus sur les smartphones. Si vous ne faites pas de votre mieux pour optimiser vos pages pour un téléchargement rapide, vous perdrez des utilisateurs, ainsi que des classements potentiels dans les moteurs de recherche. L’optimisation d’image est une victoire facile. Presque tous les sites ont un problème d’image. Si vous pouviez économiser 20% à 40% du temps de chargement de votre page, cela ne vaudrait-il pas le coup ?

Source: Search Engine Land – Kristine Schachinger