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. |
|
width |
Número |
Sim |
A largura da imagem otimizada em pixels. |
|
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. |
|
fit |
Valores de enumeração: |
Não |
Como a imagem é redimensionada para se ajustar à largura e à altura especificadas. |
|
position |
Valores de enumeração: |
Não |
Uma posição a ser usada quando o ajuste for |
|
trim |
Número |
Não |
Apara pixels de todas as bordas que contenham valores semelhantes à cor de fundo especificada do pixel superior esquerdo. |
|
estender |
Objeto |
Não |
Adiciona pixels às bordas da imagem usando a cor derivada dos pixels da borda mais próxima. O formato é |
|
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. |
|
format |
String |
Não |
O formato de saída desejado para a imagem otimizada. |
|
quality |
Número |
Não |
A qualidade da imagem, de 1 a 100. Usado somente ao converter o formato da imagem. |
|
rotate |
Número |
Não |
Gira a imagem de acordo com o ângulo especificado em número de graus. |
|
flip |
Booleano |
Não |
Espelha a imagem verticalmente (de cima para baixo) no eixo x. Isso sempre ocorre antes da rotação, se houver. |
|
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. |
|
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. |
|
mediano |
Número |
Não |
Aplica um filtro mediano. Isso remove o ruído ou suaviza as bordas de uma imagem. |
|
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. |
|
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. |
|
negate |
Booleano |
Não |
Inverte as cores da imagem. |
|
normalize |
Booleano |
Não |
Melhora o contraste da imagem ampliando sua iluminação para englobar uma faixa dinâmica completa. |
|
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. |
|
tint |
String |
Não |
Tinge a imagem usando o fornecido, RGB preservando a luminosidade da imagem. |
|
grayscale |
Booleano |
Não |
Transforma a imagem em tons de cinza (preto e branco). |
|
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.
Armazenamento em cache
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.