L'optimisation des images pour le Web est importante. Vous voulez qu'ils soient suffisamment petits pour être chargés rapidement, mais pas si compacts qu'ils soient flous. Certaines plates-formes, y compris les principaux créateurs de sites Web, sont dotées d'outils d'optimisation intégrés, mais même si vous les utilisez, il est toujours utile de comprendre le processus de base et pourquoi il est important.
Ces 10 trucs et astuces vous expliqueront pourquoi vous devez optimiser les images pour le Web, comment cela améliore les performances et certaines des meilleures façons de le faire.
1. Pourquoi devriez-vous optimiser vos images
Selon un rapport de HTTP Archive, en moyenne, les images représentent près de 50 % du contenu d'une page Web. C'est pourquoi il est important de vous assurer que les images de votre site sont optimisées pour se charger le plus rapidement possible : vous pouvez imaginer combien de temps il faudra à vos clients pour charger une page si la moitié de celle-ci est composée d'images extrêmement volumineuses.
L'optimisation des images vous permet de réduire la taille de vos fichiers image sans affecter l'expérience utilisateur. Dans de nombreux cas, réduire la taille de vos fichiers image peut les rendre jusqu'à 90 % plus petits, de sorte qu'ils occupent moins d'espace et nécessitent moins de bande passante pour leur chargement.
En plus d'être essentiels à l'expérience utilisateur, les médias à chargement rapide sont essentiels pour le référencement. Si les vitesses de chargement de vos pages sont trop lentes, vous aurez du mal à vous classer en bonne place sur les pages de résultats des moteurs de recherche.
2. Sélectionnez le bon type de fichier
Il est essentiel de comprendre que les différents formats de fichiers image agissent différemment. Les principaux formats avec lesquels vous travaillerez sont JPG, PNG et GIF ; chacun convient lorsqu'il est utilisé de manière appropriée.
JPG : les fichiers JPG sont largement utilisés sur le Web. Ils sont très utiles dans les situations où vous souhaitez ajuster la qualité tout en la gardant à son meilleur. JPG est le format de choix pour les images comportant une grande quantité de couleurs.
PNG - Le format de fichier PNG est idéal pour les images de haute qualité, mais il est également associé à des fichiers plus volumineux et, par conséquent, à des vitesses de chargement plus lentes. Les fichiers PNG peuvent contenir des éléments transparents (comme un arrière-plan transparent pour une image de produit), contrairement aux fichiers JPG et GIF.
GIF : les GIF ne sont plus aussi largement utilisés qu'avant car ils sont limités à 256 couleurs. Cependant, ils ont une petite taille de fichier et sont souvent utilisés pour les médias animés.
Dans la plupart des cas, vous devez utiliser des fichiers JPG pour l'optimisation Web, mais vous devrez peut-être utiliser un peu le format PNG si vous avez besoin de transparence dans des images.
3. Comprendre l'optimisation avec ou sans perte
Lorsque vous explorez les programmes d'optimisation d'images et lisez des guides comme celui-ci, vous entendrez probablement les termes optimisation avec et sans perte. Il s'agit de deux manières différentes de compresser des médias.
Ce type d'optimisation d'image entraîne une perte de données lors de la compression. Cela réduit considérablement la taille du fichier mais peut avoir un impact sur la qualité de l'image si vous n'y faites pas attention. Il est préférable de sauvegarder une copie de sauvegarde de votre image dans un endroit sûr avant d'effectuer une optimisation avec perte. L'optimisation avec perte est généralement utilisée dans les images JPG et JPEG.
À l'opposé du spectre, la compression sans perte ne supprime pas les données ni ne réduit la qualité de l'image. Au lieu de cela, il supprime les informations non essentielles pour économiser de l'espace. Il est préférable de l'utiliser avec les fichiers PNG et GIF, mais ne vous attendez pas à ce qu'il réduise considérablement la taille du fichier.
4. Redimensionnez les images avant de les télécharger
Même si cela peut sembler beaucoup de travail, il vaut la peine de redimensionner et de recadrer vos images manuellement avant de les télécharger sur votre site Web. Les images brutes sont souvent bien plus grandes que ce dont vous avez besoin pour une utilisation sur le Web, et même une légère réduction des dimensions de l'image peut vous aider à réduire la taille du fichier.
En même temps, recadrez les fichiers image qui nécessitent beaucoup de modifications. Cela réduit également la taille du fichier, parfois de manière significative. Des programmes simples intégrés aux systèmes d'exploitation standard, comme Paint, peuvent être utilisés à cet effet. Nous vous recommandons de consulter des applications spécialisées en retouche photo si vous envisagez de travailler avec une quantité importante de médias visuels.
5. Profitez des outils intégrés
La plupart des meilleurs créateurs de sites Web pour les petites entreprises ou les photographes, tels que Wix et GoDaddy, sont dotés d'outils d'optimisation d'image intégrés. Profitez-en autant que possible, car ils sont généralement intuitifs et faciles à utiliser.
Par exemple, Wix vous permet d'ajouter l'application Wix Pro Gallery pour vous aider à optimiser les images. Cela vise à vous aider à présenter des médias de haute qualité avec les tailles de fichiers les plus basses possibles.
En plus de cela, la Wix Pro Gallery est livrée avec des outils d'optimisation automatique. Si vous n'êtes pas sûr de ce que vous faites, téléchargez simplement vos images et laissez l'application faire le travail à votre place.
6. Utilisez un plugin d'optimisation d'image
Pour les utilisateurs de WordPress.org, nous suggérons d'ajouter un plugin d'optimisation d'image automatique. Il existe de nombreux ooptions disponibles via la bibliothèque de plugins WordPress, y compris des options gratuites qui vous permettent de définir et d'oublier.
Avec le bon plugin, vous pouvez ignorer le processus de redimensionnement et de compression manuels de vos images. Au lieu de cela, vous pouvez configurer les paramètres de votre plugin, télécharger vos images et le laisser fonctionner. Certaines de nos options préférées incluent Optimus, Imsanity, EWWW Image Optimizer, Smush et Imagify.
7. Suivre la vitesse du site
En fin de compte, cela ne sert à rien d'optimiser vos images si vous ne savez pas dans quelle mesure vos efforts fonctionnent. Par exemple, un problème complètement différent pourrait ralentir votre site et vos efforts pourraient ne rien faire.
Pour vous aider à suivre l'optimisation de votre image, nous vous suggérons de configurer un suivi de la vitesse pour votre site. Il existe plusieurs plates-formes en ligne qui vous permettent de configurer un suivi automatique, et vous pouvez les enregistrer et y revenir pour référence future.
C'est également une bonne idée d'exécuter des tests manuels de vitesse de chargement des pages de temps en temps. Enregistrez les résultats des tests avec et sans images optimisées pour voir les améliorations que vous avez apportées.
8. Utilisez la technique du « flou »
Une méthode devenue particulièrement courante ces dernières années est la technique du « flou ». Fondamentalement, cela implique de télécharger deux versions différentes d'une image et de définir celle de qualité inférieure à afficher jusqu'à ce que l'image de haute qualité soit rendue correctement.
Vos spectateurs verront quelque chose presque immédiatement, même s'il s'agit d'une version floue et presque impossible à distinguer de l'image originale. Cela rend le temps de chargement perçu très rapide, même si le temps de chargement réel n'a pas changé.
Cependant, il convient de noter que vous aurez besoin de connaissances en codage CSS pour ajouter une fonctionnalité de flou à votre site Web. Vous devrez également vous assurer que vous utilisez une plate-forme de création de sites Web prenant en charge l'accès au code, car tous les créateurs de sites Web ne le font pas.
9. Utilisez le chargement différé sur votre site Web
Bien que cela n'implique pas directement l'optimisation des images, l'utilisation du chargement différé peut vous permettre d'ajouter des médias de meilleure qualité tout en conservant des vitesses de chargement rapides. Fondamentalement, cela implique le rendu de certaines parties d'une page avant d'autres, ce qui permet une vitesse de chargement perçue plus rapide. Les visiteurs d'un site Web peuvent voir le haut d'une page presque immédiatement.
La principale technique de chargement différé est le défilement à l'infini, où le contenu est généré lorsqu'un utilisateur fait défiler une page Web. S'ils ne continuent pas à défiler, la page entière n'est pas chargée et les ressources du serveur ne seront pas gaspillées.
Cependant, le chargement paresseux présente des inconvénients. C'est assez difficile à mettre en œuvre et cela peut potentiellement affecter négativement votre classement dans les moteurs de recherche.
10. Ajoutez des noms d'image clairs et du texte alternatif
En plus d'optimiser la partie visuelle de vos images, il est important d'ajouter des noms d'image, des légendes et du texte alternatif clairs et efficaces. Celles-ci sont essentielles au référencement, et vous aurez du mal à bien vous classer sur les pages de résultats des moteurs de recherche si vous ignorez ces métadonnées.
Lorsque vous les rédigez, concentrez-vous sur la création de descriptions lisibles et informatives en rapport avec l'image. Bien que l'ajout de mots-clés ou d'expressions supplémentaires puisse être tentant, ne le faites que s'ils s'intègrent naturellement, car les lecteurs et les algorithmes des moteurs de recherche peuvent souvent le savoir si vous essayez de les insérer. Vous pouvez en apprendre davantage sur les meilleures pratiques de référencement pour apporter des modifications simples qui vous aider à être classé.
Il est maintenant temps d'optimiser
Si vous n'optimisez pas déjà vos images pour une utilisation sur le Web, vous devriez le faire. Ce n'est pas un processus difficile, et l'utilisation de médias compressés peut entraîner des vitesses de chargement de page beaucoup plus rapides, une meilleure expérience utilisateur et un meilleur classement dans les moteurs de recherche.
Profitez des outils intégrés, utilisez des plugins d'optimisation automatique si possible, et envisagez des techniques de chargement paresseux ou de flou. Mais avant tout, concentrez-vous sur l'optimisation de l'expérience utilisateur en fournissant des médias de haute qualité avec la taille de fichier la plus faible possible.