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 inadequadamente 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 um novo conjunto de restrições em imagens que podem ser aplicadas com a aplicação no momento do 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ório, em que as imagens são renderizadas normalmente sem aplicação, enquanto as violações são observadas por 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ê?
Fornecer imagens maiores do que o dispositivo de visualização pode renderizar, por exemplo, fornecer imagens para computadores em contextos móveis ou 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 saber como otimizar suas imagens.
Exemplos
Confira alguns exemplos. O exemplo a seguir mostra o comportamento padrão ao cortar a metade do tamanho de exibição de uma imagem.
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 a todas as origens com um valor de 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 qualquer outro lugar serão renderizados normalmente.
unoptimized-{lossy,lossless}-images
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 W x H, o limite de tamanho do arquivo é calculado como W x H x X + 1024.
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 perdas não podem exceder uma proporção de bytes por pixel de X, com uma margem de 1 KB fixa. Para uma imagem W x H, o limite de tamanho do arquivo é calculado como W x H x X + 1024.
Quando um documento usa uma dessas políticas, qualquer elemento <img>
que viole
a restrição é substituído por uma imagem de marcador de posição.
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 não otimizada com perda 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ê não conhece a 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 de bytes por pixel X) para as origens, especificados entre parênteses (opcional)
Recomendamos uma proporção de byte por pixel de 0,5 ou menor para
unoptimized-lossy-images
e uma proporção de byte por pixel de 1 ou menor para
unoptimized-lossless-images
e unoptimized-lossless-images-strict
.
Os formatos WebP têm taxas de compactação melhores do que outros formatos. Se possível, forneça todas as imagens no formato WebP com perda. Se isso não for suficiente, tente o formato sem perdas WebP. 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 usar limites mais rígidos:
- 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
taxa de bytes por pixel que exceda a restrição não é permitido e será substituído
por uma imagem de marcador de posição.
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>
em contextos de navegação
de nível superior e em contextos de navegação aninhados da mesma origem só serão renderizados
normalmente se a proporção de bytes por pixel atender a essas restrições. Os elementos <img>
em qualquer outro lugar serão renderizados normalmente.
Modo somente relatórios no mundo real
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 estágio e usar o modo somente relatório 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 a ficar animado. Adoraríamos que você testasse as políticas e 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!