Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Cas d'utilisation de l'optimisation des images

Cette page fournit des exemples de comportement avancé de traitement des images, d'effets d'ordre de pipeline et de règles de normalisation automatique des images.

Ordre des transformations

Les opérations de la chaîne de paramètres de requête imop s'exécutent de gauche à droite, à l'exception de metadata ou scale, qui s'exécutent en premier, et de canvas, qui s'exécute en dernier. Étant donné que chaque opération agit directement sur la sortie visuelle de l'opération précédente, la séquence de vos paramètres affecte la qualité visuelle finale et la préservation des détails de l'image dérivée.

Prenons l'exemple d'une image source de 1 000 pixels de large sur 1 000 pixels de haut :

Exemple : Resize suivi de Crop

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

Redimensionner : l'image est d'abord réduite de 1 000 x 1 000 px à 200 x 200 px pour répondre au paramètre height=200.
Recadrage : l'opération left=0.5 supprime la moitié gauche de l'image déjà réduite.

Résultat : une image finale de 100 x 200 px représentant les 50% de contenu de droite. Étant donné que l'image entière a été réduite avant le recadrage, la région finale conserve beaucoup moins de détails.

Exemple : Crop suivi de Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

Recadrage : l'left=0.5opération extrait d'abord les 50% de droite de l' image source haute résolution, créant une 500 x 1000 px image intermédiaire.
Redimensionner : l'opération height=200 redimensionne cette section recadrée à sa hauteur finale.

Résultat : une image finale de 100 x 200 px. Étant donné que l'image d'origine a été recadrée en premier, puis redimensionnée, la sortie finale conserve beaucoup plus de détails et de clarté.

Comportement d'étirement et d'agrandissement

Par défaut, le service d'optimisation des images applique une stratégie stricte de réduction uniquement pour préserver la bande passante de diffusion périphérique et protéger la qualité visuelle. Si vous demandez des dimensions supérieures à celles de l'image d'origine, Cloud CDN ignore l'agrandissement et génère l'image à sa taille d'origine.

Pour remplacer ce comportement et forcer l'agrandissement d'un élément, vous devez déclarer explicitement la valeur stretch.

Conditions de validation pour l'agrandissement

Règle de double dimensionnement : la valeur stretch n'est autorisée que si vous fournissez explicitement les paramètres width et height dans l'opération Resize.
Contrainte de dimension unique : si vous incluez scaling=stretch tout en ne définissant qu'une seule dimension, telle que width ou height, le service d'optimisation des images rejette l'intégralité de la requête.

Par exemple,

Requête valide : ?imop=resize,width=500,height=500,scaling=stretch

Requête non valide : ?imop=resize,width=500, scaling=stretch

Mise en cache et invalidation du cache

Lorsque vous mettez à jour une image d'origine sur votre serveur d'origine, vous devez invalider la version mise en cache pour vous assurer que Cloud CDN récupère et diffuse l'élément mis à jour.

Comportement de mise en cache

Chaque combinaison unique de paramètres de transformation ajoutée à une URL d'image crée une entrée de cache distincte et séparée en périphérie. Pour optimiser votre taux de réussite du cache, évitez de créer un nombre excessif de variations de paramètres uniques. Par exemple, des modifications d'un seul pixel.

Cloud CDN normalise les clés de cache pour regrouper les paramètres de transformation identiques, quel que soit leur ordre dans la chaîne de requête.

Comportement d'invalidation

Lorsque vous mettez à jour une image d'origine sur votre serveur d'origine, vous n'avez besoin d'envoyer qu'une seule requête d'invalidation pour l'URL de l'image de base. Cloud CDN amélioré efface automatiquement l'image d'origine mise en cache et toutes ses variantes générées automatiquement (telles que WebP ou les versions optimisées) à l'échelle mondiale.

Fonctionnement de l'invalidation des variantes

Lorsque vous envoyez une requête d'invalidation du cache à l'aide d'un modèle de chemin d'accès qui correspond à une URL d'image de base, par exemple /images/my-picture.jpg, Cloud CDN identifie et efface automatiquement les éléments suivants :

L'image source d'origine mise en cache.
Toutes ses variantes générées précédemment.

Vous pouvez appliquer l'invalidation du cache Cloud CDN à l'aide des éléments suivants :

Google Cloud Console : accédez à Services réseau > Cloud CDN, sélectionnez l'origine, puis accédez à l'onglet Invalidation du cache. Google Cloud Vous pouvez également accéder à Services réseau > Équilibrage de charge, sélectionner votre équilibreur de charge, puis utiliser l'onglet Invalidation du cache.
Google Cloud CLI : utilisez la commande Google Cloud CLI compute url-maps invalidate-cdn-cache.
Tags de cache : il s'agit de l'approche recommandée pour gérer les images optimisées. Cela vous permet d'envoyer des requêtes d'invalidation ciblant un tag spécifique, ce qui efface le contenu associé pour un contrôle plus précis.

Par exemple :

Pour invalider /images/my-picture.jpg et toutes ses variantes optimisées à l'échelle mondiale :

Chemin d'accès : spécifiez le chemin d'accès exact /images/my-picture.jpg.
Hôte (facultatif) : spécifiez l'hôte si vous ne souhaitez effacer l'image que pour un domaine spécifique.

Une fois envoyée, cette action unique supprime toutes les versions optimisées de l'image des caches périphériques à l'échelle mondiale, ce qui garantit que les utilisateurs reçoivent immédiatement la version mise à jour lors de leur prochaine requête.

Profil colorimétrique et orientation de l'image dans EXIF (normalisation)

Les smartphones et appareils photo numériques modernes enregistrent fréquemment des images avec des grilles de pixels brutes et non pivotées, et s'appuient sur un tag d'orientation EXIF intégré pour demander à l'appareil de visualisation de faire pivoter l'image. Par exemple, de 90 degrés dans le sens des aiguilles d'une montre pour l'orientation portrait. De même, les profils colorimétriques ICC intégrés définissent l'affichage des couleurs sur différents moniteurs.

Pour garantir des opérations prévisibles, le pipeline périphérique d'optimisation des images normalise automatiquement les images avant d'exécuter des transformations.

Processus de normalisation

Avant d'exécuter des transformations, le moteur périphérique lit les tags d'orientation EXIF et les métadonnées du profil colorimétrique ICC, puis les applique physiquement à la grille de pixels. Cela permet de garantir la prévisibilité des coordonnées pour les paramètres crop et resize suivants.
Les opérations telles que crop, resize ou scale s'exécutent correctement par rapport aux dimensions visuelles réelles pour éviter les erreurs visuelles.
Après avoir appliqué des ajustements aux pixels principaux, le moteur périphérique supprime toutes les métadonnées non essentielles du fichier afin de maximiser les économies de taille. Par défaut, il conserve copyright, sauf si une valeur spécifique est demandée dans l'opération de métadonnées.