Como resolver os problemas de imagens no Google PageSpeed Insights?
Durante algum tempo, uma das minhas maiores dificuldades com o Google PageSpeed Insights foi encontrar o equilíbrio entre qualidade das imagens e velocidade de carregamento.
Eu corrigia um problema, mas outro aparecia. A resolução estava errada, o formato poderia ser melhor, a compressão era insuficiente ou a mesma imagem precisava atender a diferentes tamanhos de tela.
Depois de vários testes nos meus sites WordPress, encontrei uma solução relativamente simples.
O segredo não estava em conseguir imagens perfeitas para o Google, mas em entregar imagens suficientemente boas para os visitantes.
1. Descobrindo a resolução ideal das imagens
O primeiro passo foi instalar dois plugins no WordPress:
- Jetpack Boost: para identificar as dimensões esperadas das imagens.
- ShortPixel Image Optimizer: para comprimir os arquivos e gerar formatos mais eficientes.
No painel do Jetpack Boost, ativei a opção Enable Image Guide (Ativar guia de imagens), disponível na seção de imagens:
Com essa ferramenta, ao navegar pelo site, aparecem pequenos indicadores coloridos sobre as imagens.
Ao clicar nesses indicadores, podemos consultar informações como Expected Dimensions, que ajudam a identificar a resolução esperada.
Foi assim que comecei a entender o problema.
Em uma das minhas imagens destacadas (featured images), o tamanho esperado era de aproximadamente 1400 pixels de largura.
Mas será que eu realmente precisava entregar todos esses pixels?
Resolvi experimentar.
2. Diminuindo a resolução sem sacrificar a experiência
Em vez de utilizar os 1400 pixels indicados, redimensionei a imagem para 1200 pixels de largura, mantendo suas proporções originais.
Depois, salvei o arquivo em JPG, com qualidade alta.
O resultado foi interessante.
Em uma área que chegava a aproximadamente 1550 pixels na tela, a imagem já não apresentava a mesma nitidez de uma versão maior.
Entretanto, continuava visualmente aceitável.
E havia uma vantagem: o arquivo precisava transportar menos informações.
Essa pequena perda de definição poderia representar uma economia considerável no carregamento.
Naturalmente, 1200 pixels não são uma medida universal. Cada tema, imagem e dispositivo pode exigir uma resolução diferente.
O importante é experimentar até encontrar um equilíbrio.
Uma imagem não precisa ter a maior resolução possível. Precisa ter a resolução adequada ao seu propósito.
3. Resolvendo o problema dos formatos de imagem
Outra recomendação frequente do PageSpeed é utilizar formatos modernos, como WebP ou AVIF.
Inicialmente, isso pode parecer mais uma tarefa para realizar antes de publicar cada imagem.
Mas não precisa ser assim.
Nos meus sites, continuo preparando as fotografias em JPG.
Depois do upload, deixo o ShortPixel realizar a otimização.
Nas configurações do plugin, é possível habilitar a geração de versões WebP e AVIF.
É importante também configurar a entrega desses formatos, pois apenas gerar os arquivos não garante que os visitantes os receberão.
O resultado é um processo mais simples: preparo a imagem, publico no WordPress e deixo o plugin cuidar da conversão.
Para fotografias, JPG, WebP e AVIF costumam ser escolhas mais eficientes que PNG. Este último continua útil para determinadas ilustrações, gráficos e imagens que exigem transparência ou preservação exata dos detalhes.
4. A compressão: onde realmente economizei
Aqui está uma das partes mais importantes da experiência.
No ShortPixel, escolhi a compressão Lossy, ou seja, com perdas.
Isso significa que o plugin elimina determinadas informações da imagem para diminuir o tamanho do arquivo.
A imagem resultante não será matematicamente idêntica à original, mas poderá parecer praticamente igual aos olhos do visitante.
Existem outras modalidades, como Glossy e Lossless, interessantes quando a preservação dos detalhes é prioridade.
Para um blog comum, entretanto, considero Lossy uma excelente escolha.
No meu caso, a combinação ficou assim:
Imagem redimensionada para 1200 pixels + JPG de alta qualidade + compressão Lossy.
A intenção é permitir uma pequena redução na resolução e compensá-la com um arquivo significativamente mais leve.
Uma imagem de 1200 pixels pode não satisfazer completamente a recomendação de resolução do PageSpeed quando exibida em uma área maior.
Mas isso não significa que a experiência será ruim.
O peso do arquivo também importa.
E muito.
5. Como entregar a mesma imagem em diferentes dispositivos?
Este foi um dos problemas que mais me fizeram experimentar configurações.
Uma imagem destacada precisa funcionar no computador, no tablet e no celular.
No entanto, cada dispositivo possui uma largura de tela diferente.
A solução ideal é entregar arquivos com dimensões apropriadas para cada situação, utilizando os recursos de imagens responsivas do WordPress.
O próprio WordPress pode gerar diferentes tamanhos e utilizar os atributos srcset e sizes para ajudar o navegador a escolher o arquivo adequado.
Mas nem sempre o tema utiliza esses recursos da maneira esperada.
Nos meus testes, encontrei um detalhe importante no ShortPixel.
Ativei a opção Redimensionar Imagens Grandes, configurando o limite de largura para 1200 pixels, exatamente a resolução que utilizo nas minhas imagens destacadas.
Percebi que, no meu tema WordPress, quando essa opção não estava ativada, a imagem enviada com 1200 pixels não se ajustava para preencher uma área de aproximadamente 1550 pixels na tela.
Entretanto, ao ativar a opção e enviar imagens com pelo menos a largura configurada, consegui fazer com que elas ocupassem toda a área disponível.
Foi uma descoberta interessante, porque resolveu um problema que eu vinha enfrentando nos meus próprios sites.
Embora o ShortPixel não seja diretamente responsável pela ampliação visual das imagens — algo que também depende do comportamento do tema —, essa combinação de configurações funcionou no meu caso.
A imagem de 1200 pixels perdeu um pouco de nitidez ao ocupar os 1550 pixels disponíveis, mas continuou bastante aceitável.
E era exatamente isso que eu procurava: diminuir a resolução e o peso do arquivo, sem deixar espaços indesejados na apresentação das imagens.
Para quem deseja preservar mais detalhes, especialmente em monitores grandes, vale manter uma versão de resolução superior e permitir que o navegador escolha arquivos menores nos dispositivos móveis.
Mas para quem veio descobrir por que o Pagespeed não seleciona automaticamente o tamanho certo para o teste versão mobile e versão desktop, esta seria a solução que lhes entrego.
Também é importante lembrar que o limite de redimensionamento do ShortPixel deve ser compatível com os maiores tamanhos de miniatura utilizados pelo tema.
6. Afinal, para que servem as thumbnails?
Depois de tantos testes, comecei a olhar para as thumbnails de outra maneira.
As thumbnails são versões menores das imagens, geradas pelo WordPress para diferentes situações.
Elas não existem apenas para decorar listas de publicações.
São uma maneira de evitar que o navegador precise carregar um arquivo enorme quando uma imagem pequena seria suficiente.
Imagine uma fotografia com 2400 pixels de largura inserida em um artigo cujo conteúdo ocupa apenas 800 pixels.
Por que carregar todos esses pixels se o visitante visualizará uma imagem muito menor?
Nesse caso, podemos utilizar uma thumbnail próxima da largura do conteúdo.
O mesmo vale para pequenos elementos decorativos.
Se eu quiser colocar uma logomarca estilizada no início de um artigo, centralizada horizontalmente, não preciso utilizar uma imagem de 1200 pixels.
Uma miniatura menor centralizada poderá cumprir perfeitamente essa função.
E quando o visitante quiser ampliar a imagem?
O WordPress oferece uma solução bastante simples.
Ao inserir a imagem no artigo, podemos selecionar uma thumbnail apropriada e configurar seu link para apontar ao arquivo de mídia original.
Assim, o visitante encontra uma imagem leve durante a leitura e pode abrir a versão maior quando desejar.
É uma maneira de preservar os detalhes sem obrigar todos os visitantes a carregar a imagem completa imediatamente.
Naturalmente, se o ShortPixel estiver configurado para limitar os arquivos originais a 1200 pixels, essa será também a resolução máxima disponível no arquivo redimensionado. Para oferecer uma versão realmente maior, será necessário preservá-la separadamente.
7. O resultado: menos pixels, menos kilobytes e mais velocidade
Depois dessas experiências, percebi que otimizar imagens não significa simplesmente reduzir tudo ao menor tamanho possível.
Existe um equilíbrio.
Uma imagem excessivamente comprimida pode prejudicar a aparência do site.
Uma imagem pesada pode comprometer o carregamento.
E uma imagem perfeitamente dimensionada para determinado dispositivo talvez não seja a melhor escolha para outro.
Minha solução foi trabalhar com arquivos moderados, utilizar a compressão Lossy e aproveitar as thumbnails quando necessário.
O Jetpack Boost me ajudou a identificar os problemas.
O ShortPixel automatizou boa parte da otimização.
E os testes visuais me ajudaram a decidir até onde poderia reduzir a resolução.
Ainda é necessário conferir os resultados no PageSpeed Insights, pois uma imagem menor não garante, sozinha, que todos os avisos desaparecerão.
Mas aprendi algo importante durante esse processo:
O visitante não entra em um site para contar pixels. Ele entra para encontrar alguma coisa.
E, quanto menos tempo precisar esperar, maiores serão as chances de continuar navegando.
No fim, a velocidade não depende apenas da pontuação de uma ferramenta.
Depende também das pequenas escolhas que fazemos antes de publicar cada imagem.
Esta foi a solução que encontrei nos meus sites. Continuarei experimentando outras ferramentas e compartilhando os resultados aqui na HostBrands.
Teste do Pagespeed
Da primeira imagem no começo do post para agora:
Só falta resolver o JavaScript e o CSS.
Deixe um comentário