Optimisation des images pour une meilleure expérience utilisateur

La conception de site Web est plus qu’une question de créer un site Web qui semble esthétique pour l’œil, il doit également bien paraître pour les moteurs de recherche, au moins si vous voulez obtenir de bons classements et donc tout ce beau trafic.

Il existe de nombreuses façons pour Google d’évaluer le bon classement d’un site (plus de 200 disent-ils), dont deux sont la qualité de l’expérience utilisateur et la rapidité de chargement de la page. Ces deux étant bien sûr très liées).

L’élément le plus important sur n’importe quelle page web est bien sûr les images, et comme on ne peut pas les omettre (les images disent mille mots, sans parler du fait que Google « s’attend à » les voir), il est donc important qu’elles soient optimisées et nommées correctement.

Il est également importance de choisir les bonnes images pour un site et que le bon type de format soit utilisé. Utiliser le mauvais type d’image et de format peut vraiment nuire aux temps de chargement de vos pages web.

Bien qu’il soit assez facile de se rappeler les plus grands changements d’algorithmes de Google au cours des dernières années et les effets à grande portée de chacun, vous ne pouvez pas réaliser que le célèbre algorithme propriétaire de Google change des centaines de fois par an.

Google et d’autres incluent le temps de chargement de la page et la vitesse du site dans leurs classements pour les métriques de conception clés. Cela signifie que l’optimisation des images ne peut pas être négligée dans vos processus de conception et de développement Web.

Prendre le temps d’optimiser les images est un gagnant-gagnant à la fois pour le référencement et l’expérience utilisateur. Comme pour tous les autres aspects de la conception de sites Web, l’optimisation des images est en partie intuitive, en partie basée sur les meilleures méthodes, et globalement testable en A/B tests. Les concepteurs Web devraient suivre ces cinq meilleures pratiques d’optimisation de l’image:

1. Déplacez l’optimisation de l’image dans la phase de conception initiale du projet.

Prendre des décisions sur la taille, la complexité et la sélection des images à ce stade peut aider à s’assurer que les pages ne sont pas trop « lourdes » lors de leur chargement.

Par exemple, bien qu’il ne s’agisse pas spécifiquement d’une optimisation « image », l’utilisation d’un grand nombre de polices Web peut considérablement augmenter le temps de chargement des pages lorsque les navigateurs chargent ces ressources. Pour un UX optimal, limitez votre sélection de polices Web.

2. Sélectionnez le format de fichier approprié pour le type d’image que vous avez.

L’erreur numéro un que les concepteurs et les développeurs font est d’utiliser le mauvais ou le même format d’image pour chaque image sur un site. Suivez ces suggestions pour déterminer le format correct pour une image donnée:

• Les photos devraient presque toujours être des fichiers JPEG, comme d’autres images complexes avec des milliers (ou millions) de couleurs, des dégradés de couleurs subtils et aucun besoin de transparence d’image.
• Les images vectorielles avec une complexité minimale sont souvent mieux servies que SVG (Scalable Vector Graphics), ce qui offre l’avantage de pouvoir redimensionner les images pour les écrans de bureau, tablette, mobile et rétine sans perte de qualité en utilisant un seul site Web.
• Les logos, illustrations, icônes et images similaires comportant moins de 256 couleurs sont généralement optimisés au format GIF, à condition qu’ils ne requièrent qu’une transparence par masque.
• Le format PNG polyvalent est nécessaire pour les images nécessitant une transparence et une superposition. Les fichiers PNG ont tendance à être plus volumineux que les autres formats, en fonction de leur optimisation.
• Des vidéos simple sans son – et dont la taille et la largeur sont inférieures à quelques centaines de pixels – est souvent mieux produit sous la forme d’un fichier GIF animé plutôt que d’un fichier vidéo.
• Une grande bibliothèque d’icônes vectorielles qui changent rarement peut être mieux utilisée comme police Web CSS2 dans un format tel que TTF / OTF ou WOFF.
• Dans certains cas, dessiner ou animer du contenu via CSS et JavaScript peut être une optimisation significative.
• Pour les collections d’images liées à l’interface utilisateur, la navigation et les dispositions générales d’un navigateur, vous pouvez obtenir une optimisation supplémentaire en créant une seule image plus grande avec toutes ces images, puis en sélectionnant les images appropriées via CSS ou JavaScript. Cela peut réduire le nombre d’allers-retours et de nouvelles connexions requis par le navigateur, bien que cela devienne probablement moins important à mesure que l’adoption de l’HTTP/2 augmente.

3. Optimisez les images à l’oeil nu.

Une fois que vous avez choisi le format approprié, assurez-vous que l’image est aussi compressée que possible sans sacrifier la qualité.

Les fichiers JPEG utilisent une compression avec perte, ce qui signifie que vous devez équilibrer la qualité et la taille du fichier lors de l’optimisation. La différence entre un JPEG «100%» de qualité «maximum» et un JPEG «basse qualité» de 30% peut être étonnante. Essayez d’abaisser la qualité à un niveau bas puis de l’augmenter de 10% jusqu’à ce que vous atteigniez un niveau acceptable. Assurez-vous de revérifier l’actif original pour un test final.

Lors de l’optimisation des fichiers PNG, essayez d’utiliser les formats PNG-8 dans la mesure du possible. Ils vous limitent à une palette de 256 couleurs, mais avec l’avantage d’une taille de fichier nettement inférieure à celle d’un fichier PNG-24.

4. Déterminez ce qui est le mieux pour votre site Web.

Chaque site Web, chaque scénario et chaque audience étant différents, il n’y a pas de nombre spécifique auquel vos images doivent correspondre.

Le moyen le plus précis pour le déterminer est de calculer le poids total de la page pour votre site en additionnant la taille de tous les éléments (HTML, CSS, JavaScript, images, vidéos et autres). Ensuite, vous pouvez utiliser un outil de calcul pour savoir combien de temps le contenu peut prendre pour télécharger dans les navigateurs de vos utilisateurs. Notez que le temps réel de téléchargement et de rendu peut varier de 25 à 50% de plus que cette estimation.

Cela dit, utilisez des images de moins de 200 Ko lorsque cela est possible – une taille de fichier plus petite est toujours préférable! Essayez d’obtenir votre poids total de la page bien en dessous de 1 mégaoctet.

5. Donnez à ces images des noms significatifs.

Même si nous parlons principalement de l’optimisation de la taille des fichiers pour les images, n’oubliez pas les bases. Les images de sites Web nommées « rouge-brillante-voiture.jpg » contiennent plus d’informations de référencement que « image1.jpg ».