Qu’est-ce que l’optimisation des images ?

L’optimisation des images est un procédé permettant de modifier et de distribuer des images de haute qualité avec des dimensions, une résolution et un format optimisés pour l’appareil qui y accède, tout en maintenant une taille de fichier aussi petite que possible sans risques de dégradations ou de pertes affectant la qualité des images.

Cela semble impossible ? Peut-être, mais pour qu’un site Web soit réactif et adapté à tout type d’appareils, il serait difficile de faire sans. En effet, les utilisateurs peuvent consulter votre site en utilisant différents navigateurs sur une multitude d’appareils, qu’il s’agisse de smartphones, de tablettes ou d’ordinateurs. Ils s’attendent également à ce que votre site soit réactif, c’est pourquoi l’optimisation des images est une partie centrale de ce procédé qui peut impacter la vitesse de distribution ainsi que les résultats de recherche sur votre site Web.

Pourquoi l’optimisation des images est-elle importante ?

L’optimisation des images, bien qu’elle ne soit pas obligatoire, est très importante si vous souhaitez offrir une bonne expérience d’affichage aux utilisateurs. Le minimum est de choisir un format qui permettra à vos images de s’afficher correctement sur n’importe quel appareil. Il faut aussi se pencher sur la résolution et le codage des images qui affecteront directement la qualité et la taille de vos images. 

Ensuite, au-delà de la modification des images en elles-mêmes, vous devez vous occuper du nom des fichiers, des balises ALT et des métadonnées pour améliorer votre référencement (SEO).

Ces tâches peuvent être effectuées à l’aide d’outils externes, mais elles deviendront bien plus chères, laborieuses et difficiles à gérer à mesure que vous développerez votre activité et devrez gérer des milliers d’images à la fois. Une solution d’optimisation des images, d’autant plus si elle est basée sur l’edge computing, permet d’automatiser l’optimisation des images de votre site Web à grande échelle tout en réduisant ou en supprimant les dépenses informatiques, sans parler du coût associé à la gestion manuelle de ces tâches. En associant une solution d’optimisation à un service de CDN, vous pourrez mettre en cache les images optimisées pour les envoyer plus rapidement aux spectateurs et spectatrices.

Optimisation des images : comment fonctionne-t-elle ?

Les solutions d’optimisation des images vous permettent de télécharger des images en haute résolution, puis de définir différents paramètres pour les distribuer efficacement aux personnes qui consultent votre site. Les solutions d’optimisation des images se présentent généralement sous la forme de plug-ins ou d’extensions qui s’installent dans votre système de gestion de contenu ou vos services autonomes, que ce soit en ligne ou dans vos propres locaux. Ces solutions permettent de configurer des paramètres de transformation et de les appliquer au niveau du serveur pour que les images soient modifiées avant d’être distribuées.

Les techniques couramment utilisées pour distribuer des images optimisées incluent :

• L’utilisation d’une fonction de détection d’appareil à la volée pour transmettre le fichier image le mieux adapté à la taille de chaque écran.

• 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 certaine taille d’écran.

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 envoie une requête concernant une image spécifique adaptée à son appareil, et la solution d’optimisation se charge des modifications nécessaires avant de distribuer l’image optimisée.

Plutôt que d’anticiper tous les types d’appareils qui pourraient accéder à votre site et de définir des paramètres pour chaque scénario, vous pouvez utiliser des API JavaScript qui sont programmées pour détecter des informations sur le navigateur du client et sa version afin de demander la transformation la mieux adaptée à chaque situation.

Vous pouvez associer une solution d’optimisation des images à un service CDN pour distribuer des images optimisées encore plus rapidement. Après avoir converti et distribué une image, le service stocke l’image d’origine et la version optimisée mises en cache sur le serveur CDN. Ainsi, lorsqu’une requête identique est reçue, il pourra distribuer cette même version à partir du cache sans devoir l’optimiser à nouveau. Les requêtes concernant chaque optimisation sont gérées en utilisant l’image d’origine mise en cache, ce qui réduit à la fois le trafic et la charge de votre serveur d’origine.

Avantages des solutions d’optimisation des images

Les avantages des solutions d’optimisation des images sont nombreux : elles vous permettent de gagner du temps, de réduire les coûts d’infrastructure, d’améliorer votre référencement et de proposer une meilleure expérience à vos utilisateurs.

1. Flux de travail optimisés

Si votre site comporte un grand nombre d’images, vous pourriez rapidement avoir du mal à gérer et optimiser manuellement l’ensemble de votre galerie. À l’heure actuelle, il n’est pas rare de devoir convertir une image en 10 versions différentes ou plus, comportant chacune un fichier séparé pour les résolutions d’écran les plus communes. Une solution d’optimisation des images peut vous faire gagner un temps précieux en créant les images dont vous avez besoin à partir d’un seul fichier source de haute qualité. Une fois intégrée à votre flux de travail, la solution se charge de toutes ces tâches à votre place de manière entièrement automatisée. Finis les scripts de pré-traitement et les images à créer une par une !

2. Économies

Les solutions d’optimisation des images ont également l’avantage de réduire les coûts d’infrastructure : vous n’avez pas besoin de stocker plusieurs versions de chaque fichier sur votre serveur ou de payer des ressources de calcul pour effectuer les conversions. Un service de CDN vous permet d’économiser encore plus en réduisant vos frais de sortie. Les images sont transmises par le CDN à partir de la mémoire cache et ses capacités peuvent être mises à niveau à votre rythme en fonction de vos besoins.

3. Distribution plus rapide

Le plus grand avantage d’une solution d’optimisation des images associée à un CDN est la vitesse de distribution. Un CDN distribue des images mises en cache sur des serveurs proches de vos utilisateurs pour accélérer le délai d’affichage et réduire le temps nécessaire pour charger votre site.

Ce délai est important pour offrir une bonne expérience utilisateur, mais il a aussi un impact sur le référencement de votre site. Les moteurs de recherche comme Google analysent son contenu en tenant compte de sa vitesse de chargement pour référencer votre site dans les résultats de recherche. Si votre site met trop de temps à charger à cause de ses images, il risque d’être moins bien classé par les moteurs de recherche. Pour améliorer votre référencement, il est donc important que vos images se chargent rapidement et soient optimisées pour chaque appareil.

En adoptant des pratiques d’optimisation des images, les entreprises peuvent booster les temps de chargement de leurs sites Web, réduire la charge du serveur d’origine et améliorer la satisfaction de leurs 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 à recevoir des expériences en ligne toujours plus fluides et rapides, l’optimisation des images joue un rôle fondamental pour rester compétitif dans la sphère numérique.

Consultez les ressources ci-dessous pour en savoir plus sur l’optimisation des images :

• Page produit avec démo en direct : /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 Image Optimizer : /blog/its-about-time-to-value-announcing-self-service-image-optimization

• Témoignage client : /video/fastly-image-optimizer 

Tutoriel de Fastly Image Optimizer : /fr/tutorials/fastly-io