Quem nunca esqueceu de reduzir o tamanho de uma imagem antes de adicioná-la à página? A imagem parece boa, mas está desperdiçando os dados dos usuários e prejudicando a performance da página.
Identificar imagens com tamanho incorreto
O Lighthouse facilita a identificação de imagens com tamanho incorreto. Execute a auditoria de performance (Lighthouse > Opções > Performance) e procure os resultados da auditoria Imagens com tamanho adequado. A auditoria lista todas as imagens que precisam ser redimensionadas.
Determinar o tamanho da imagem correto
O dimensionamento de imagens pode ser enganosamente complicado. Por esse motivo, oferecemos duas abordagens: a "boa" e a "melhor". Ambas vão melhorar a performance, mas a abordagem "melhor" pode levar um pouco mais de tempo para ser compreendida e implementada. No entanto, ela também vai recompensar você com melhorias de performance maiores. A melhor opção para você é aquela que você se sente confortável para implementar.
Uma observação rápida sobre unidades CSS
Há dois tipos de unidades CSS para especificar o tamanho de elementos HTML, incluindo imagens:
- Unidades absolutas: os elementos estilizados usando unidades absolutas sempre serão exibidos no mesmo tamanho, independentemente do dispositivo. Exemplos de unidades CSS absolutas válidas: px, cm, mm, in.
- Unidades relativas: os elementos estilizados usando unidades relativas serão exibidos em tamanhos diferentes, dependendo do comprimento relativo especificado. Exemplos de unidades CSS relativas válidas: %, vw (1vw = 1% da largura da janela de visualização), em (1,5 em = 1,5 vezes o tamanho da fonte).
A abordagem "boa"
Para imagens com dimensionamento baseado em…
- Unidades relativas: redimensione a imagem para um tamanho que funcione em todos os dispositivos.
Talvez seja útil verificar os dados de análise (por exemplo, o Google Analytics) para ver quais tamanhos de tela são usados com frequência pelos seus usuários. Como alternativa, screensiz.es fornece informações sobre as telas de muitos dispositivos comuns. - Unidades absolutas: redimensione a imagem para corresponder ao tamanho em que ela é exibida.
O painel "Elementos" das Ferramentas para desenvolvedores pode ser usado para determinar o tamanho em que uma imagem é exibida.
A abordagem "melhor"
Para imagens com dimensionamento absoluto e relativo, use srcset
e sizes
atributos para disponibilizar imagens diferentes em densidades de tela diferentes.
Leia o guia sobre imagens responsivas.
"Densidade de tela" se refere ao fato de que telas diferentes têm densidades de pixels diferentes. Quando tudo mais é igual, uma tela de alta densidade de pixels parece mais nítida do que uma tela de baixa densidade de pixels.
Como resultado, várias versões de imagem são necessárias se você quiser que os usuários tenham as imagens mais nítidas possíveis, independentemente da densidade de pixels do dispositivo.
As técnicas de imagem responsiva tornam isso possível, permitindo que você liste várias versões de imagem e que o dispositivo escolha a imagem que funciona melhor para ele.
Uma imagem que funciona em todos os dispositivos será desnecessariamente grande para dispositivos menores. As técnicas de imagem responsiva, especificamente srcset e sizes, permitem especificar várias versões de imagem e que o dispositivo escolha o tamanho que funciona melhor para ele.
Redimensionar imagens
Independentemente da abordagem escolhida, talvez seja útil usar o ImageMagick para redimensionar as imagens. O ImageMagick é a ferramenta de linha de comando mais popular para criar e editar imagens. A maioria das pessoas pode redimensionar imagens muito mais rapidamente ao usar a CLI do que um editor de imagens baseado em GUI.
Redimensionar a imagem para 25% do tamanho original:
convert flower.jpg -resize 25% flower_small.jpg
Escalar a imagem para caber em "200 px de largura por 100 px de altura":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Se você estiver redimensionando muitas imagens, talvez seja mais conveniente usar um script ou serviço para automatizar o processo. Saiba mais sobre isso no guia Imagens responsivas.
Evitar mudanças de layout especificando dimensões
Embora este guia discuta as dimensões da imagem no contexto da redução da quantidade de bytes desnecessários baixados, é importante observar que reservar o espaço correto para imagens no layout é outro componente crucial para minimizar a métrica de Cumulative Layout Shift de uma página. Ao exibir imagens em HTML, use os atributos width e height adequados para que o navegador saiba quanto espaço alocar no layout para a imagem:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sem esses atributos ou o dimensionamento CSS equivalente, o navegador não tem ideia de quanto espaço a imagem vai ocupar até que ela seja carregada. Isso vai causar mudanças de layout no documento, o que pode ser frustrante para os usuários quando o conteúdo se move depois que eles começam a consumir. Isso pode fazer com que os usuários percam o lugar ao ler ou "percam" o destino pretendido e acabem clicando em algo que não pretendiam durante o carregamento da página.
Uma alternativa para fornecer a largura e a altura explicitamente é usar a propriedade aspect-ratio do CSS na imagem. Isso tem um efeito semelhante no tamanho de um elemento que os atributos width e height fazem no sentido de que o contêiner vai manter uma proporção consistente. No entanto, a diferença é que isso pode resultar em uma proporção diferente da imagem fornecida. Portanto, é provável que você queira usar uma configuração object-fit para garantir que a imagem não seja distorcida nessa visualização explícita de 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Verificar
Depois de redimensionar todas as imagens, execute o Lighthouse novamente para verificar se você não perdeu nada.