Todos nós já passamos por isso: você se esqueceu de reduzir a escala vertical de uma imagem antes de adicioná-la à página. A imagem parece boa, mas está desperdiçando dados dos usuários e prejudicando o desempenho da página.
Identificar imagens com tamanho incorreto
O Lighthouse facilita a identificação de imagens com tamanho incorreto. Execute a auditoria de desempenho (Lighthouse > Options > Performance) e procure os resultados da auditoria de Haperly size images. A auditoria lista todas as imagens que precisam ser redimensionadas.
Determinar o tamanho correto da imagem
O dimensionamento das imagens pode ser enganosamente complicado. Por esse motivo, fornecemos duas abordagens: o "bom" e o "melhor". Ambas melhorarão a performance, mas a abordagem "melhor" pode levar um pouco mais de tempo para entender e implementar. No entanto, você também vai recompensar você com melhorias de desempenho maiores. A melhor escolha 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 são mostrados no mesmo tamanho, independente do dispositivo. Exemplos de unidades CSS absolutas e válidas: px, cm, mm, pol.
- Unidades relativas: os elementos estilizados usando unidades relativas são mostrados em tamanhos variados, dependendo do comprimento relativo especificado. Exemplos de unidades CSS válidas e relativas: %, vw (1vw = 1% da largura da janela de visualização) em (1,5 em = 1,5 vez o tamanho da fonte).
A abordagem "boa"
Para imagens com tamanho baseado em...
- Unidades relativas: redimensione a imagem para um tamanho que funcione em todos os dispositivos.
Pode ser útil verificar seus dados de análise (por exemplo, Google Analytics) para ver quais tamanhos de tela são comumente usados pelos seus usuários. Como alternativa, screensiz.es (link em inglês) 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 Elements do DevTools pode ser usado para determinar o tamanho em que uma imagem é exibida.
A abordagem "melhor"
Para imagens com tamanho absoluto e relativo, use os atributos srcset
e sizes
para veicular imagens diferentes em densidades de exibição distintas.
Leia o guia sobre imagens responsivas.
"Densidade de exibição" se refere ao fato de que telas diferentes têm densidades de pixels distintas. Se todo o restante for igual, uma tela de densidade alta de pixels parecerá mais nítida do que uma de baixa densidade de pixels.
Como resultado, são necessárias várias versões de imagem se você quer que os usuários tenham a melhor experiência possível, independente da densidade de pixels do dispositivo.
As técnicas de imagem responsiva tornam isso possível ao permitir que você liste várias versões de imagens e, para o dispositivo, escolher a imagem que funciona melhor para ela.
Uma imagem que funcione em todos os dispositivos será desnecessariamente grande para dispositivos menores. As técnicas de imagem responsiva, especificamente srcset e tamanhos, permitem que você especifique várias versões de imagem e o dispositivo escolha o tamanho ideal para ele.
Redimensionar imagens
Independentemente da abordagem escolhida, pode ser útil usar o ImageMagick para redimensionar suas imagens. O ImageMagick é a ferramenta de linha de comando mais conhecida para criar e editar imagens. A maioria das pessoas consegue redimensionar imagens mais rapidamente usando a CLI do que um editor de imagens baseado em GUI.
Redimensionar a imagem para 25% do tamanho da original:
convert flower.jpg -resize 25% flower_small.jpg
Dimensionar a imagem para que caiba dentro de "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ê pretende redimensionar muitas imagens, pode ser 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
Este guia aborda as dimensões da imagem no contexto da redução da quantidade de bytes desnecessários transferidos por download, mas é importante observar que reservar o espaço correto para imagens no layout é outro componente crucial para minimizar a métrica Mudança de layout cumulativa de uma página. Ao veicular imagens em HTML, use os atributos width e height adequados para que o navegador saiba quanto espaço alocar no layout da imagem:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sem esses atributos ou o tamanho de CSS equivalente, o navegador não tem ideia de quanto espaço a imagem vai ocupar até ser carregada. Isso causa mudanças de layout no documento, o que pode ser frustrante para os usuários quando o conteúdo é movido depois que eles começam a consumi-lo. Isso pode fazer com que os usuários se percam na leitura ou que não atinjam o destino pretendido e cliquem em outra coisa que não pretendiam durante o carregamento da página.
Uma alternativa para fornecer a largura e a altura explicitamente é usar a propriedade CSS aspect-ratio na imagem. Isso tem um efeito semelhante no tamanho de um elemento que os atributos width e height, 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. Use uma configuração object-fit para garantir que a imagem não seja distorcida nessa visualização explícita em 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 não faltou nada.