Como dimensionar corretamente as imagens
Publicados: 2022-07-13Você está recebendo o aviso “imagens de tamanho adequado” ao executar uma auditoria de desempenho no Google PageSpeed Insights? Esse problema é acionado se o Lighthouse identificar imagens em sua página que não tenham o tamanho adequado.
O dimensionamento adequado de suas imagens pode melhorar drasticamente os tempos de carregamento da página e reduzir o consumo de largura de banda. Neste artigo, compartilhamos algumas técnicas de otimização que você pode seguir para otimizar as imagens do seu site WordPress.
O que significa imagens de tamanho adequado?
Dimensionar corretamente suas imagens significa que o URL da imagem não deve ser maior do que o tamanho em que são renderizadas na tela do visitante. Você não deve servir nada maior do que o necessário – isso desperdiçaria bytes e tornaria a página mais lenta.
| A regra de ouro: as imagens carregadas no seu site WordPress devem ser dimensionadas com base nas dimensões em que serão exibidas. |
O que aciona o aviso do farol
O Lighthouse compara o tamanho da imagem renderizada (proporção de pixels do dispositivo) e o tamanho da imagem real. O aviso “imagens de tamanho adequado” é acionado se o tamanho renderizado for pelo menos 4KiB menor que o tamanho real.
Impacto de imagens de tamanho inadequado no desempenho
Se as imagens não estiverem dimensionadas corretamente, o navegador tomará a “decisão” de redimensioná-las antes de exibi-las ao visitante, desperdiçando tempo e recursos. Imagens muito grandes prejudicam a experiência da página, forçando o usuário a baixar mais dados do que o necessário.
| Uma imagem de alta resolução = tamanho de arquivo enorme = afeta drasticamente o desempenho da web = dados de celular mais consumidos |
Isto é o que acontece no lado do navegador quando ele analisa imagens não dimensionadas corretamente:
O navegador passará mais tempo baixando o arquivo e redimensionando a imagem, aumentando a largura de banda consumida. Para evitar problemas de desempenho relacionados a imagens, existem algumas técnicas fáceis que você pode implementar. Vamos analisá-los na próxima parte!
3 dicas para dimensionar corretamente as imagens no WordPress
Para dimensionar corretamente as imagens no WordPress, você pode seguir três dicas fáceis de otimização de imagens:
- Redimensionar imagens para corrigir as dimensões
- Use imagens responsivas
- Use formatos de imagem baseados em vetor
Vamos mergulhar!
1. Redimensione as imagens para a dimensão correta
Dimensione corretamente as imagens com software e ferramentas online
Existem muitos softwares gratuitos e premium que você pode usar para redimensionar imagens para as dimensões corretas. Estamos compartilhando duas opções gratuitas no Mac e Windows:
- Pré-visualização (Grátis no Mac)
- GIMP – um software de edição gratuito que permite editar e redimensionar imagens de uma maneira muito conveniente:
Claro, você também tem a opção de usar os dois famosos softwares Photoshop e Lightroom, mas eles podem ser uma curva de aprendizado íngreme. Listamos 10 alternativas ao Photoshop para otimização de imagens, caso você tenha interesse.
Importante: Se você estiver redimensionando várias imagens, pode ser mais conveniente usar um script como o Imagemagick para automatizar o processo.
Dimensionar corretamente as imagens usando um CDN de imagem
CDNs de imagem podem ajudar a dimensionar corretamente as imagens para o seu site WordPress. Eles são especializados na transformação, otimização e entrega de imagens. São como APIs que acessam e classificam as imagens utilizadas em seu site de acordo com o dispositivo do usuário.
Como funciona?
Cada imagem carregada de uma CDN de imagem tem um URL que indica qual imagem carregar, além do tamanho, formato e qualidade. Em seguida, ele pode “transformar” a imagem para servi-la no formato mais otimizado.
Uma CDN de imagem também cria variações de uma imagem para diferentes casos de uso e reduz o consumo de bytes de imagem em pelo menos 40%. O Google Developers fez uma pesquisa interessante sobre empresas que decidiram mudar para uma CDN de imagem. Esta é a quantidade de dados que eles salvaram:
2. Use imagens responsivas
Uma das melhores estratégias para veicular imagens otimizadas é chamada de “imagens responsivas”, ou seja, ajustar a largura e a altura para caber em qualquer tela (celular, tablet ou desktop). Todas as imagens serão otimizadas e exibidas na tela certa, resultando em menos largura de banda consumida e uma execução mais rápida do navegador.
Você precisará gerar várias versões de cada imagem e, em seguida, especificar qual usar em seu HTML ou CSS usando dimensões da janela de visualização, consultas de mídia etc.
Importante: o tamanho da imagem mudará dependendo dos pontos de interrupção do layout do site (blocos de construção do design responsivo).
Se você quiser seguir os padrões do Bootstrap, use as seguintes consultas de mídia para garantir que suas imagens sejam responsivas:
- 576px para telefones retrato
- 768px para tablets
- 992px para laptops
- 1200px para dispositivos grandes
Agora que sabemos as dimensões que devemos especificar para cada tela, como informamos ao navegador qual escolher de acordo com a tela do visitante?
Você pode usar os atributos src, srcset e tamanhos para veicular imagens diferentes para diferentes densidades de exibição (qualidades) em dispositivos móveis ou computadores. No exemplo abaixo, usamos o atributo src para informar ao navegador que diferentes tamanhos estão disponíveis para a imagem da flor:
Para veicular automaticamente imagens responsivas em seu site WordPress, você pode usar o Cloudinary (sem necessidade de configuração). É uma solução de gerenciamento de imagem e vídeo de ponta a ponta para sites e aplicativos móveis. Você pode facilmente fazer upload de imagens e vídeos para a nuvem e automatizar manipulações inteligentes dessas mídias (renúncia, otimizações, etc.) sem instalar outro software de edição.
Uma vez otimizado, o Cloudinary fornece as imagens por meio desses três CDNs: Akamai, Fastly e CloudFront. Se você quiser conectar seu próprio CDN, precisará contatá-los.
Quer testar se o seu site usa um design responsivo? Vá para Google Search Console > Mobile Friendly e insira seu URL.
3. Use formatos de imagem baseados em vetores
Outra estratégia para redimensionar corretamente suas imagens é usar formatos de imagem baseados em vetor (como SVG). Uma imagem SVG pode ser dimensionada infinitamente com uma quantidade finita de código sem perder qualidade.
O redimensionamento de imagens é crucial para o desempenho da Web, mas você pode seguir muitas outras técnicas avançadas de otimização para aumentar a velocidade do seu site.
Você já ouviu falar sobre codificação, compactação e uso de formatos de última geração para tornar seu site WordPress mais rápido? Na próxima parte, abordaremos mais algumas estratégias de otimização de imagens que você pode implementar em poucos cliques, graças ao Imagify, um dos melhores plugins de compactação de imagens para WordPress.
Tornando as imagens mais rápidas com o Imagify
Com o Imagify, você não pode redimensionar suas imagens manualmente. Ainda assim, você pode realizar as seguintes otimizações de tamanho de arquivo:
- Comprima suas imagens grandes em massa usando três níveis de compactação sem (quase) afetar a qualidade: Normal, Ultra e Agressivo.
| Saiba mais sobre as diferenças entre compressão de imagem sem perdas e com perdas em nosso guia dedicado. |
Em termos de compactação, o Imagify pode economizar até 95% do tamanho do seu arquivo! No exemplo abaixo, não podemos redimensionar imagens com nossos valores, mas a compactação reduziu a largura e a altura de nossas imagens.
Como mencionado acima, a otimização em massa permite otimizar todas as imagens de uma só vez:
- Converta-os para WebP, o formato de última geração recomendado pelo Lighthouse.
Empacotando
A melhor maneira de evitar avisos de imagem com tamanho adequado é aprender a medir as diferentes áreas do seu site (logotipo, barra lateral, controles deslizantes, imagens em destaque etc.). Depois de saber quais dimensões são necessárias para cada peça, exibir o tamanho certo para qualquer dispositivo será muito fácil!
Redimensionar imagens não é a única maneira de otimizá-las. Você também precisa comprimi-los (ou codificá-los) e servi-los em um formato de última geração como o WebP.
Todas essas estratégias reduzirão significativamente o tamanho do arquivo de imagem, resultando em um tempo de download mais rápido para seus visitantes. E boas notícias, eles podem ser implementados facilmente com o plugin Imagify! Uma avaliação gratuita está disponível para que você possa otimizar algumas imagens e ver como o desempenho da sua página melhora. Sem riscos!