Image Optimization désigne le processus consistant à modifier et à livrer des images de haute qualité dans le format, les dimensions et la résolution optimaux pour le dispositif qui y accède, tout en conservant la plus petite taille de fichier possible sans entraîner de dégradation visible de l’image.
Cela semble impossible ? Peut-être, mais pour livrer un site web réactif, il est malheureusement difficile de contourner cela. Aujourd’hui, les utilisateurs visitent votre site à partir de nombreuses sources différentes, des appareils mobiles aux ordinateurs personnels, en utilisant une variété de navigateurs. Les utilisateurs exigent des expériences réactives, et Image Optimization constitue une partie essentielle de ce processus, car elle peut avoir un impact sur la vitesse de distribution ainsi que sur les performances de votre site dans la recherche.
Pourquoi Image Optimization est-il important ?
Image Optimization est importante pour offrir une bonne expérience au spectateur, mais elle n’est pas obligatoire. Au minimum, vous devez choisir un format d’image qui affichera correctement vos images, quel que soit le dispositif sur lequel elles sont consultées. De plus, vous devez garder à l’esprit des éléments tels que la résolution et l’encodage de l’image, qui influent tous deux sur la qualité et la taille de vos images.
Au-delà de la transformation physique de vos images, vous devez prendre en compte des éléments tels que le nom du fichier, les tags ALT, et les métadonnées de l’image afin d’améliorer l’optimisation pour les moteurs de recherche (SEO).
Bien que vous puissiez vous charger vous-même de cette tâche à l’aide d’outils externes, elle devient plus difficile, plus coûteuse, et plus chronophage à mesure que votre entreprise se développe et que vous devez passer à l’échelle. (Sans mauvais jeu de mots !) Une solution d’Image Optimization, surtout si elle est basée en périphérie, peut aider à automatiser et à mettre à l’échelle le travail nécessaire pour optimiser les images sur votre site web, tout en réduisant ou en éliminant les dépenses informatiques, sans parler du coût de la gestion manuelle de cette tâche. Lorsqu’il est associé à un service de Content Delivery Network, vous pouvez mettre en cache les images optimisées et accélérer leur distribution au spectateur.
Optimisation des images : comment fonctionne-t-elle ?
Les solutions d’optimisation des images vous permettent de télécharger une image en haute résolution, puis de définir différents paramètres pour distribuer le plus efficacement possible le contenu aux visiteurs de votre site. Les solutions d’optimisation des images se présentent généralement sous la forme de plug-in ou d’extensions qui s’installent dans votre système de gestion de contenu ou vos services autonomes, que ce soit sur site ou en ligne. Ces solutions permettent de configurer des paramètres de transformation et de les appliquer au niveau du serveur avant de livrer l’image.
Les techniques couramment utilisées pour la distribution d’images optimisées incluent :
L’utilisation d’une détection de dispositif à la volée pour livrer le fichier image optimal en fonction de la taille de l’écran de votre utilisateur.
La compression des images pour optimiser leur distribution en fonction de la plateforme, de la connectivité, de la compatibilité, etc.
Le redimensionnement des images pour les adapter à une taille spécifique
En chargeant votre site web et en envoyant une requête pour l’image, le client web de l’utilisateur fait appel au CSS du site web afin de déterminer la version de l’image la plus appropriée pour l’appareil en question. Il enverra une requête pour une image spécifique avec ces paramètres, et la solution Image Optimization appliquera la transformation avant de rendre l’image optimisée disponible.
Plutôt que d’essayer de prévoir chaque dispositif susceptible d’accéder à votre site, et de définir des paramètres pour chacun de ces scénarios, vous pouvez utiliser des API JavaScript pour détecter par programmation des détails sur le navigateur du client et son numéro de version, et demander en conséquence la transformation la plus optimale.
Vous pouvez associer une solution d’Image Optimization à un service Content Delivery Network pour accélérer davantage la distribution d’images optimisées. Après le traitement de la première requête d’image, l’image d’origine et l’image transformée sont toutes deux mises en cache sur le serveur Content Delivery Network, et les futures requêtes pour les mêmes transformations sont traitées directement depuis le cache sans nécessiter de modification. Les requêtes pour différentes transformations sont traitées à l’aide de l’image d’origine dans le cache, réduisant le trafic et la charge de travail de votre origine.
Avantages des solutions d’Image Optimization
L’utilisation d’une solution Image Optimization vous aide à gagner du temps, à réduire les coûts d’infrastructure, à améliorer votre expérience utilisateur, et à améliorer votre SEO.
1. Optimiser les flux de travail
Selon le nombre d’images sur votre site, optimiser et maintenir vos images peut être une tâche chronophage et fastidieuse. Aujourd’hui, il est courant qu’une seule image soit transformée en 10 versions ou plus, chacune entraînant la création d’un fichier distinct pour les résolutions d’écran les plus courantes. Une solution d’Image Optimization vous fait gagner du temps en créant les images dont vous avez besoin à partir d’un seul fichier source de haute qualité. En intégrant une solution d’Image Optimization à votre flux de travail, vous pouvez automatiser ce processus. Plus besoin de créer manuellement plusieurs fichiers image, ni d’utiliser des scripts de pré-traitement !
2. Économies
L’utilisation d’une solution d’Image Optimization permet également de réduire les coûts d’infrastructure, car vous n’avez pas besoin de stocker plusieurs versions de chaque fichier sur votre serveur ni de dépenser de l’argent en ressources de calcul pour effectuer les transformations. L’utilisation d’un service de Content Delivery Network vous permet d’économiser encore davantage en contribuant à réduire vos frais de sortie de données grâce à la diffusion d’images depuis le cache et à la mise à l’échelle à mesure que vos besoins augmentent.
3. Distribution plus rapide
Le plus grand avantage d’utiliser une solution d’Image Optimization avec un Content Delivery Network est la vitesse de distribution. Un Content Delivery Network vous permet de livrer des images depuis le cache, plus près de votre utilisateur, en accélérant le délai de distribution et, par conséquent, le temps de chargement de votre site.
Le temps nécessaire pour livrer votre site n’est pas seulement important pour l’expérience utilisateur globale, il a un impact sur le référencement de votre site. Les moteurs de recherche comme Google explorent votre site et prennent en compte la vitesse de chargement comme l’un des facteurs de classement de votre site dans les résultats de recherche. Si vos images ralentissent le chargement de votre site, le moteur de recherche pourrait déprioriser votre site à cause de cela. Disposer d’images optimisées fournit à votre utilisateur l’image adaptée à son dispositif, affichée plus rapidement, et améliore ainsi votre référencement.
En adoptant des pratiques d’optimisation des images, les entreprises peuvent considérablement améliorer les temps de chargement des sites web, réduire la charge sur l’origine, et, au final, améliorer la satisfaction des utilisateurs. La corrélation positive entre les images optimisées et le classement sur les moteurs de recherche ne fait que confirmer l’importance de ces pratiques. Alors que les utilisateurs s’attendent à des expériences en ligne toujours plus rapides et fluides, l’optimisation des images devient un élément essentiel pour conserver un avantage concurrentiel dans le domaine virtuel.
Consultez les ressources ci-dessous pour en savoir plus sur Image Optimization :
Page produit avec démo en direct : https://www.fastly.com/products/image-optimization
e-book sur l’optimiseur d’images (Image Optimizer) : https://learn.fastly.com/fr-network-services-Performance-ebook-Image-Optimization.html
Article de blog sur l’automatisation d’Image Optimizer : https://www.fastly.com/blog/its-about-time-to-value-announcing-self-service-image-optimization
Témoignage client : https://www.fastly.com/video/fastly-image-optimizer
Tutoriel de Fastly Image Optimizer https://docs.fastly.com/fr/tutorials/fastly-io