Você está aqui:
Imagens responsivas e formatos de imagem modernos (AVIF e WebP)
Carregue AVIF e WebP para tamanhos de arquivo menores com navegadores modernos e use JPEG (ou PNG para sem perdas ou transparência) como alternativa. Os formatos de saída, a qualidade e as regras URLUtils e MediaFile para DIS estão no tópico Dynamic Imaging Service.
A tabela Transformações com suporte tem o formato, a extensão e os detalhes de qualidade completos. Este tópico descreve quando usar cada formato na marcação e como a imagem HTML e os elementos de origem podem fazer referência a URLs DIS.
Quando usar cada formato
| Formato | Uso típico | Observações |
|---|---|---|
| AVIF | Fotografia de produto de alta compressão quando o navegador a suporta | Muitas vezes o menor; O suporte depende do navegador e da versão do comprador. |
| WebP | Tamanho equilibrado e suporte para clientes modernos | Suporte mais amplo que o AVIF; ainda não é universal em clientes muito antigos. |
| JPEG / PNG | Padrão, img fallbacks ou transparência por meio de PNG |
Alinhe a extensão de arquivo na URL com o formato que você precisa. |
Realce progressivo com imagem
Ofereça AVIF ou WebP primeiro e, em seguida, uma imagem de linha de base. As URLs DIS exatas (extensões e valores sfrm ) devem seguir a tabela Transformações suportadas e suas chamadas URLUtils ou MediaFile. Exemplo de padrão (Internet Store Markup Language (ISML)-agnóstico):
<picture><
source srcset="<your AVIF DIS URL>" type="image/avif" /><
source srcset="<your WebP DIS URL>" type="image/webp" /<
>img src="<your JPEG DIS URL>" alt="..." />
</picture >Na prática, você gera cada URL em script a partir do mesmo viewType ou caminho com formato /extensão de arquivo e transforma objetos para seu site, ao invés de codificar sw= strings em seu HTML.
Desempenho e higiene do cache
- Mantenha os parâmetros de transformação estáveis e minimizados: tamanhos lógicos e parâmetros idênticos mapeiam para uma única chave de cache, o que pode melhorar as taxas de acertos no CDN. Consulte Diretrizes de imagem e cache dinâmico de imagens no Dynamic Imaging Service .
- Omita
q=80quando 80 já é o padrão em seu uso, para evitar umqdesnecessário na string quando a documentação já indica o padrão. - Monitorar o peso da imagem e as taxas de 4xx; Os picos geralmente se correlacionam com um valor
oimginválido, paressw=/sh=inválidos ou um URL de sobreposição que não écodificado por URL. Consulte Resolução de problemas e migração .
