A veiculação de imagens do tamanho de computadores em dispositivos móveis pode usar de 2 a 4 vezes mais dados do que necessário. Siga as diretrizes desta página para melhorar a experiência do usuário, veiculando tamanhos de imagem diferentes para dispositivos diversos.
Imagens responsivas e Core Web Vitals
Quando você veicula imagens responsivas, a página avalia os recursos de exibição do dispositivo do usuário e escolhe uma das imagens candidatas que são ideais para exibição com base nesses critérios. Isso economiza dados para os usuários, principalmente ao exibir imagens menores em dispositivos com telas menores.
Os efeitos do carregamento mais rápido de imagem também podem se estender à Maior exibição de conteúdo (LCP) da página. Por exemplo, se o elemento LCP da sua página for uma imagem, a veiculação responsiva dela pode reduzir a duração do carregamento de recursos.
Durações de carregamento de recursos mais curtas reduzem o tempo de carregamento de uma imagem de LCP, melhorando a pontuação de LCP da página. Com uma LCP menor, o site vai ser carregado mais rapidamente, principalmente, o conteúdo mais importante (o elemento da LCP) do site. O envio de imagens responsivas também pode reduzir a contenção de largura de banda para outros recursos na página, o que pode melhorar a velocidade de carregamento da página em geral.
Redimensionar imagens
Duas das ferramentas de redimensionamento de imagem mais conhecidas são o pacote NPM nítido e a ferramenta CLI do ImageMagick.
O pacote nítido é uma boa opção para automatizar o redimensionamento de imagens (por exemplo, gerar vários tamanhos de miniaturas para todos os vídeos do site). Ele é rápido e se integra bem com scripts e ferramentas de build. O ImageMagick é mais conveniente para redimensionar imagens uma única vez, porque é executado inteiramente na linha de comando.
aguda
Para usar a síntese como um script de nó, salve este código como um script separado no projeto e execute-o para converter as imagens:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Para redimensionar uma imagem para 33% do tamanho original, execute o seguinte comando no seu terminal:
convert -resize 33% flower.jpg flower-small.jpg
Para redimensionar uma imagem e ajustá-la a um espaço de 300 px de largura por 200 px de altura, execute o seguinte comando:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Quantas versões de imagem você deve criar?
Não há uma única resposta "correta" para essa pergunta. No entanto, é comum exibir de três a cinco tamanhos diferentes de uma imagem. Exibir mais tamanhos de imagem é melhor para o desempenho, mas ocupa mais espaço nos servidores e exige que você escreva um pouco mais de HTML.
Outras opções
Serviços de imagem como o Thumbor (código aberto) e o Cloudinary também valem a pena conferir. Ambas são maneiras simples de criar imagens responsivas que também oferecem manipulação de imagens sob demanda. Para configurar o Thumbor, instale-o no seu servidor. O Cloudinary se encarrega dos detalhes e não requer configuração de servidor.
Servir várias versões de imagem
Quando você especifica várias versões de imagem, o navegador escolhe a melhor para usar:
| Antes | Depois |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
Os atributos
src,
srcset
e sizes
da tag <img> interagem para alcançar esse resultado final.
O atributo "src"
O atributo src faz com que esse código funcione para navegadores que não
oferecem suporte aos atributos srcset e sizes. Esses navegadores voltam a carregar o recurso especificado no
atributo src.
O atributo "srcset"
O atributo srcset é uma lista separada por vírgulas de nomes de arquivos de imagem e
descrições de largura ou densidade.
Este exemplo usa
descritores de largura,
que informam ao navegador a largura de uma imagem para que ele não precise fazer o download
para descobrir. 480w é um descritor de largura que informa ao navegador que
flower-small.jpg tem 480 px de largura. 1080w é um descritor de largura que informa ao
navegador que flower-large.jpg tem 1080 px de largura.
Ponto extra: você não precisa saber sobre descritores de densidade para veicular tamanhos de imagem diferentes. No entanto, se você tem curiosidade sobre como os descritores de densidade funcionam, confira o laboratório de código de troca de resolução. Os descritores de densidade são usados para exibir imagens diferentes com base na densidade de pixels do dispositivo.
O atributo "sizes"
O atributo sizes informa ao navegador qual será a largura da imagem quando ela for exibida, mas não afeta o tamanho de exibição da imagem. Portanto, você ainda precisa de CSS para isso.
O navegador usa essas informações, junto com o que ele sabe sobre o dispositivo do usuário (incluindo as dimensões e a densidade de pixels), para determinar qual imagem carregar.
Se um navegador não reconhecer o atributo "sizes", ele vai voltar a
carregar a imagem especificada pelo atributo "src". sizes e srcset
foram introduzidos ao mesmo tempo, então cada navegador oferece suporte a ambos
os atributos ou nenhum deles.
Ponto extra: se você quiser inovar, também é possível usar o atributo sizes para especificar vários tamanhos de slot. Isso acomoda sites que usam layouts diferentes para diferentes tamanhos de janela de visualização. Confira este exemplo de código de vários slots para saber como fazer isso.
(Ainda mais) Crédito extra
Além de todos os créditos extras já listados (as imagens são complexas!), você também pode usar esses mesmos conceitos para direção de arte. A direção de arte é a prática de veicular imagens de aparência completamente diferente (em vez de diferentes versões da mesma imagem) para diferentes visualizações. Saiba mais no codelab de direção de arte.
Verificar
Depois de implementar imagens responsivas, use o Lighthouse para garantir que nenhuma imagem tenha sido perdida. Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Performance) e procure os resultados da auditoria Tamanho adequado das imagens. Esses resultados listam as imagens que ainda precisam ser redimensionadas.