Todos nós já passamos por isso: você se esqueceu de reduzir uma imagem antes de adicioná-la ao página. A imagem parece boa, mas está desperdiçando o conhecimento dados e danos à página desempenho.
Identificar imagens com tamanho incorreto
O Lighthouse facilita a identificação de imagens com tamanho incorreto. Execute o Auditoria de desempenho (Lighthouse > Opções > Desempenho) e procure as Resultados da auditoria de Tamanho adequado de imagens. A auditoria lista todas as imagens que precisam ser redimensionadas.
Determine o tamanho correto da imagem
O dimensionamento de imagens pode ser enganosamente complicado. Por isso, oferecemos duas abordagens: o "bom" e "melhor". Ambos melhorarão o desempenho, mas "melhor" pode demorar um pouco mais para entender e implementar. No entanto, também o recompensará com melhorias de desempenho maiores. A melhor escolha para você se sente confortável para implementar.
Observação rápida sobre as unidades CSS
Existem dois tipos de unidades CSS para especificar o tamanho dos elementos HTML, incluindo imagens:
- Unidades absolutas: os elementos estilizados com unidades absolutas sempre serão exibidos do mesmo tamanho, independentemente do dispositivo. Exemplos de valores unidades CSS absolutas: px, cm, mm, pol.
- Unidades relativas: elementos estilizados usando unidades relativas serão exibidos em tamanhos variados, 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 vez o tamanho da fonte).
O que é "bom" Abordagem
Para imagens com dimensionamento 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 saber quais tamanhos de tela são usados com frequência pelos usuários. Como alternativa, screensiz.es fornece informações sobre as telas de muitos dispositivos comuns. - Unidades absolutas: redimensione a imagem para que ela corresponda ao tamanho em que é exibida.
O painel DevTools Elements pode ser usado para determinar o tamanho de uma imagem exibido.
O "melhor" abordagem
Para imagens com tamanhos absolutos e relativos, use srcset.
e sizes
para veicular imagens diferentes em densidades de exibição diferentes.
Leia o guia sobre imagens responsivas.
"Densidade de exibição" refere-se ao fato de que telas diferentes têm diferentes densidades de pixels. Todas as outras coisas são iguais, uma alta densidade de pixels será mais nítido do que uma tela de baixa densidade de pixels.
Por isso, é preciso ter várias versões de imagem para que os usuários as imagens mais nítidas possíveis, independentemente da densidade de pixels o dispositivo.
Com as técnicas de imagem responsiva, você pode listar várias versões de imagem e que o dispositivo escolha a imagem que funciona melhor para isso.
Uma imagem que funciona em todos os dispositivos será desnecessariamente grande para em dispositivos menores. Técnicas de imagem responsivas, 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, pode ser útil usar ImageMagick para redimensionar suas imagens. O ImageMagick é o mais popular a ferramenta de linha de comando para criar e editar imagens. A maioria das pessoas pode redimensionar imagens muito mais rápido ao usar a CLI do que um editor de imagens baseado em GUI.
Redimensione a imagem para 25% do tamanho da original:
convert flower.jpg -resize 25% flower_small.jpg
Dimensione a imagem para caber 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ê for redimensionar muitas imagens, talvez seja mais conveniente usar um script ou serviço para automatizar o processo. Saiba mais sobre isso na Guia de imagens responsivas.
Especifique dimensões para evitar mudanças de layout
Embora este guia aborde as dimensões de imagem no contexto da redução da quantidade de bytes desnecessários transferidos por download, é importante observar que reservar o espaço correto para imagens no layout é outro componente crucial para minimizar a métrica 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 precisa ser alocado no layout da imagem:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sem esses atributos, ou o dimensionamento equivalente de CSS, o navegador não tem ideia de quanto espaço a imagem ocupará até que ela seja carregada. Isso causa mudanças no layout do documento, o que pode ser frustrante para os usuários quando o conteúdo é movido depois que eles começaram a consumi-lo. Consequentemente, os usuários podem “perder” o lugar ao ler ou “perder” o alvo de hits pretendido e acabar clicando em outra coisa para a qual não pretendiam durante o carregamento da página.
Uma alternativa para fornecer explicitamente a largura e a altura é usar a propriedade aspect-ratio do CSS na imagem. Isso tem um efeito no tamanho de um elemento semelhante ao dos atributos width e height, no sentido de que o contêiner mantém uma proporção consistente. No entanto, a diferença é que isso pode resultar no uso de uma proporção diferente da imagem fornecida. Portanto, convém 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 se esquecer de nada.