Comprendre l'optimisation de l'image API

Intégration de l'optimisation des images pour les auteurs de frameworks

Les auteurs du framework peuvent intégrer la fonctionnalité d'optimisation d'image d'Amplify en utilisant la spécification de déploiement d'Amplify Hosting. Pour activer l'optimisation des images, votre manifeste de déploiement doit contenir une règle de routage qui cible le service d'optimisation des images. L'exemple suivant montre comment configurer la règle de routage.


// .amplify-hosting/deploy-manifest.json

{
  "routes": [
    {
      "path": "/images/*",
      "target": {
        "kind": "ImageOptimization",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    }
  ]
}

Pour plus d'informations sur la configuration des paramètres d'optimisation des images à l'aide de la spécification de déploiement, consultezUtilisation de la spécification de déploiement d'Amplify Hosting pour configurer la sortie de compilation.

Comprendre l'optimisation de l'image API

L'optimisation de l'image peut être invoquée lors de l'exécution via le domaine d'une application AmplifyURL, sur le chemin défini par la règle de routage.


GET https://{appDomainName}/{path}?{queryParams}

L'optimisation des images impose les règles suivantes aux images.

Amplify ne peut pas les optimiserGIF, ni APNG les SVG formater, ni les convertir dans un autre format.
SVGles images ne sont diffusées que si le dangerouslyAllowSVG paramètre est activé.
La largeur ou la hauteur d'une image source ne peut pas dépasser 11 Mo ou 9 000 pixels.
La limite de taille d'une image optimisée est de 4 Mo.
HTTPou HTTPS est le seul protocole pris en charge pour le sourcing d'images à distanceURLs.

HTTPen-têtes

L'HTTPen-tête de demande Accept est utilisé pour spécifier les formats d'image, exprimés sous forme de MIME types, autorisés par le client (généralement un navigateur Web). Le service d'optimisation d'image tentera de convertir l'image au format spécifié. La valeur spécifiée pour cet en-tête aura une priorité supérieure à celle du paramètre de requête de format. Par exemple, une valeur valide pour l'en-tête Accept estimage/png, image/webp, */* . Le paramètre de formats spécifié dans le manifeste de déploiement d'Amplify limitera les formats à ceux de la liste. Même si l'en-tête Accept demande un format spécifique, il sera ignoré si le format ne figure pas dans la liste d'autorisation.

URIparamètres de demande

Le tableau suivant décrit les paramètres de URI demande pour l'optimisation des images.

Paramètre de la demande	Type	Obligatoire	Description	Exemple
url	Chaîne	Oui	Un chemin relatif ou absolu URL vers l'image source. Pour une télécommandeURL, les protocoles http et https sont pris en charge. La valeur doit être URL codée.	`?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png`
width	Nombre	Oui	Largeur en pixels de l'image optimisée.	`?width=800`
height	Nombre	Non	Hauteur en pixels de l'image optimisée. Si ce n'est pas spécifié, l'image sera redimensionnée automatiquement pour correspondre à la largeur.	`?height=600`
ajuster	Valeurs d'énumération :`cover`,,`contain`,`fill`, `inside` `outside`	Non	Comment l'image est redimensionnée pour s'adapter à la largeur et à la hauteur spécifiées.	`?width=800&height=600&fit=cover`
position	Valeurs d'énumération :`center`,,`top`,`right`, `bottom` `left`	Non	Une position à utiliser lorsque l'ajustement est `cover` ou`contain`.	`?fit=contain&position=centre`
trim	Nombre	Non	Découpe les pixels de tous les bords qui contiennent des valeurs similaires à la couleur d'arrière-plan spécifiée pour le pixel en haut à gauche.	`?trim=50`
étendre	Objet	Non	Ajoute des pixels sur les bords de l'image en utilisant la couleur dérivée des pixels du bord le plus proche. Dans le format`{top}_{right}_{bottom}_{left}`, chaque valeur correspond au nombre de pixels à ajouter.	`?extend=10_0_5_0`
extract	Objet	Non	Recadre l'image dans le rectangle spécifié délimité par le haut, la gauche, la largeur et la hauteur. Le format est {left} _ {top} _ {width} _ {right} où chaque valeur est le nombre de pixels à recadrer.	`?extract=10_0_5_0`
format	Chaîne	Non	Format de sortie souhaité pour l'image optimisée.	`?format=webp`
quality	Nombre	Non	La qualité de l'image, de 1 à 100. Utilisé uniquement lors de la conversion du format de l'image.	`?quality=50`
rotate	Nombre	Non	Fait pivoter l'image selon l'angle spécifié en degrés.	`?rotate=45`
retourner	Booléen	Non	Reflète l'image verticalement (de haut en bas) sur l'axe X. Cela se produit toujours avant la rotation, le cas échéant.	`?flip`
flop	Booléen	Non	Reflète l'image horizontalement (gauche-droite) sur l'axe Y. Cela se produit toujours avant la rotation, le cas échéant.	`?flop`
affiner	Nombre	Non	La netteté améliore la définition des bords de l'image. Les valeurs valides sont comprises entre 0,000001 et 10.	`?sharpen=1`
median	Nombre	Non	Applique un filtre médian. Cela permet de supprimer le bruit ou de lisser les bords d'une image.	`?sharpen=3`
brouiller	Nombre	Non	Applique un flou gaussien du sigma spécifié. Les valeurs valides sont comprises entre 0,3 et 1 000.	`?blur=20`
gamma	Nombre	Non	Applique une correction gamma pour améliorer la luminosité perçue d'une image redimensionnée. La valeur doit être comprise entre 1,0 et 3,0.	`?gamma=1`
nier	Booléen	Non	Inverse les couleurs de l'image.	`?negate`
normaliser	Booléen	Non	Améliore le contraste de l'image en étendant sa luminance pour couvrir une plage dynamique complète.	`?normalize`
seuil	Nombre	Non	Remplace n'importe quel pixel de l'image par un pixel noir, si son intensité est inférieure au seuil spécifié. Ou avec un pixel blanc s'il est supérieur au seuil. Les valeurs valides sont comprises entre 0 et 255.	`?threshold=155`
teinte	Chaîne	Non	Teinte l'image à l'aide de ce qui est fourni RGB tout en préservant la luminance de l'image.	`?tint=#7743CE`
niveaux de gris	Booléen	Non	Transforme l'image en niveaux de gris (noir et blanc).	`?grayscale`

Codes d'état des réponses

La liste suivante décrit les codes d'état de réponse pour l'optimisation des images.

Succès - code de HTTP statut 200

La demande a été traitée avec succès.

BadRequest - code HTTP d'état 400

Un paramètre de requête d'entrée n'a pas été spécifié correctement.
La télécommande n'URLest pas répertoriée comme autorisée dans le remotePatterns paramètre.
La télécommande URL ne se résout pas en image.
La largeur ou la hauteur demandées ne sont pas répertoriées comme autorisées dans le sizes paramètre.
L'image demandée l'est SVG mais le dangerouslyAllowSvg paramètre est désactivé.

Introuvable - code HTTP d'état 404

L'image source est introuvable.

Contenu trop volumineux - code HTTP d'état 413

L'image source ou l'image optimisée dépassent la taille maximale autorisée en octets.

Comprendre la mise en cache optimisée des images

Amplify Hosting met en cache les images optimisées sur notre CDN site afin que les demandes suivantes adressées à la même image, avec les mêmes paramètres de requête, soient traitées depuis le cache. Le temps de vie (TTL) du cache est contrôlé par l'Cache-Controlen-tête. La liste suivante décrit les options qui s'offrent à vous pour spécifier l'Cache-Controlen-tête.

En utilisant la Cache-Control clé de la règle de routage qui cible l'optimisation de l'image.
À l'aide d'en-têtes personnalisés définis dans l'application Amplify.
Pour les images distantes, l'Cache-Controlen-tête renvoyé par l'image distante est respecté.

La minimumCacheTTL valeur spécifiée dans les paramètres d'optimisation de l'image définit la limite inférieure de Cache-Control max-age directive. Par exemple, si une image distante URL répond par unCache-Control s-max-age=10, mais que la valeur de minimumCacheTTL est 60, alors 60 est utilisé.

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Déploiement d'un serveur Express

Utilisation d'adaptateurs open source pour n'importe quel SSR framework