Integración de la optimización de imágenes para autores de marcos - AWS Amplify Hospedaje
Comprensión de la optimización de imágenes API

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Integración de la optimización de imágenes para autores de marcos

Los autores de marcos pueden integrar la característica de optimización de imágenes de Amplify mediante la especificación de implementación de Amplify Hosting. Para habilitar la optimización de imágenes, el manifiesto de implementación debe contener una regla de enrutamiento dirigida al servicio de optimización de imágenes. En el siguiente ejemplo se muestra cómo configurar la regla de enrutamiento.

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

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

Para obtener más información sobre cómo definir la configuración de la optimización de imágenes mediante la especificación de implementación, consulte Uso de la especificación de implementación de Amplify Hosting para configurar la salida de la compilación.

Comprensión de la optimización de imágenes API

La optimización de imágenes se puede invocar en tiempo de ejecución a través del dominio de una aplicación AmplifyURL, en la ruta definida por la regla de enrutamiento.

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

La optimización de imágenes impone las siguientes reglas a las imágenes.

  • Amplify no puede GIF optimizarlos ni APNG SVG formatearlos ni convertirlos a otro formato.

  • SVGlas imágenes no se muestran a menos que la dangerouslyAllowSVG configuración esté habilitada.

  • El ancho o el alto de las imágenes de origen no pueden superar los 11 MB o los 9000 píxeles.

  • El límite de tamaño de una imagen optimizada es de 4 MB.

  • HTTPo HTTPS es el único protocolo compatible para obtener imágenes de forma remotaURLs.

HTTPencabezados

El HTTP encabezado de solicitud de aceptación se utiliza para especificar los formatos de imagen, expresados como MIME tipos, permitidos por el cliente (normalmente un navegador web). El servicio de optimización de imágenes intentará convertir la imagen al formato especificado. El valor especificado para este encabezado tendrá una prioridad mayor que el parámetro de consulta de formato. Por ejemplo, un valor válido para el encabezado Accept es image/png, image/webp, */* . La configuración de formatos especificada en el manifiesto de implementación de Amplify restringirá los formatos a los de la lista. Incluso si el encabezado Accept solicita un formato específico, se ignorará si el formato no está en la lista de permitidos.

URIparámetros de solicitud

En la siguiente tabla se describen los parámetros de URI solicitud para la optimización de imágenes.

Parámetros de consulta Tipo Obligatorio Descripción Ejemplo

url

Cadena

Sí

Una ruta relativa o absoluta URL a la imagen de origen. Para un control remotoURL, se admiten los protocolos http y https. El valor debe estar URL codificado.

?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png

width

Número

Sí

Ancho en píxeles de la imagen optimizada.

?width=800

height

Número

No

Alto en píxeles de la imagen optimizada. Si no se especifica, la imagen se escalará automáticamente para que coincida con el ancho.

?height=600

fit

Valores de enumeración: cover, contain, fill, inside, outside

No

Forma en que se redimensiona la imagen para que se ajuste al ancho y alto especificados.

?width=800&height=600&fit=cover

position

Valores de enumeración: center, top, right, bottom, left

No

Posición que se utilizará cuando fit sea cover o contain.

?fit=contain&position=centre

trim

Número

No

Recorta los píxeles de todos los bordes que contienen valores similares al color de fondo especificado del píxel superior izquierdo.

?trim=50

ampliar

Objeto

No

Agrega píxeles a los bordes de la imagen con el color derivado de los píxeles del borde más cercano. El formato es {top}_{right}_{bottom}_{left}, donde cada valor es el número de píxeles que se van a agregar.

?extend=10_0_5_0

extract

Objeto

No

Recorta la imagen al rectángulo especificado, delimitado por la parte superior, la izquierda, el ancho y el alto. El formato es {left}_{top}_{width}_{right}, donde cada valor es el número de píxeles que se van a recortar.

?extract=10_0_5_0

formato

Cadena

No

Formato de salida deseado de la imagen optimizada.

?format=webp

quality

Número

No

Calidad de la imagen, de 1 a 100. Solo se utiliza al convertir el formato de la imagen.

?quality=50

rotate

Número

No

Rota la imagen en el ángulo especificado en número de grados.

?rotate=45

flip

Booleano

No

Refleja la imagen verticalmente (de arriba a abajo) en el eje X. Siempre ocurre antes de la rotación, si se produce.

?flip

flop

Booleano

No

Refleja la imagen horizontalmente (de izquierda a derecha) en el eje Y. Siempre ocurre antes de la rotación, si se produce.

?flop

sharpen

Número

No

La nitidez mejora la definición de los bordes de la imagen. Los valores válidos se encuentran entre 0,000001 y 10.

?sharpen=1

median

Número

No

Aplica un filtro mediano. Esto elimina el ruido o suaviza los bordes de la imagen.

?sharpen=3

blur

Número

No

Aplica un desenfoque gaussiano del sigma especificado. Los valores válidos se encuentran entre 0,3 y 1000.

?blur=20

gamma

Número

No

Aplica una corrección gamma para mejorar el brillo percibido de una imagen redimensionada. El valor debe estar entre 1,0 y 3,0.

?gamma=1

negate

Booleano

No

Invierte los colores de la imagen.

?negate

normalize

Booleano

No

Mejora el contraste de la imagen al ampliar su luminancia para cubrir un rango dinámico completo.

?normalize

threshold

Número

No

Sustituye los píxeles de la imagen por píxeles negros si su intensidad es inferior al umbral especificado. Si la intensidad es superior al umbral, los sustituye por píxeles blancos. Los valores válidos se encuentran entre 0 y 255.

?threshold=155

tint

Cadena

No

Colorea la imagen con el color proporcionado y RGB conserva la luminancia de la imagen.

?tint=#7743CE

grayscale

Booleano

No

Convierte la imagen a escala de grises (blanco y negro).

?grayscale

Códigos de estado de respuesta

En la lista siguiente se describen los códigos de estado de respuesta de la optimización de imágenes.

Éxito: código de HTTP estado 200

La solicitud se ha completado correctamente.

BadRequest - código HTTP de estado 400

  • Se especificó incorrectamente un parámetro de consulta de entrada.

  • El mando a distancia no URL aparece en la lista de permitidos en la remotePatterns configuración.

  • El mando a distancia URL no se convierte en una imagen.

  • El ancho o alto solicitados no aparecen como permitidos en la configuración sizes.

  • La imagen solicitada SVG sí, pero la dangerouslyAllowSvg configuración está desactivada.

No se ha encontrado: código de HTTP estado 404

No se ha encontrado la imagen de origen.

El contenido es demasiado grande: código de HTTP estado 413

La imagen de origen o la imagen optimizada superan el tamaño máximo permitido en bytes.

Descripción del almacenamiento en caché de imágenes optimizado

Amplify Hosting almacena en caché las imágenes optimizadas CDN para que las solicitudes posteriores a la misma imagen, con los mismos parámetros de consulta, se atiendan desde la caché. El encabezado controla el tiempo de vida de la memoria caché (TTL). Cache-Control En la siguiente lista se describen las opciones para especificar el encabezado Cache-Control.

  • Uso de la clave Cache-Control en la regla de enrutamiento que se dirige a la optimización de imágenes.

  • Uso de encabezados personalizados definidos en la aplicación de Amplify.

  • En el caso de las imágenes remotas, se respeta el encabezado Cache-Control devuelto por la imagen remota.

Lo minimumCacheTTL especificado en la configuración de optimización de la imagen define el límite inferior del Cache-Control max-age directiva. Por ejemplo, si una imagen remota URL responde con unCache-Control s-max-age=10, pero el valor de minimumCacheTTL es 60, entonces se usa 60.