Otimização de imagem

A otimização de imagem reduz os bytes necessários para entregar uma imagem, mantendo a qualidade que o caso de uso exige. Ela combina várias etapas: escolher um formato adequado, redimensionar para o tamanho exibido, comprimir, remover metadados desnecessários e carregar imagens somente quando necessário.

Na web, a otimização também abrange a entrega. A marcação de imagens responsivas (os atributos srcset e sizes) permite que o navegador escolha um arquivo adequado à tela. O lazy loading adia as imagens fora da tela, e uma CDN entrega os arquivos a partir de um local próximo.

O resultado é medido pelo tamanho do arquivo e por métricas de velocidade da página, como o Largest Contentful Paint, uma das Core Web Vitals do Google.

Converter formatos de imagem

Mudar o formato costuma gerar a maior economia. O Image Converter converte entre PNG, JPG e WebP no navegador.

Por que a otimização importa

Imagens costumam ser a maior parte de uma página web. Imagens grandes atrasam o carregamento em redes móveis, consomem os dados dos visitantes e podem reduzir as notas de velocidade da página. Arquivos menores também facilitam repositórios de documentação, anexos de e-mail e exportações em PDF.

Técnicas de otimização

• Redimensione para o maior tamanho exibido, por exemplo 2× a largura em CSS para telas de alta densidade.
• Escolha o formato pelo conteúdo: PNG para interfaces com cores chapadas, JPG ou WebP para fotos.
• Defina uma qualidade com perda em torno de 75 a 85 e compare recortes ampliados.
• Remova metadados desnecessários, mas mantenha o perfil de cor quando a cor importa.
• Use lazy loading em imagens abaixo da dobra.

Otimização para capturas de tela

Uma captura Retina de uma janela de 1440 pixels de largura tem 2880 pixels de largura. Se uma página de documentação a exibe com 720 pixels CSS, um arquivo de 1440 pixels cobre telas 2× e tem um quarto da quantidade de pixels.

No Temposhot, escolha JPG Export (Adjustable Quality) com qualidade de 1 a 100 (padrão 85) para compartilhamento, e mantenha PNG Export (Lossless) para as cópias master. O Website Capture salva JPEG, PNG ou WebP diretamente.

Erros comuns

• Enviar capturas Retina completas para miniaturas pequenas.
• Comprimir capturas de texto a ponto de as letras ficarem borradas.
• Converter tudo para um único formato, independentemente do conteúdo.
• Otimizar a única cópia e perder o original.

Precisa corrigir uma imagem agora?

Reduza o tamanho do arquivo com o Image Compressor e confira antes o tamanho em pixels com o Screenshot Resolution Checker.

Perguntas frequentes

Devo usar WebP para capturas de tela no meu site?

O WebP costuma gerar arquivos menores que PNG ou JPG com qualidade semelhante, e é suportado pelos navegadores atuais.

Qual deve ser o tamanho de uma captura de documentação?

Cerca de duas vezes a largura CSS exibida cobre telas de alta densidade sem desperdiçar bytes.

Fontes

• Largest Contentful Paint (web.dev)
• Image compression (Wikipedia)

Recursos relacionados

• Formatos de exportação: opções de PNG, JPG e WebP.
• Lazy loading: adia imagens fora da tela.