Veicular imagens do tamanho de computador em dispositivos móveis pode usar 2 a 4 vezes mais dados do que necessários. Siga as diretrizes nesta página para melhorar a experiência do usuário: exibir imagens com diferentes tamanhos em dispositivos variados.
Imagens responsivas e Core Web Vitals
Quando você veicula imagens responsivas, sua página avalia os recursos de exibição do dispositivo do usuário e escolher uma das imagens candidatas a serem usadas no conjunto ideais para exibição com base nesses critérios. Isso salva os dados dos usuários, principalmente ao veicular imagens menores em dispositivos com telas menores.
Os efeitos do carregamento mais rápido de imagem também podem se estender ao Maior exibição de conteúdo (LCP, na sigla em inglês). Por exemplo, se o código O elemento da LCP é uma imagem, veiculando de forma responsiva, ele pode reduzir a duração do carregamento de recursos.
Durações menores de carregamento de recursos reduzem o tempo de carregamento de imagens LCP, melhorando na pontuação de LCP da página de destino. Uma LCP menor significa que os usuários verão seu site mais rápido, e principalmente porque o conteúdo mais importante (o elemento da LCP) é carregado mais rapidamente. 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 geral dela.
Redimensionar imagens
Duas das ferramentas de redimensionamento de imagem mais conhecidas são o pacote npm sharp e a ferramenta de CLI do ImageMagick.
O pacote nítido é uma boa opção para automatizar o redimensionamento de imagens (por exemplo, gerar diversos tamanhos de miniaturas para todos os vídeos do seu site). Ela é rápido e se integra bem com scripts e ferramentas de build. O ImageMagick é mais conveniente para o redimensionamento de imagem único porque é executado inteiramente a partir do comando linha
aguda
Para usar a nitidez como script de nó, salve esse código como um script separado no arquivo projeto e 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% de seu tamanho original, execute o seguinte comando em 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ê precisa criar?
Não existe uma única forma responder a esta pergunta. No entanto, é comum exibir de três a cinco tamanhos diferentes de uma imagem. Exibir mais tamanhos de imagem é melhor para mas ocupa mais espaço nos servidores e exige a criação de um pouco mais de HTML.
Outras opções
Serviços de imagem como o Thumbor (código aberto) e Cloudinary também valem a pena conferir. Ambos são maneiras simples de criar imagens responsivas que também fornecem imagens e manipulação sob demanda. Para configurar o Thumbor, instale-o em seu servidor. Cloudinary cuida dos detalhes para você e não exige configuração de 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" tamanhos="50vw"> |
O parâmetro <img>
src,
srcset,
e sizes
atributos interagem para alcançar esse resultado final.
O valor "src" atributo
O atributo src faz com que esse código funcione para navegadores que não
oferecem suporte a srcset e sizes.
atributos. Esses navegadores voltam a carregar o recurso especificado no
src.
O valor "srcset" atributo
O atributo srcset é uma lista separada por vírgulas de nomes de arquivos de imagens e os respectivos
descritores 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 do
imagem para descobrir. 480w é um descritor de largura que informa ao navegador que
flower-small.jpg tem 480 pixels de largura. 1080w é um descritor de largura que informa ao
navegador flower-large.jpg com 1.080 pixels de largura.
Crédito extra: Você não precisa saber sobre descritores de densidade para exibir tamanhos de imagem diferentes. No entanto, se você quiser saber como funcionam os descritores de densidade, consulte a Laboratório de códigos de comutação de resolução. Os descritores de densidade são usados para exibir diferentes imagens com base no tipo densidade de pixels.
Os "tamanhos" atributo
O atributo tamanhos informa ao navegador qual será a largura da imagem quando ela for exibido, embora isso não afete o tamanho de exibição da imagem. Por isso, você ainda precisa CSS para isso.
O navegador usa essas informações, junto com o que sabe sobre a do dispositivo (incluindo as dimensões e a densidade de pixels) para determinar qual imagem carregar.
Se o navegador não reconhecer o "sizes" ele considera
carregando a imagem especificada pelo atributo "src". . (sizes e srcset
foram introduzidos ao mesmo tempo, de modo que todos os navegadores oferecem suporte a ambas
atributos ou nenhum.
Crédito extra: Se quiser algo mais sofisticado, você também pode usar o atributo de tamanhos para especificar vários tamanhos de espaço. Isso inclui sites que usam layouts diferentes para diferentes tamanhos de janela de visualização. Confira este exemplo de código com vários slots para aprender a fazer isso.
(Ainda mais) Crédito extra
Além de todo o crédito extra já listado (imagens são complexas), você também pode usar esses mesmos conceitos para direção de arte. Direção de arte é a prática de exibir imagens completamente diferentes. (em vez de diferentes versões da mesma imagem) para janelas de visualização diferentes. Você pode saber mais no laboratório de códigos da Direção de arte.
Verificar
Depois de implementar imagens responsivas, você pode usar o Lighthouse para garantir não deixou passar nenhuma imagem. Executar a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho) e procure os resultados do Auditoria de tamanho adequado de imagens. Esses resultados listam as imagens que você ainda precisa redimensionar.