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](ssr-deployment-specification.md).
## Compreensão da API de otimização de imagem
É possível invocar a otimização de imagem em runtime por meio do URL de domínio da aplicação 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 pode otimizar os formatos GIF, APNG e SVG nem convertê-los para outro formato.
+ As imagens SVG não são exibidas a menos que a configuração `dangerouslyAllowSVG` esteja habilitada.
+ 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.
+ HTTPS é o único protocolo compatível com o fornecimento de imagens com controle remoto URLs.
### Cabeçalhos HTTP
O cabeçalho de solicitação HTTP **Accept** é usado para especificar os formatos de imagem, expressos como tipos MIME, permitidos pelo cliente (em geral, 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.
### Parâmetros de solicitação de URI
A tabela a seguir descreve os parâmetros de solicitação de URI para otimização de imagem.
| Parâmetro de consulta | Tipo | Obrigatório | Description | Exemplo |
| --- | --- | --- | --- | --- |
| url | String | Sim | Um caminho relativo ou URL absoluto para a imagem de origem. Para um URL remoto, há suporte para o protocolo HTTPS. O valor deve estar codificado no URL. | `?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 é \$1left\$1\$1\$1top\$1\$1\$1width\$1\$1\$1right\$1, com cada valor indicando o número de pixels a serem recortados. | `?extract=10_0_5_0` |
| formato | 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 RGB fornecido enquanto preserva a iluminação 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.
**Success - HTTP status code 200**
A solicitação foi atendida com sucesso.
**BadRequest - Código de status HTTP 400**
+ Um parâmetro de consulta de entrada foi especificado incorretamente.
+ O URL remoto não está listado como permitido na configuração `remotePatterns`.
+ O URL remoto não é resolvido para uma imagem.
+ A largura ou altura solicitadas não estão listadas como permitidas na configuração `sizes`.
+ A imagem solicitada é SVG, mas a configuração `dangerouslyAllowSvg` está desabilitada.
**Not Found - HTTP status code 404**
A imagem de origem não foi encontrada.
**Content too large - HTTP status code 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 em nossa CDN para que solicitações subsequentes à mesma imagem, com os mesmos parâmetros de consulta, sejam atendidas diretamente do cache. O tempo de vida útil (TTL) do cache é controlado pelo cabeçalho `Cache-Control`. 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 da diretiva Cache-Control max-age. Por exemplo, se o URL de uma imagem remota responder com um `Cache-Control s-max-age=10`, mas o valor `minimumCacheTTL` for 60, o sistema usará 60.