Intégration de l'optimisation des images pour les auteurs de frameworks - AWS Amplify Hébergement

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

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 oucontain.

?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 n'a pas été trouvée.

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é.