Políticas de imagem para carregamento rápido e muito mais

Use políticas de imagem otimizadas para garantir que seu site use as imagens com melhor desempenho.

Luna Lu
Luna Lu

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.

O comportamento de redimensionamento padrão.
O comportamento padrão de redimensionamento.

Se eu aplicar a política de permissões abaixo, uma imagem de marcador de posição vai aparecer.

Permissions-Policy: oversized-images *(2);

Quando a imagem é muito grande para o contêiner.
Quando a imagem é muito grande para o contêiner.

Eu recebo resultados semelhantes se eu diminuir apenas a largura ou a altura.

Largura redimensionada Altura redimensionada
Redimensione a largura e 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.

Comparação de uma imagem otimizada com uma não otimizada.
Comparação de uma imagem otimizada com uma não 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);

Quando a imagem não está otimizada.
Quando a imagem não está otimizada.

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!