Use políticas de imagem otimizada para garantir que seu site use as imagens com melhor desempenho.
As imagens geralmente ocupam uma quantidade significativa de espaço visual e compõem a maior parte 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 exibe imagens mal compactadas ou desnecessariamente grandes. Isso deixa muito espaço para melhorias de desempenho simplesmente otimizando as imagens.
Você pode se perguntar: como saber se minhas imagens estão otimizadas e como devo 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 e unoptimized-lossless-images-strict.
Todas estão disponíveis para testes
de origem.
Políticas de imagem otimizada
A política de permissões está introduzindo um novo conjunto de restrições em imagens que podem ser aplicadas durante o desenvolvimento. As imagens que violarem qualquer uma das restrições serão renderizadas como imagens de marcador, 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 restrição enquanto as violações são observadas nos relatórios. Consulte a seção Modo somente relatório abaixo para mais detalhes.
imagens muito grandes
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 usar a política oversized-images, qualquer elemento <img>
com resolução intrínseca maior que X vezes maior que o tamanho do contêiner
em qualquer uma das dimensões será substituído por uma imagem de marcador.
Por quê?
Exibir imagens maiores do que o dispositivo de visualização pode renderizar (por exemplo, veicular imagens de computadores em contextos de dispositivos móveis ou exibir imagens de alta densidade de pixels para um dispositivo com baixa densidade de pixels) está desperdiçando tráfego de rede e memória do dispositivo. Leia Exibir imagens com dimensões corretas e Exibir imagens responsivas para mais informações sobre como otimizar suas imagens.
Exemplos
Alguns exemplos ilustram isso. Confira a seguir 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 a seguir, receberei uma imagem de marcador.
Permissions-Policy: oversized-images *(2);
Obtenho resultados semelhantes se eu diminuir apenas a largura ou a altura.
Como usar
Para resumir, a política oversized-images pode ser especificada das seguintes formas:
- Cabeçalho HTTP
Permissions-Policy <iframe>atributoallow
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 limite (ou seja, a proporção de redução X) para as origens, especificados em parênteses (opcional)
Recomendamos uma proporção de redução de 2,0 ou menor. Considere o uso de imagens responsivas com diferentes resoluções para veicular melhor 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 cuja proporção de redução seja maior que
2,0 não é permitido e será substituído por uma imagem de marcador.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
A política é aplicada na origem do site com um valor limite de 1,5.
Os elementos <img> em contextos de navegação de nível superior e contextos de navegação
aninhados de mesma origem só serão renderizados normalmente se a proporção de redução for menor
ou igual a 1,5. Elementos <img> em todos os outros lugares vão ser renderizados normalmente.
imagens não otimizadas: {com perdas,sem perdas}
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 byte por pixel de X, com uma margem de sobrecarga fixa de 1 KB. Para uma imagem L x A, o limite de tamanho de arquivo é calculado da seguinte forma: L x A x X + 1.024.
unoptimized-lossless-images- Os formatos sem perda não podem exceder uma proporção de byte por pixel de X, com uma margem de sobrecarga fixa de 10 KB. Para uma imagem L x A, o limite de tamanho de arquivo é calculado da seguinte forma: L x A x X + 10.240.
unoptimized-lossless-images-strict- Os formatos sem perda não podem exceder uma proporção de byte por pixel de X, com uma margem de sobrecarga fixa de 1 KB. Para uma imagem L x A, o limite de tamanho de arquivo é calculado da seguinte forma: 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 for o tamanho do download, mais tempo levará para uma imagem carregar. O tamanho do arquivo precisa ser o menor possível ao otimizar uma imagem: remoção de metadados, escolha de um bom formato de imagem, uso de compactação de imagens e assim por diante. Leia Usar imagemin para compactar imagens e Usar imagens WebP para saber mais sobre como otimizar suas imagens.
Exemplo
Confira a seguir 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 a seguir, receberei uma imagem de marcador.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Como usar
Se você não conhece a política de permissões, confira Introdução à política de permissões para mais detalhes.
Para resumir, as políticas unoptimized-{lossy,lossless}-images podem ser especificadas das seguintes maneiras:
- Cabeçalho HTTP
Permissions-Policy <iframe>atributoallow
Para declarar uma política unoptimized-{lossy,lossless}-images, será necessário fornecer:
- O nome do recurso, por exemplo,
unoptimized-lossy-images(obrigatório) - Uma lista de origens (opcional)
- Os valores limite (ou seja, proporção X de bytes por pixel) para as origens, especificados entre parênteses (opcional)
Recomendamos uma proporção de bytes por pixel de 0,5 ou menor para
unoptimized-lossy-images e uma proporção de bytes por pixel de 1 ou menos para
unoptimized-lossless-images e unoptimized-lossless-images-strict.
Os formatos WebP têm taxas de compactação melhores do que outros formatos. Exiba todas as suas imagens no formato WebP com perda, se possível. 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);
Esta política é aplicada em todas as origens com um valor limite de 0,5 (para formatos
com perdas) e 1 (para formatos sem perdas). Qualquer elemento <img> com uma imagem que tenha uma
proporção de bytes 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);
Esta política é aplicada na origem do site com um valor limite de 0,3 (para
formatos com perda) e 0,8 (para formatos sem perdas). Os elementos <img> em contextos de navegação
de nível superior e contextos de navegação aninhados de mesma origem só serão renderizados
normalmente se a proporção de bytes por pixel atender a essas restrições. Os elementos <img>
em todos os outros lugares serão renderizados normalmente.
Modo somente relatório em modo geral
Publicar um site com imagens de marcador de posição pode não ser o que você quer. Você pode usar
as políticas no modo de aplicação (com imagens não otimizadas renderizadas como
imagens de marcador) durante o desenvolvimento e o preparo e usar o modo somente relatório na
produção. Confira Relatórios de política de permissões para mais detalhes. Assim como o cabeçalho HTTP Permissions-Policy, o
cabeçalho Permissions-Policy-Report-Only permite observar relatórios de violação
sem restrições.
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 o conteúdo seja compatível com nossas políticas, informe-nos.
Otimizar imagens
Falei bastante sobre como otimizar imagens, mas não disse como fazer isso. Esse tópico está fora do escopo deste artigo, mas você pode saber 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 animado. Adoraríamos que você experimentasse as políticas e nos enviasse feedback.
Envie feedback sobre cada um dos recursos mencionados neste artigo na nossa lista de e-mails: feature-control@chromium.org.
Gostaríamos de saber quais valores de limite você usou e achou úteis. Adoraríamos saber se o unoptimized-lossless-images ou o unoptimized-lossless-images-strict são mais intuitivos e fáceis de usar, ou se precisamos usar uma margem de sobrecarga de diferença. Vamos enviar uma pesquisa
perto do final do teste. Não perca as novidades!