Exiba imagens responsivas
Exibir em dispositivos móveis imagens com tamanho para desktop pode usar de 2 a 4x mais dados do que o necessário. Em vez de uma abordagem generalizada para imagens, exiba tamanhos de imagem diferentes para dispositivos diferentes.
Redimensione imagens #
Duas das ferramentas mais populares de redimensionamento de imagens são o pacote npm sharp e a ferramenta ImageMagick CLI .
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 em seu site). Ele é rápido e facilmente integrado com ferramentas e build scripts. Por outro lado, o ImageMagick é conveniente para o redimensionamento de imagem único pois é usado totalmente através de linha de comando.
sharp #
Para usar o sharp como um script Node, salve este código como um script separado em seu 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.jpgPara redimensionar uma imagem para caber em 300px de largura por 200px 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.jpgQuantas versões de imagem você deve criar? #
Não há uma única resposta "certa" para essa pergunta. No entanto, é comum exibir de 3 a 5 tamanhos diferentes de uma imagem. Exibir mais tamanhos de imagem é melhor para o desempenho, mas ocupará mais espaço em seus servidores e exigirá a escrita de um pouco mais de HTML.
Outras opções #
Serviços de imagem como Thumbor (open-source) e Cloudinary também valem a pena conferir. Os serviços de imagem fornecem imagens responsivas (e manipulação de imagens) sob demanda. O Thumbor é configurado instalando-o em um servidor; o Cloudinary cuida desses detalhes para você e não requer configuração de servidor. as duas alternativas são maneiras fáceis de criar imagens responsivas.
Exibir várias versões de imagem #
Especifique várias versões da imagem e o navegador escolherá a melhor para usar:
O <img> tag de src , srcset e sizes todos os atributos interagem para atingir este 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 Se um navegador não suportar esses atributos, ele voltará a carregar o recurso especificado pelo atributo src
O atributo "srcset" #
O srcset é uma lista separada por vírgulas de nomes de arquivos de imagem e seus descritores de largura ou densidade.
Este exemplo usa descritores de largura . 480w é um descritor de largura que informa ao navegador que flower-small.jpg tem 480px de largura; 1080w é um descritor de largura que informa ao navegador que flower-large.jpg tem 1080px de largura.
"Descritor de largura" parece sofisticado, mas é apenas uma maneira de informar ao navegador a largura de uma imagem. Isso evita que o navegador precise fazer o download da imagem para determinar seu tamanho.
Crédito extra: você não precisa saber sobre descritores de densidade para exibir diferentes tamanhos de imagem. No entanto, se você estiver curioso sobre como funcionam os descritores de densidade, confira o laboratório de código de Alternância de Resolução. Descritores de densidade são usados para exibir imagens diferentes com base na densidade de pixels do dispositivo.
O atributo "sizes" #
O atributo sizes - tamanhos - informa ao navegador a largura da imagem quando ela é exibida. No entanto, o atributo de tamanhos não tem efeito no tamanho da tela; você ainda precisa de CSS para fazer isso.
O navegador usa essas informações, junto com o que sabe sobre o dispositivo do usuário (ou seja, suas dimensões e densidade de pixels), para determinar qual imagem carregar.
Se um navegador não reconhecer o "sizes", ele voltará a carregar a imagem especificada pelo atributo "src". (Os navegadores proveram suporte para os atributos "sizes" e "srcset" simultaneamente, então um navegador suportará ambos os atributos ou nenhum.)
Crédito extra: se você quiser sofisticar, também pode usar o atributo tamanhos para especificar vários tamanhos de slot. Ele atende a sites que usam layouts diferentes para tamanhos de janela de visualização diferentes. Confira este exemplo de código de vários slots para aprender 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 exibir imagens de aparência completamente diferente (em vez de versões diferentes da mesma imagem) para janelas de exibição diferentes. Você pode aprender mais no laboratório de código de Direção de Arte .
Verificar #
Depois de implementar as imagens responsivas, você pode usar o Lighthouse para se certificar de que não tenha perdido nenhuma imagem. Execute a Auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho ) e procure os resultados da auditoria de imagens do tamanho adequado. Esses resultados listarão as imagens que precisam ser redimensionadas.