Como preparar imagens sem deixar o site lento

Em resumo

A imagem deve ser entregue no tamanho em que será exibida, em um formato moderno e com as dimensões declaradas na marcação. Como referência, mantenha a imagem principal em até 200 KB e as demais em até 100 KB. O limite de um bom carregamento é 2,5 segundos até aparecer o maior elemento da página.

Uma imagem pesada não prejudica uma “velocidade” abstrata, mas um segundo específico: aquele em que o visitante vê a imagem principal. Em geral, ela também é o maior elemento e, portanto, define se a página ficará dentro do limite.

Por que as imagens definem a velocidade da página?

Porque quase sempre são os elementos mais pesados e mais visíveis. O resumo do Core Web Vitals apresenta três métricas; as imagens afetam diretamente duas delas:

• LCP — tempo até a renderização do maior elemento. Um resultado de até 2,5 segundos é considerado bom;
• CLS — deslocamento cumulativo de layout. 0,1 ou menos é considerado bom.

Os dois limites são medidos no 75º percentil dos carregamentos. Ou seja, três quartos das visitas precisam ficar dentro da meta, inclusive em um celular lento, não apenas no seu notebook.

Quanto uma imagem pode pesar?

Calcule com base na conexão, não na intuição. Uma velocidade de 5 Mbit/s equivale a 5 000 000 ÷ 8 = 625 000 bytes por segundo, cerca de 610 KB/s. Portanto, uma imagem de 1 MB leva aproximadamente 1,7 segundo para chegar ao leitor — sem contar o estabelecimento da conexão nem a concorrência dos outros arquivos da página.

Daí vem um orçamento fácil de conferir com aritmética.

Função na página	Peso de referência
Imagem principal da primeira tela	até 200 KB
Ilustração no texto	até 100 KB
Prévia na grade do catálogo	até 40 KB
Ícone ou avatar	até 10 KB

Vale lembrar de onde vêm os megabytes. Um quadro 1920 × 1080 sem compressão, com três bytes por pixel, ocupa 1920 × 1080 × 3 = 6,2 MB. Tudo abaixo disso é mérito da compressão, e a diferença entre 6 MB e 150 KB depende inteiramente de como o arquivo foi salvo. A escolha é explicada no artigo sobre JPEG, PNG, WebP e AVIF.

Em quais dimensões o arquivo deve ser entregue?

Exatamente nas dimensões de exibição multiplicadas pela densidade da tela — e nada além disso. Um arquivo de 4000 pixels em um espaço de 400 CSS pixels de largura não parece melhor: o navegador terá de reduzi-lo, gastando tráfego e memória.

Na prática, o limite útil é a densidade 2×. A diferença entre 2× e 3× quase não é visível, enquanto a área, e com ela o peso, aumenta 2,25 vezes. O cálculo da largura e da densidade está detalhado no artigo sobre tamanho, resolução e DPI.

Um mesmo espaço normalmente precisa de vários arquivos: o celular e um monitor grande exibem a mesma imagem em larguras muito diferentes. Para isso existem srcset e sizes: o navegador escolhe o arquivo adequado conhecendo a largura do espaço e a densidade da tela.

Como preparar uma imagem para o site?

1. Recorte na proporção necessária

   Os pixels que não aparecerão no enquadramento da página também não devem estar no arquivo.

2. Reduza para a largura do espaço multiplicada por 2

   Faça uma única redução a partir do original, não uma sequência de tamanhos intermediários.

3. Salve em um formato moderno

   Use WebP ou AVIF com fallback em JPEG. Preserve transparência somente quando necessária.

4. Crie um segundo e um terceiro tamanho

   Por exemplo, arquivos com 400, 800 e 1600 pixels de largura, listados em srcset.

5. Declare as dimensões na marcação

   Use os atributos width e height ou aspect-ratio nos estilos para que o navegador reserve espaço antes do carregamento.

6. Defina prioridades

   Use fetchpriority="high" na imagem principal e loading="lazy" em tudo que estiver abaixo da primeira tela.

7. Teste em uma conexão lenta

   Ative a limitação de velocidade nas ferramentas de desenvolvimento e veja o que o visitante enxerga nos primeiros dois segundos.

Quantos tamanhos manter no srcset?

Três ou quatro níveis costumam bastar. Um intervalo de aproximadamente uma vez e meia entre tamanhos vizinhos faz sentido: 400, 600, 900, 1400 pixels. Uma escada mais detalhada quase não economiza tráfego — o peso cresce com a área, e a diferença entre 800 e 900 pixels corresponde a cerca de 25% dos bytes — mas multiplica o trabalho de preparar e armazenar arquivos.

Escolha os níveis a partir do layout, não de números redondos. Verifique a largura do espaço no celular, tablet e monitor largo, use esses três valores e duplique cada um para telas densas. O atributo sizes é indispensável: sem ele, o navegador supõe que a imagem ocupa toda a janela e baixa no celular um arquivo maior do que o necessário.

Como descobrir o que está deixando a página lenta?

Medindo, não adivinhando. Abra a aba de rede nas ferramentas de desenvolvimento, ordene as solicitações por tamanho e observe as cinco primeiras linhas — na grande maioria dos casos, são imagens. Depois limite a velocidade e recarregue a página: ficará claro qual arquivo atrasa a exibição da primeira tela.

Compare também as dimensões recebidas com as dimensões de exibição. O navegador mostra os dois valores na dica do elemento. Se o arquivo tiver mais que o dobro da largura do espaço, você encontrou o peso excedente.

Como evitar saltos no layout?

Declare as dimensões. Enquanto não conhece a proporção da imagem, o navegador reserva altura zero. Quando ela carrega, a página se expande e o texto desce justamente quando começa a ser lido. Esse é o deslocamento de layout contado no CLS.

Uma linha resolve: os atributos width e height na tag img, com as proporções reais do arquivo. Navegadores modernos deduzem deles a proporção e preservam o espaço mesmo que a largura no CSS esteja em porcentagem.

O que fazem o cache e a CDN?

O cache resolve o segundo carregamento e todos os seguintes: o navegador não solicita de novo um arquivo que pode guardar. Isso é seguro para imagens quando o endereço muda com o conteúdo, por exemplo, se o nome inclui uma impressão digital do arquivo. Assim, é possível definir um prazo longo sem exibir uma versão antiga.

A CDN resolve a distância: o arquivo é entregue por um servidor mais próximo do leitor. Para um público em vários países, isso muitas vezes ajuda mais do que economizar outros vinte kilobytes.

O que acontece com compressão excessiva?

A compressão com perdas trabalha em blocos. Quando a qualidade fica baixa demais, aparecem três defeitos conhecidos: quadrados de 8 × 8 pixels em áreas uniformes, halos ao longo de contornos fortes e faixas no lugar de um gradiente suave. O céu e os fundos de estúdio sofrem primeiro.

Esses defeitos são irreversíveis e cumulativos. Cada novo salvamento de um arquivo já comprimido acrescenta artefatos sobre os anteriores; por isso, toda edição deve partir do original.

O que isso significa para imagens de banco?

Uma obra do banco vem em tamanho grande, o que é correto para o original e incorreto para a página. Ao prepará-la para publicação, siga o processo normal: recorte, redução, formato moderno e dimensões na marcação. Na vitrine da Picwin, a prévia é um quadrado de 1024 pixels de lado e aparece ainda menor na grade do catálogo.

Tecnologia

Cenas com interfaces, dispositivos e dados são protagonistas frequentes de páginas leves.

Ver os trabalhosNegócios

Cenas de negócios para landing pages em que a imagem principal define o primeiro segundo.

Ver os trabalhos

Pontos principais

• O limite de um bom carregamento é 2,5 segundos até o maior elemento, no 75º percentil.
• O peso vem da conexão: 1 MB a 5 Mbit/s leva cerca de 1,7 segundo.
• A largura do arquivo é a largura do espaço multiplicada por 2, sem um pixel a mais.
• Dimensões declaradas eliminam os saltos de layout sem custo.
• O carregamento lazy serve para tudo, exceto a imagem principal.

Quanto pesa uma boa imagem para site?

A imagem principal deve ter até 200 KB, uma ilustração no texto até 100 KB e uma prévia na grade até 40 KB. São referências derivadas da velocidade da conexão, não regras rígidas.

Quanto devem pesar todas as imagens da página?

O suficiente para que a imagem principal apareça em 2,5 segundos. Todo o restante pode e deve ser adiado com carregamento lazy.

O WebP ajuda quando a imagem já é pequena?

Sim, mas o ganho será em kilobytes, não em segundos. Comece pelas dimensões: um arquivo duas vezes mais largo que o espaço desperdiça muito mais que um formato inadequado.

É preciso comprimir ícones PNG?

Quase sempre é melhor entregar ícones em vetor. Se precisar de raster, reduza a paleta: um PNG de 64 cores pesa várias vezes menos que um em cores completas.

O que importa mais: tamanho ou quantidade de arquivos?

Hoje, o tamanho. Conexões modernas suportam dezenas de solicitações paralelas, mas nada acelera megabytes desnecessários.

Por que a página é rápida para mim e lenta para os visitantes?

Você tem uma boa conexão e tudo está no cache. Observe o 75º percentil e ative a limitação de rede nas ferramentas de desenvolvimento.

Como verificar se houve melhora?

Meça o tempo até o maior elemento antes e depois das alterações, com a mesma limitação de velocidade. Impressões sem medição quase sempre enganam.

Continue com tamanho e resolução, escolha do formato e preparação para impressão — os mesmos pixels seguem outras regras nesses casos. Veja obras prontas no catálogo.