A veiculação de imagens com tamanho de computador para dispositivos móveis pode usar de duas a quatro vezes mais dados do que o necessário. Siga as diretrizes desta página para melhorar a experiência do usuário veiculando tamanhos de imagem diferentes para dispositivos diferentes.
Imagens responsivas e as Core Web Vitals
Quando você veicula imagens responsivas, sua página avalia os recursos de exibição do dispositivo do usuário e escolhe uma das opções de imagem ideal para exibição com base nesses critérios. Isso economiza dados dos usuários, principalmente exibindo imagens menores em dispositivos com telas menores.
Os efeitos de um carregamento de imagem mais rápido também podem se estender à Maior exibição de conteúdo (LCP) da sua página. Por exemplo, se o elemento LCP da página for uma imagem, a exibição de forma responsiva pode reduzir o tempo de carregamento do recurso.
Tempos de carregamento de recursos mais baixos reduzem o tempo de carregamento de uma imagem LCP, melhorando a pontuação de LCP da sua página. Uma LCP menor significa que seu site será carregado mais rapidamente, especialmente para o conteúdo mais importante (o elemento da LCP). Veicular 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 ImageMagick CLI.
O pacote nítido é uma boa opção para automatizar o redimensionamento de imagens. Por exemplo, ele gera vários tamanhos de miniaturas para todos os vídeos do seu site. Ele é rápido e se integra bem a scripts e ferramentas de build. O ImageMagick é mais conveniente para o redimensionamento único de imagem porque é executado inteiramente a partir da linha de comando.
aguda
Para usar o Sharp como um script Node, salve este código como um script separado no seu projeto e, em seguida, execute-o para converter suas 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 para caber em um espaço de 300 x 200 pixels 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ê precisa criar?
Não existe uma única resposta "correta" para essa pergunta. No entanto, é comum veicular 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 imagens, 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 fornecem manipulação de imagem sob demanda. Para configurar o Thumbor, instale-o no seu servidor. A Cloudinary cuida dos detalhes para você e não requer configuração do servidor.
Veicular 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" size="50vw"> |
Os atributos
src,
srcset
e sizes
da tag <img> interagem para alcançar esse resultado final.
O atributo "src"
O atributo src faz esse código funcionar 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 imagens e os
descritores de largura ou densidade.
Esse exemplo usa descritores de largura, que informam ao navegador a largura de uma imagem para que ele não precise fazer o download da imagem 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 1.080 px de largura.
Crédito extra: você não precisa saber mais sobre descritores de densidade para veicular tamanhos de imagem diferentes. No entanto, se você quiser saber como os descritores de densidade funcionam, confira o laboratório de códigos "Troca de resolução". Os descritores de densidade são usados para disponibilizar imagens diferentes com base na densidade de pixels do dispositivo.
O atributo "tamanhos"
O atributo tamanhos informa ao navegador qual será a largura da imagem quando ela for exibida. No entanto, isso não afeta o tamanho de exibição da imagem, então você ainda precisa do CSS para isso.
O navegador usa essas informações, além do que 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 voltará a
carregar a imagem especificada pelo atributo "src". sizes e srcset
foram introduzidos ao mesmo tempo, de modo que todos os navegadores oferecem suporte aos dois
atributos ou a nenhum deles.
Crédito extra: se quiser ser mais sofisticado, também é possível usar o atributo de tamanhos para especificar vários tamanhos de slots. 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), também é possível usar esses mesmos conceitos para direção de arte. A direção de arte é a prática de exibir imagens de aparência completamente diferente (em vez de versões diferentes da mesma imagem) para janelas de visualização distintas. Saiba mais no laboratório de código da direção de arte.
Verificar
Depois de implementar imagens responsivas, é possível usar o Lighthouse para garantir que nenhuma imagem seja perdida. Execute a auditoria de desempenho do Lighthouse (Lighthouse > Options > Performance) e procure os resultados da auditoria sobre tamanho adequado de imagens. Esses resultados listam as imagens que você ainda precisa redimensionar.