Uma imagem grande comprimida ainda é grande
Um espaço pequeno não diminui o arquivo baixado. Se todo visitante recebe a mesma foto inteira, um celular ainda pode baixar pixels que o layout não usa. Compressão e seleção responsiva resolvem partes diferentes do problema.
O fluxo para sites explica a preparação; o guia de entrega de imagens a relaciona aos diagnósticos de desempenho. Aqui acompanhamos uma foto até a escolha real do navegador, sem tratar uma pontuação como resultado.
Prepare as opções e observe o navegador
Criamos cópias proporcionais em um editor externo antes da compressão; o Bitinz não as redimensionou. Em 2026-10-29 cada cópia foi processada no motor local em Equilibrado. Dimensões, bytes e resumo identificam a opção usada no navegador.
A página local oferecia opções por srcset com uma regra sizes correspondente. As observações registram largura da janela, densidade e recurso escolhido. Medem os dados da imagem, não o carregamento completo nem uma rede móvel simulada. A política editorial descreve as evidências.
Os arquivos preparados por trás da escolha
Compare os tamanhos aqui e depois o registro do navegador indicado nas fontes. Ele só pode escolher arquivos que a página realmente oferece.
| Imagem | Pixels | Saída | Nível | Antes | Depois | Economia |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Equilibrado | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Equilibrado | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Equilibrado | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Equilibrado | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB corresponde a 1000 bytes.
O que o navegador realmente baixou
| Janela (CSS px) | Densidade de pixels | Largura exibida (CSS px) | Largura escolhida (px) | Dados da imagem |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Cada linha usou um contexto novo do navegador com cache desativado. O caso mais largo e de alta densidade escolheu a maior opção porque havia uma grande lacuna entre os tamanhos oferecidos. Vale testar uma opção intermediária; o navegador só pode escolher arquivos presentes na lista.
Inspecione a imagem escolhida na escala útil
Detalhe da foto original
Detalhe da foto comprimida
Observe a foto em uma tela pequena e em outra de alta densidade. A menor opção não é a melhor se ficar visivelmente desfocada. Uma opção grande também não se justifica só por ter uma compressão impressionante.
O registro é um retrato do ambiente declarado. Cache e decisões do navegador podem afetar visitas futuras. Para repetir, use um contexto novo e inspecione a imagem solicitada em vez de deduzi-la das dimensões visíveis.
Conecte preparação e entrega
Use o compressor de imagens nas cópias preparadas e deixe o site ou CMS oferecer versões apropriadas. Se o código gerado aponta todas as telas para um arquivo grande, comprimir não altera essa escolha.
Mantenha sizes coerente com o layout CSS. O navegador combina essa indicação com as opções disponíveis e a densidade da tela; não adivinha sua intenção pelo nome do arquivo. Confira o recurso escolhido após mudar o layout.
Em um fluxo repetido, a API para desenvolvedores pode comprimir os arquivos preparados durante a publicação. Redimensionar continua sendo uma etapa de preparação separada. Nosso guia de qualidade explica como comparar detalhes antes de substituir uma imagem.
Confira um espaço de imagem na página
- Meça o espaço e escolha as larguras proporcionais necessárias.
- Prepare e comprima as cópias, mantendo o original editável.
- Ofereça opções com uma regra
sizesque corresponda ao layout. - Confira o recurso escolhido e a foto visível em telas diferentes.
Perguntas frequentes
- Diminuir a largura exibida reduz o download?
- A largura CSS muda o layout, não os bytes de um arquivo. Ofereça opções adequadas e confira qual o navegador escolhe.
- Por que um celular de alta densidade escolhe uma imagem mais larga?
- Uma tela de alta densidade pode usar mais pixels no mesmo espaço visível. Tanto as dimensões das opções quanto a indicação da página influenciam a escolha.
- Este experimento mede a velocidade da página?
- Ele registra a compressão e a seleção de imagens. A experiência de carregamento completa também depende dos outros recursos, da rede e da renderização.