Use políticas de imagem otimizadas para garantir que seu site use as imagens com melhor desempenho.
As imagens geralmente ocupam uma quantidade significativa de espaço visual e representam a maioria dos bytes transferidos em um site. A otimização de imagens pode melhorar o desempenho de carregamento e reduzir o tráfego de rede.
Surpreendentemente, mais da metade dos sites na Web estão veiculando imagens comprimidas de forma inadequada ou grandes demais. Isso deixa muito espaço para melhorias de desempenho simplesmente otimizando as imagens.
Você pode estar se perguntando como saber se minhas imagens estão otimizadas e como
otimizá-las. Estamos testando um novo conjunto de políticas de recursos para otimização
de imagens: oversized-images
, unoptimized-lossy-images
,
unoptimized-lossless-images
eunoptimized-lossless-images-strict
.
Todos estão disponíveis para testes de
origem.
Políticas de imagem otimizadas
A política de permissões está introduzindo novas restrições de conjunto em imagens que podem ser aplicadas com a aplicação no tempo de desenvolvimento. As imagens que violarem qualquer uma das restrições serão renderizadas como imagens de marcador de posição, que são fáceis de identificar e corrigir. Essas políticas podem ser especificadas no modo somente relatórios, em que as imagens são renderizadas normalmente sem restrições enquanto as violações são observadas nos relatórios. Consulte Modo somente de relatório no mundo real para mais detalhes.
oversized-images
A política de permissões oversized-images
restringe as dimensões intrínsecas
de uma imagem em relação ao tamanho do contêiner.
Quando um documento usa a política oversized-images
, qualquer elemento <img>
com uma resolução intrínseca mais de X vezes maior que o tamanho do contêiner
em qualquer dimensão é substituído por uma imagem de marcador de posição.
Por quê?
Servir imagens maiores do que o dispositivo de visualização pode renderizar, por exemplo, servindo imagens de computador para contextos móveis ou servindo imagens de alta densidade de pixels para um dispositivo de baixa densidade de pixels, desperdiça o tráfego de rede e a memória do dispositivo. Leia Exibir imagens com dimensões corretas e Exibir imagens responsivas para informações sobre como otimizar suas imagens.
Exemplos
Alguns exemplos ilustram isso. Confira abaixo o comportamento padrão ao cortar o tamanho de exibição de uma imagem pela metade.
Se eu aplicar a política de permissões abaixo, uma imagem de marcador de posição vai aparecer.
Permissions-Policy: oversized-images *(2);
Eu recebo resultados semelhantes se eu diminuir apenas a largura ou a altura.
Como usar
Para resumir, a política oversized-images
pode ser especificada por:
- Cabeçalho HTTP
Permissions-Policy
- Atributo
allow
<iframe>
Para declarar a política oversized-images
, você precisa fornecer:
- O nome do recurso,
oversized-images
(obrigatório) - Uma lista de origens (opcional)
- Os valores de limite (ou seja, a proporção de redução X) para as origens, especificados entre parênteses (opcional).
Recomendamos uma proporção de redução de 2,0 ou menor. Considere usar imagens responsivas com resoluções diferentes para oferecer as melhores imagens em vários tamanhos de tela, resoluções e assim por diante.
Mais exemplos
Permissions-Policy: oversized-images *(2.0)
A política é aplicada em todas as origens com um valor limite de 2,0. Qualquer
elemento <img>
com uma imagem que tenha uma proporção de redução maior que
2,0 não é permitido e será substituído por uma imagem de marcador de posição.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
A política é aplicada na origem do site com um valor de limite de 1,5.
Os elementos <img>
em contextos de navegação de nível superior e contextos de navegação aninhados
da mesma origem só serão renderizados normalmente se a proporção de redução for menor
ou igual a 1,5. Os elementos <img>
em todos os outros lugares serão renderizados normalmente.
imagens-{lossy,lossless} não otimizadas
As políticas de recursos unoptimized-lossy-images
, unoptimized-lossless-images
e
unoptimized-lossless-images-strict
restringem o tamanho
do arquivo de uma imagem em relação à resolução intrínseca:
unoptimized-lossy-images
- Os formatos com perda não podem exceder uma proporção de bytes por pixel de X, com uma margem de overhead fixa de 1 KB. Para uma imagem L x A, o limite de tamanho do arquivo é calculado como L x A x X + 1.024.
unoptimized-lossless-images
- Os formatos sem perdas não podem exceder uma proporção de bytes por pixel de X, com uma margem fixa de 10 KB. Para uma imagem de largura x altura, o limite de tamanho do arquivo é calculado como L x A x X + 10240.
unoptimized-lossless-images-strict
- Os formatos sem perda não devem exceder uma proporção byte por pixel de X, com uma permissão fixa de sobrecarga de 1 KB. Para uma imagem L x A, o limite de tamanho do arquivo é calculado como L x A x X + 1.024.
Quando um documento usar qualquer uma dessas políticas, qualquer elemento <img>
que violar a restrição será substituído por uma imagem de marcador.
Por quê?
Quanto maior o tamanho do download, mais tempo leva para carregar uma imagem. O tamanho do arquivo precisa ser mantido o menor possível ao otimizar uma imagem: removendo metadados, escolhendo um bom formato de imagem, usando a compactação de imagens e assim por diante. Leia Usar o Imagemin para compactar imagens e Usar imagens WebP para informações sobre como otimizar suas imagens.
Exemplo
O exemplo a seguir mostra o comportamento padrão do navegador. Sem a política de permissões, uma imagem com perda não otimizada pode ser exibida da mesma forma que uma imagem otimizada.
Se eu aplicar a política de permissões abaixo, uma imagem de marcador de posição vai aparecer.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Como usar
Se você é iniciante na política de permissões, consulte Introdução à política de permissões para mais detalhes.
Para resumir, as políticas unoptimized-{lossy,lossless}-images
podem ser
especificadas por:
- Cabeçalho HTTP
Permissions-Policy
- Atributo
allow
<iframe>
Para declarar uma política unoptimized-{lossy,lossless}-images
, você precisa
fornecer:
- O nome do recurso, por exemplo,
unoptimized-lossy-images
(obrigatório) - Uma lista de origens (opcional)
- Os valores de limite (ou seja, a proporção X de bytes por pixel) para as origens, especificados entre parênteses (opcional)
Recomendamos uma proporção de byte por pixel de 0,5 ou menos para
unoptimized-lossy-images
e uma proporção de byte por pixel de 1 ou menos para
unoptimized-lossless-images
e unoptimized-lossless-images-strict
.
Os formatos WebP têm taxas de compressão melhores do que outros formatos. Se possível, veicule todas as imagens no formato WebP com perda. Se isso não for suficiente, tente o formato WebP sem perdas. Use JPEG em navegadores que não oferecem suporte a formatos WebP. Use PNG se nenhum dos formatos funcionar.
Se você estiver usando formatos WebP, tente com limites mais rigorosos:
- 0,2 para WEBPV8
- 0,5 para WEBPL
Mais exemplos
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
Essa política é aplicada em todas as origens com um valor de limite de 0,5 (para formatos
com perda) e 1 (para formatos sem perda). Qualquer elemento <img>
com uma imagem que tenha uma
proporção de byte por pixel que exceda a restrição não é permitido e será substituído
por uma imagem de marcador.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
Essa política é aplicada à origem do site com um valor de limite de 0,3 (para
formatos com perda) e 0,8 (para formatos sem perda). Os elementos <img>
nos contextos de navegação
de nível superior e em contextos de navegação aninhados de mesma origem só serão renderizados
normalmente se a proporção byte por pixel atender a essas restrições. Os elementos <img>
em todos os outros lugares serão renderizados normalmente.
Modo somente relatórios em uso
Talvez não seja o que você quer. É possível usar
as políticas no modo de aplicação (com imagens não otimizadas renderizadas como
imagens de marcador de posição) durante o desenvolvimento e o ambiente de pré-produção e usar o modo somente para relatórios na
produção. Confira mais detalhes em Relatórios da
política de permissões. Semelhante ao cabeçalho HTTP Permissions-Policy
, o
cabeçalho Permissions-Policy-Report-Only
permite observar relatórios de violação no
mundo real sem nenhuma aplicação.
Limitações
As políticas de imagem só funcionam em elementos de imagem HTML (<img>
, <source>
etc.) e ainda não são compatíveis com imagens de plano de fundo ou conteúdo gerado. Se você
quiser que as políticas sejam aplicadas a conteúdos mais amplos, entre em contato.
Como otimizar suas imagens
Falei bastante sobre como otimizar suas imagens, mas não disse como fazer isso. Esse tópico está fora do escopo deste artigo, mas você pode aprender mais nos links abaixo e nos codelabs listados no final do artigo.
Envie seu feedback
Esperamos que este artigo tenha ajudado você a entender melhor as políticas de imagens e tenha deixado você animado. Adoraríamos que você testasse as políticas e nos enviasse seu feedback.
Você pode enviar feedback sobre cada um dos recursos mencionados neste artigo para nossa lista de e-mails: feature-control@chromium.org.
Gostaríamos de saber quais valores de limite você usou e achou úteis. Gostaríamos
de saber se unoptimized-lossless-images
ou
unoptimized-lossless-images-strict
é mais intuitivo e fácil de usar ou se
devemos usar uma margem de diferença. Vamos enviar uma
pesquisa perto do fim do período de teste. Não perca!