Redimensione Imagens Corretamente

Meça a maior largura em que a imagem é renderizada, duplique-a para telas de alta densidade e redimensione sua biblioteca para esse número. Servir uma fotografia de 4000 pixels em um espaço de 800 pixels significa que o navegador baixa cerca de 25 vezes mais dados de pixel do que pode exibir, descartando o restante.

Em uma conexão móvel, o visitante paga por tudo isso, em tempo e em dados. Redimensionar imagens corretamente costuma ser a maior redução individual de peso de página disponível para um site, e exige apenas um lote em vez de uma reformulação visual.

Por que imagens superdimensionadas custam tão caro

O tamanho do arquivo escala com a contagem de pixels, portanto, reduzir a largura e a altura pela metade remove cerca de 75 por cento dos dados. A relação é quadrática em vez de linear, e é por isso que o desperdício cresce rapidamente.

A primeira linha é o caso comum em sites onde os editores fazem o upload diretamente de uma câmera. O navegador baixa 4.2 MB, redimensiona para menos e exibe o equivalente a um arquivo de 180 KB.

Como medir o tamanho real de exibição

Clique com o botão direito na imagem em sua página ativa, escolha Inspecionar e leia as dimensões exibidas em vez das intrínsecas. Os navegadores informam ambos os números, e a diferença entre eles é o desperdício.

Verifique o caso mais amplo em vez do típico. Uma imagem dentro de uma coluna de artigo pode ser renderizada em 700 pixels no desktop e 380 em um celular, portanto, 700 é o número que importa. Teste na janela de navegador mais larga que seus visitantes realisticamente usam, já que um banner de largura total cresce com a tela e precisa de um cálculo diferente.

A regra da duplicação para telas de alta densidade

Multiplique a largura de exibição por 2 e pare por aí, pois telas além dessa densidade não mostram nenhuma melhoria adicional que alguém perceba. Uma imagem exibida em 700 pixels deve ser exportada em 1400.

Triplicar é sugerido ocasionalmente e raramente justificado. A diferença entre 2 e 3 vezes a densidade é imperceptível a uma distância normal de visualização, enquanto o arquivo cresce mais da metade. Comprimir mais em 2 vezes a densidade produz um resultado melhor do que comprimir levemente em 3 vezes, porque os pixels extras ocultam a compressão.

Larguras de exibição comuns para redimensionamento

• Imagem do corpo do artigo: exibe cerca de 700 px, exporte em 1400 px.
• Hero de largura total: exibe até 1920 px, exporte em 1920 px e comprima mais.
• Destaque de meia largura: exibe cerca de 600 px, exporte em 1200 px.
• Miniatura de grade de produtos: exibe cerca de 300 px, exporte em 600 px.
• Foto de autor ou perfil: exibe cerca de 80 px, exporte em 160 px.
• Logo em um cabeçalho: exibe cerca de 180 px, exporte em 360 px ou use gráficos vetoriais.

Por que imagens de largura total são a exceção

Um banner de largura total não tem tamanho de exibição fixo, portanto, limite-o a 1920 pixels e comprima-o mais em vez de duplicar. Duplicar uma imagem de largura total para 3840 pixels produz um arquivo que nenhuma página pode justificar.

Banners geralmente são vistos à distância e possuem menos detalhes finos do que uma fotografia de produto, o que significa que uma compressão agressiva é menos perceptível neles. Um banner de 1920 pixels com qualidade 70 em WebP normalmente fica abaixo de 200 KB e parece correto em todas as telas, enquanto a versão de 3840 pixels não oferece nenhum benefício visível com 4 vezes o peso.

Como corrigir uma biblioteca inteira

Para redimensionar um site existente corretamente, siga estas 6 etapas.

1. Liste os espaços de imagem em seu design, que geralmente são de 4 a 6 tamanhos distintos em vez de dezenas.
2. Meça a largura de exibição de cada espaço usando o inspetor do navegador em uma página ativa.
3. Duplique cada largura para obter o tamanho de exportação.
4. Organize a biblioteca em pastas por espaço, já que um lote aplica um único tamanho a todos os arquivos contidos nele.
5. Redimensione cada pasta para sua largura de destino, depois comprima e converta na mesma etapa.
6. Substitua os arquivos mantendo os mesmos nomes para que as páginas existentes continuem funcionando.

Organizar em pastas é a etapa que transforma isso em um trabalho em lote. A maioria dos sites usa muito menos tamanhos de imagem distintos do que imagina, e o agrupamento por espaço elimina a necessidade de tratar os arquivos individualmente.

Imagens responsivas e o atributo srcset

Use srcset para oferecer vários tamanhos e deixar o navegador escolher o correto para cada dispositivo. Um celular então baixa um arquivo de 400 pixels enquanto um desktop baixa um arquivo de 1400 pixels a partir do mesmo código.

Gere 3 larguras por imagem, comumente 400, 800 e 1600 pixels, e liste-as com suas respectivas larguras em pixels para que o navegador possa escolher. A maioria dos sistemas de conteúdo produz isso automaticamente no upload, então verifique o que sua plataforma já faz. Onde isso ocorre, enviar um original com o tamanho correto ainda melhora cada variante gerada.

Redimensione antes de comprimir, sempre

Redimensionar primeiro significa que a compressão tem menos trabalho a fazer, de modo que a qualidade pode permanecer alta enquanto o arquivo continua pequeno. Comprimir primeiro e redimensionar depois descarta detalhes que você acabará jogando fora novamente.

A ordem também afeta a aparência do resultado. Uma imagem comprimida em tamanho real carrega artefatos que se tornam mais visíveis quando a imagem é reduzida, já que os artefatos escalam junto com ela. Redimensionar primeiro produz uma fonte mais limpa para o codificador e um resultado visivelmente melhor com o mesmo tamanho de arquivo.

O que isso faz com a velocidade da página

Redimensionar imagens corretamente normalmente remove de 60 a 90 por cento do peso das imagens em um site que nunca fez isso. A melhoria é maior do que qualquer mudança de formato e geralmente maior do que todas as outras otimizações combinadas.

O efeito se concentra nos visitantes móveis, onde as conexões são mais lentas e os dados custam dinheiro. A métrica Largest Contentful Paint melhora diretamente, pois essa medição normalmente é decidida por uma única imagem grande. Resolver a auditoria de redimensionamento correto de imagens no Lighthouse frequentemente elimina 2 ou 3 avisos relacionados ao mesmo tempo.

Nunca amplie uma imagem para caber

Ampliar adiciona pixels que a câmera nunca capturou, resultando em uma imagem sem nitidez e em um arquivo maior sem nenhum benefício. Reduzir o tamanho é sempre seguro, enquanto ampliar é a única operação que comprovadamente piora a qualidade.

Quando uma imagem de origem é menor do que o espaço que deve preencher, as opções honestas são usá-la em seu tamanho natural, ajustar o layout ao redor dela ou substituir a imagem. Ampliar uma fotografia de 600 pixels para 1600 pixels produz um arquivo borrado com 4 vezes o peso do original, falhando em qualidade e velocidade ao mesmo tempo.

Verificando uma página em busca de imagens superdimensionadas

Abra as ferramentas de desenvolvedor, mude para a aba Rede, filtre por imagens e recarregue a página. A lista mostra cada imagem com seu tamanho transferido, ordenada pelas maiores primeiro.

Qualquer imagem individual acima de 500 KB merece investigação, e qualquer página onde as imagens somam mais de 2 MB tem um problema. Passe o mouse sobre uma imagem no painel Elementos para ver seus tamanhos intrínseco e exibido lado a lado. Uma grande diferença entre os 2 números é a definição de uma imagem mal redimensionada, e isso é visível em segundos.

Redimensionando uma biblioteca em um único lote

Defina a largura de destino uma vez e aplique-a a todos os arquivos de uma pasta, em vez de redimensionar as imagens individualmente. Uma biblioteca de centenas de imagens é redimensionada em minutos quando o trabalho é feito em lote.

Insira até 500 arquivos de uma vez, ou arraste um arquivo ZIP diretamente, e defina a largura, o formato e a meta de compressão para todo o conjunto. Tudo roda dentro do seu navegador no seu próprio processador, de modo que sites de clientes, arquivos de homologação e galerias não publicadas nunca chegam a um servidor. Nada é enviado para a nuvem, o que significa que o redimensionamento de uma biblioteca inteira acontece sem que um único arquivo cruze a rede.