Integração de otimização de imagem para criadores de frameworks - AWS Amplify Hospedagem
Entendendo a otimização de imagens API

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Integração de otimização de imagem para criadores de frameworks

Os autores do framework podem integrar o recurso de otimização de imagem do Amplify usando a especificação de implantação do Amplify Hosting. Para habilitar a otimização de imagem, seu manifesto de implantação deverá conter uma regra de roteamento direcionada ao serviço de otimização de imagem. O exemplo a seguir demonstra como configurar a regra de roteamento.

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

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

Para obter mais informações sobre como definir as configurações de otimização de imagem usando a especificação de implantação, consulte Como usar a especificação de implantação do Amplify Hosting para configurar a saída da compilação.

Entendendo a otimização de imagens API

A otimização de imagem pode ser invocada em tempo de execução por meio do URL domínio do aplicativo Amplify, no caminho definido pela regra de roteamento.

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

A otimização de imagem impõe as seguintes regras para as imagens.

  • O Amplify não consegue otimizar GIF APNG e SVG formatar nem convertê-los em outro formato.

  • SVGas imagens não são exibidas a menos que a dangerouslyAllowSVG configuração esteja ativada.

  • A largura ou a altura das imagens de origem não podem exceder 11 MB ou 9.000 pixels.

  • O limite de tamanho de uma imagem otimizada é de 4 MB.

  • HTTPou HTTPS é o único protocolo compatível com o fornecimento de imagens com controle remotoURLs.

HTTPcabeçalhos

O HTTP cabeçalho Aceitar solicitação é usado para especificar os formatos de imagem, expressos como MIME tipos, permitidos pelo cliente (geralmente um navegador da Web). O serviço de otimização de imagem tentará converter a imagem para o formato especificado. O valor especificado para esse cabeçalho terá uma prioridade superior ao parâmetro de consulta de formato. Por exemplo, um valor válido para o cabeçalho Accept é image/png, image/webp, */* . A configuração de formatos especificada no manifesto de implantação do Amplify restringirá os formatos aos que estiverem na lista. Mesmo que o cabeçalho Accept solicite um formato específico, ele será ignorado se o formato não estiver na lista de permissões.

URIparâmetros de solicitação

A tabela a seguir descreve os parâmetros de URI solicitação para otimização de imagem.

Parâmetro de consulta Tipo Obrigatório Descrição Exemplo

url

String

Sim

Um caminho relativo ou absoluto URL para a imagem de origem. Para um controle remotoURL, os protocolos http e https são suportados. O valor deve ser URL codificado.

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

width

Número

Sim

A largura da imagem otimizada em pixels.

?width=800

height

Número

Não

A altura da imagem otimizada em pixels. Se não for especificada, a imagem passará por ajuste de escala automático para corresponder à largura.

?height=600

fit

Valores de enumeração: cover, contain, fill, inside, outside

Não

Como a imagem é redimensionada para se ajustar à largura e à altura especificadas.

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

position

Valores de enumeração: center, top, right, bottom, left

Não

Uma posição a ser usada quando o ajuste for cover ou contain.

?fit=contain&position=centre

trim

Número

Não

Apara pixels de todas as bordas que contenham valores semelhantes à cor de fundo especificada do pixel superior esquerdo.

?trim=50

estender

Objeto

Não

Adiciona pixels às bordas da imagem usando a cor derivada dos pixels da borda mais próxima. O formato é {top}_{right}_{bottom}_{left}, com cada valor indicando o número de pixels a serem adicionados.

?extend=10_0_5_0

extract

Objeto

Não

Corta a imagem no retângulo especificado delimitado pela parte superior, esquerda, largura e altura. O formato é {left}_{top}_{width}_{right}, com cada valor indicando o número de pixels a serem recortados.

?extract=10_0_5_0

format

String

Não

O formato de saída desejado para a imagem otimizada.

?format=webp

quality

Número

Não

A qualidade da imagem, de 1 a 100. Usado somente ao converter o formato da imagem.

?quality=50

rotate

Número

Não

Gira a imagem de acordo com o ângulo especificado em número de graus.

?rotate=45

flip

Booleano

Não

Espelha a imagem verticalmente (de cima para baixo) no eixo x. Isso sempre ocorre antes da rotação, se houver.

?flip

flop

Booleano

Não

Espelha a imagem horizontalmente (da esquerda para a direita) no eixo y. Isso sempre ocorre antes da rotação, se houver.

?flop

sharpen

Número

Não

Aprimoramento da nitidez na definição das bordas na imagem. Os valores válidos estão entre 0,000001 e 10.

?sharpen=1

mediano

Número

Não

Aplica um filtro mediano. Isso remove o ruído ou suaviza as bordas de uma imagem.

?sharpen=3

blur

Número

Não

Aplica um desfoque gaussiano com o sigma especificado. Os valores válidos vão de 0,3 a 1.000.

?blur=20

gamma

Número

Não

Aplica uma correção de gama para melhorar o brilho percebido de uma imagem redimensionada. O valor precisar estar entre 1,0 e 3,0.

?gamma=1

negate

Booleano

Não

Inverte as cores da imagem.

?negate

normalize

Booleano

Não

Melhora o contraste da imagem ampliando sua iluminação para englobar uma faixa dinâmica completa.

?normalize

threshold

Número

Não

Substitui qualquer pixel na imagem por um pixel preto, se sua intensidade for menor que o limite especificado. Ou por um pixel branco, se for maior que o limite. Os valores válidos estão entre 0 e 255.

?threshold=155

tint

String

Não

Tinge a imagem usando o fornecido, RGB preservando a luminosidade da imagem.

?tint=#7743CE

grayscale

Booleano

Não

Transforma a imagem em tons de cinza (preto e branco).

?grayscale

Código de status de resposta.

A tabela a seguir descreve os código de status de resposta para otimização de imagem.

Sucesso - código de HTTP status 200

A solicitação foi atendida com sucesso.

BadRequest - código de HTTP status 400

  • Um parâmetro de consulta de entrada foi especificado incorretamente.

  • O controle remoto não URL está listado como permitido na remotePatterns configuração.

  • O controle remoto URL não se transforma em uma imagem.

  • A largura ou altura solicitadas não estão listadas como permitidas na configuração sizes.

  • A imagem solicitada éSVG, mas a dangerouslyAllowSvg configuração está desativada.

Não encontrado - código HTTP de status 404

A imagem de origem não foi encontrada.

Conteúdo muito grande - código de HTTP status 413

A imagem de origem ou a imagem otimizada ultrapassa o tamanho máximo permitido em bytes.

Noções básicas do armazenamento em cache otimizado de imagens

O Amplify Hosting armazena em cache imagens otimizadas no nosso CDN para que as solicitações subsequentes à mesma imagem, com os mesmos parâmetros de consulta, sejam atendidas a partir do cache. O cache Time to live (TTL) é controlado pelo Cache-Control cabeçalho. A lista a seguir descreve suas opções para especificar o cabeçalho Cache-Control.

  • Usando a chave Cache-Control dentro da regra de roteamento direcionada à otimização de imagem.

  • Usando cabeçalhos personalizados definidos na aplicação Amplify.

  • Para imagens remotas, o cabeçalho Cache-Control retornado pela imagem remota será respeitado.

O minimumCacheTTL especificado nas configurações de otimização de imagem define o limite inferior do Cache-Control max-age diretiva. Por exemplo, se uma imagem remota URL responder com aCache-Control s-max-age=10, mas o valor de minimumCacheTTL for 60, então 60 será usado.