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 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.

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 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.

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ê 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!