Executar Lighthouse
Esse Glitch é pequeno o suficiente para que as imagens possam ser inspecionadas manualmente. No entanto, para a maioria dos sites, é essencial usar uma ferramenta como o Lighthouse para automatizar esse processo.
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
- Procure os resultados da auditoria Imagens de tamanho adequado.
A auditoria do Lighthouse mostra que as duas imagens desta página precisam ser redimensionadas.
Corrigir flower_logo.png
Comece pelo topo da página e corrija a imagem do logotipo.
- Inspecione
flower_logo.png
no painel Elements do DevTools.
Este é o CSS para flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
A largura de CSS dessa imagem é de 50 pixels. Por isso, flower_logo.png
precisa ser redimensionado para corresponder. Você pode usar o ImageMagick para redimensionar a imagem para que ela se ajuste. O ImageMagick é uma ferramenta de CLI para edição de imagens que vem
pré-instalada no ambiente do codelab.
- Clique em Remixar para editar para tornar o projeto editável.
- Clique em Terminal. Observação: se o botão "Terminal" não for exibido, talvez seja necessário usar a opção "Tela cheia".
- No console, digite:
convert flower_logo.png -resize 50x50 flower_logo.png
Corrigir flower_photo.jpg
Em seguida, corrija a foto das flores roxas.
- Inspecione o
flower_photo.jpg
no painel de elementos do DevTools.
Este é o CSS para flower_photo.jpg
:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
define a largura CSS de flower_photo.jpg
como "metade da largura do navegador".
(1vw
é igual a 1% da largura do navegador).
O tamanho ideal para essa imagem depende do dispositivo em que ela está sendo visualizada. Portanto, você precisa redimensioná-la para um tamanho que funcione bem para a maioria dos usuários. Você pode verificar seus dados de análise para saber quais resoluções de tela são comuns entre seus usuários:
Esses dados indicam que mais de 95%dos visitantes do site usam uma resolução de tela de 1.920 pixels de largura ou menos.
Com essas informações, podemos calcular a largura da imagem: (1.920 pixels de largura) * (50% da largura do navegador) = 960 pixels
Em resoluções maiores que 1.920 pixels de largura, a imagem será esticada para cobrir a área. A imagem redimensionada ainda é razoavelmente grande, então os efeitos não devem ser muito perceptíveis.
- Use o ImageMagick para redimensionar a imagem para 960 pixels de largura. No tipo de terminal:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
Executar o Lighthouse novamente
- Execute novamente a auditoria de desempenho do Lighthouse para verificar se você redimensionou as imagens.
... E ele falha! Por quê?
O Lighthouse realiza os testes em um Nexus 5x. O Nexus 5x tem uma tela de 1080 x 1920.
Para o Nexus 5x, o tamanho ideal de flower_photo.jpg
é de 540 pixels
de largura (1080 pixels * . 5). Essa imagem é muito menor do que a redimensionada.
Você deve redimensionar a imagem para que ela fique ainda menor? Provavelmente. No entanto, a resposta nem sempre é clara.
A diferença aqui é entre a qualidade da imagem em dispositivos de alta resolução e o desempenho. É fácil superestimar o nível de precisão que os usuários vão inspecionar as imagens, então você provavelmente precisa reduzi-las, mas há certamente casos de uso em que a qualidade da imagem é mais importante.
A boa notícia é que é possível contornar isso tudo usando imagens responsivas para disponibilizar vários tamanhos de imagem. Saiba mais sobre isso no guia de imagens responsivas.