Optimisation de l'image
Présentation
Les images sont généralement les composants les plus lourds d'une page Web, à la fois en termes d'octets et de nombre de demandes HTTP. L'optimisation des images de votre site Web est essentielle pour améliorer l'expérience de vos utilisateurs, réduire les coûts de livraison et améliorer votre position dans le classement des moteurs de recherche. Par exemple, la métrique Largest Contentful Paint de Google dans son algorithme de classement de recherche est fortement influencée par la mesure dans laquelle vous optimisez les images de votre site Web.
Décisions architecturales
Une solution d'optimisation d'image peut être conçue de différentes manières, en fonction de vos exigences en termes de coût, de flexibilité et de performances. Lorsque vous concevez une solution d'optimisation d'image, vous devez prendre les décisions techniques suivantes :
- Quelles sont les transformations d'image nécessaires ? S'agit-il de formater, de redimensionner, de recadrer, etc.
- Où décidons-nous de la transformation à appliquer à une demande d'image spécifique ? Dans le front-end côté client (conception statique, responsive, etc.), côté serveur (basé sur le contenu de la demande tel que l'appareil) ou une combinaison des deux ?
- Où exécutons-nous la transformation ? Dans un endroit central ou de manière distribuée ?
- Quand exécutons-nous la transformation ? À chaque fois ou stockons-nous des images transformées pour une courte durée ? Est-elle exécutée de manière synchrone ou asynchrone ?
Une autre décision importante à prendre est de savoir si vous souhaitez créer la solution à l'aide des services AWS ou acheter une solution gérée par un tiers.
Cas d'utilisation courants
Solution gérée par le client basée sur CloudFront, S3 et Lambda
Le cas d'utilisation le plus courant pour l'optimisation des images nécessite un formatage automatique basé sur les capacités du navigateur de l'utilisateur, et la possibilité pour le front-end de redimensionner l'image. Les frameworks de développement Web populaires tels que Next.JS fournissent des composants d'image réactifs qui peuvent sélectionner automatiquement la taille de l'image en fonction de la fenêtre d'affichage de l'appareil. L'architecture recommandée pour ce cas d'utilisation courant est expliquée dans le schéma suivant :
- L'utilisateur envoie une demande HTTP pour une image avec des transformations spécifiques, telles que l'encodage et la taille. Les transformations sont encodées dans l'URL, plus précisément sous forme de paramètres de requête. Voici un exemple d'URL : https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200.
- La demande est traitée par un emplacement périphérique CloudFront situé à proximité, offrant les meilleures performances. Avant de transmettre la demande en amont, une fonction CloudFront est exécutée lors de l'événement de demande de l'utilisateur afin de réécrire l'URL de la demande. Les fonctions CloudFront sont une fonctionnalité de CloudFront vous permettant d'écrire des fonctions légères dans JavaScript pour des personnalisations CDN à grande échelle et sensibles à la latence. Dans notre architecture, nous réécrivons l'URL pour valider les transformations demandées et nous normalisons l'URL en ordonnant les transformations et en les convertissant en minuscules pour augmenter le taux d'accès au cache. Lorsqu'une transformation automatique est demandée, la fonction décide également de la meilleure à appliquer. Par exemple, si l'utilisateur demande le format d'image le plus optimisé (JPEG, WebP ou AVIF) à l'aide de la directive format=auto, la fonction CloudFront sélectionnera le meilleur format en fonction de l'en-tête Accept présent dans la demande.
- Si l'image demandée est déjà mise en cache dans CloudFront, il y aura un accès au cache et l'image sera renvoyée depuis le cache de CloudFront. Pour augmenter le taux d'accès au cache, nous activons Origin Shield, une fonctionnalité de CloudFront qui agit comme une couche supplémentaire de mise en cache avant l'origine, afin de la décharger davantage des demandes. Si l'image ne se trouve pas dans le cache de CloudFront, la demande sera transmise à un compartiment S3, qui est créé pour stocker les images transformées. Si l'image demandée est déjà transformée et stockée dans S3, elle est simplement diffusée et mise en cache dans CloudFront.
- Dans le cas contraire, S3 répondra par un code d'erreur 403, qui est détecté par Origin Failover de CloudFront. Grâce à cette fonctionnalité native, CloudFront essaie à nouveau d'utiliser la même URL, mais cette fois en utilisant l'origine secondaire basée sur l'URL de la fonction Lambda. Lorsqu'elle est invoquée, la fonction Lambda télécharge l'image d'origine depuis un autre compartiment S3, où les images originales sont stockées, la transforme à l'aide de la bibliothèque Sharp, stocke l'image transformée dans S3, puis la diffuse via CloudFront où elle sera mise en cache pour les demandes futures.
Pour déployer cette solution, suivez les étapes décrites dans ce blog. En outre, le blog vous montre comment l'utiliser avec le composant Image de Next.JS. Notez que la solution vous permet de désactiver le stockage des images transformées dans S3, afin de vous fier exclusivement au cache CloudFront pour la diffusion des images transformées.
Solutions gérées par des tiers
Si vous préférez utiliser une solution d'optimisation d'image gérée par un tiers, pensez aux solutions disponibles sur AWS Marketplace, telles que Cloudinary, ImageKit.io ou Cloudimage. Les trois utilisent CloudFront ou ont des intégrations avec CloudFront si vous souhaitez gérer votre propre distribution CloudFront. Ces fournisseurs tiers sont spécialisés dans l'optimisation des images et peuvent fournir des fonctionnalités SaaS avancées, mais moyennant un coût supplémentaire.