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 oferecendo diferentes tamanhos de imagem para diferentes dispositivos.
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 seus usuários, principalmente ao exibir imagens menores em dispositivos com telas menores.
Os efeitos do carregamento mais rápido de imagens também podem se estender à Largest Contentful Paint (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. Uma LCP menor significa que os usuários vão perceber que o site está carregando mais rápido, e principalmente que o conteúdo mais importante (o elemento LCP) está sendo carregado mais rápido. 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 sharp e a ferramenta CLI ImageMagick.
O pacote sharp é uma boa escolha para automatizar o redimensionamento de imagens (por exemplo, gerando vários tamanhos de miniaturas para todos os vídeos no seu 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 o sharp como um script do Node, salve esse 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 a 33% do tamanho original, execute o seguinte comando no terminal:
convert -resize 33% flower.jpg flower-small.jpg
Para redimensionar uma imagem para caber em 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 oferecer de três a cinco tamanhos diferentes de uma imagem. Oferecer 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: não é necessário 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 todos os navegadores aceitam os dois
atributos ou nenhum.
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.