Otimize suas imagens e não perca mais tempo

De acordo com o HTTPArchive, o tamanho médio dos sites quase dobrou em 5 anos, de 1 MB em 2014 para 2 MB em 2019. Claro, o acesso à Internet é mais rápido do que nunca, mas, ainda assim, por que os sites são tão grandes agora? A resposta está parcialmente nos ativos multimídia em geral e nas imagens em particular.

Já faz muito tempo que os sites não são mais simples páginas de texto. Eles agora são dinâmicos, cheios de imagens, vídeos, GIFs… e queremos que todos esses ativos fiquem bonitos e nítidos em telas com resoluções enormes.

Se o seu site carrega muito devagar e você nunca otimizou suas imagens, tenho uma boa notícia: hoje você vai aprender o que pode fazer para acelerar o seu WordPress. Vamos ver as ferramentas que você pode usar para melhorar o desempenho do seu site e evitar que as imagens atrapalhem a experiência dos usuários.

Por que a otimização de imagem é importante

Antes de explicar os diferentes métodos disponíveis para otimizar recursos de imagem e acelerar seu site, gostaria de dedicar alguns minutos para convencê-lo da importância de fazê-lo.

As imagens têm um enorme impacto no tamanho geral de uma página da Web

Como eu disse no início, o peso das imagens em um site representa uma porcentagem importante do total. Por exemplo, considere esta postagem no blog: DevTips – Como impedir o WordPress de adivinhar URLs. Este é um post bastante curto, com menos de 400 palavras, que oferece uma solução rápida para um problema claro.

De acordo com GTMetrix, carregar esta postagem usa 850 KB de dados. Mas por que um post tão curto usa tantos dados? Pois bem, as imagens são em parte responsáveis ​​por esse problema: só a imagem em destaque do post pesa mais de 200KB, o que representa 25% do total.

Tráfego móvel

De acordo com os dados encontrados no statcounter, 52% do tráfego da web vem de dispositivos móveis e 45% de desktops. É por isso que hoje tanta ênfase é colocada no uso de designs responsivos que funcionam bem em telas pequenas.

Como você certamente já experimentou, a conexão com a Internet no celular nem sempre é boa (especialmente se você estiver viajando ou no metrô). Segundo o Statistia, em 2019 a velocidade média ronda os 14 Mbps. Portanto, se queremos acelerar nossos sites no celular, temos que reduzir ao máximo o peso deles, incluindo o de suas imagens.

Custos de armazenamento e transferência de dados

Outra razão pela qual você deve se preocupar em usar imagens com as dimensões adequadas é o dinheiro. Os critérios pelos quais os provedores de hospedagem oferecem seus planos incluem a quantidade de espaço em disco que seu site usa e a quantidade de dados que você envia de seus servidores para seus visitantes. Quanto mais espaço em disco usado e mais dados enviados, mais você paga.

Ao reduzir o tamanho das suas imagens, você reduzirá os dois fatores e economizará algum dinheiro a cada mês ?

Ações de otimização de imagem

Agora que você sabe por que deve se preocupar em otimizar suas imagens, vamos ver o que você pode fazer para acelerar seu site WordPress.

Nº 1 Carregar imagens dimensionadas corretamente

A quantidade de pessoas que enviam fotos tiradas diretamente de sua nova câmera DSLR é surpreendente. O problema é que qualquer foto tirada com uma câmera DSLR provavelmente é muito grande e pesada para um site.

A primeira coisa que você precisa fazer é reduzir as imagens para um tamanho razoável antes de enviá-las para o seu site. Por exemplo, em nosso site, as maiores imagens que costumamos enviar são as imagens em destaque de nossas postagens. Decidimos limitar essas imagens a apenas 1200x800px. Neste outro post, expliquei um método para dimensionar e compactar imagens rapidamente antes de enviá-las.

#2 Ajuste seu tema para gerar miniaturas apropriadas

Quando você carrega uma imagem no WordPress, o WordPress gera várias miniaturas. Essas miniaturas são definidas pelo seu tema, pois é o seu tema quem sabe quando precisa de uma versão maior ou menor de uma imagem.

Por exemplo, nossas imagens em destaque são 1200x800px. Essas dimensões funcionam muito bem ao visualizar a postagem em si:

o que é claramente demais para algo assim:

Por isso, para este caso em particular, nosso tema registra um novo tamanho de miniatura de apenas 480x320px e é usado na tela de lista de posts.

Se você acha que seu tema não está gerando miniaturas adequadas, recomendo que leia a documentação do WordPress para saber como definir o tamanho de uma miniatura com set_post_thumbnail_size ou até mesmo como definir miniaturas adicionais com add_image_size .

E, como sempre, se você precisar de ajuda com isso, deixe-me saber na seção de comentários abaixo e ficarei feliz em ajudar (ou até mesmo escrever um post sobre isso?)

#3 Use os tamanhos de imagem com inteligência

O WordPress gera várias miniaturas das imagens que você tem em sua biblioteca de mídia para que seu tema possa usar a melhor imagem em cada cenário possível. Mas aí vem a parte interessante: você também pode usar miniaturas ao inserir imagens em suas páginas e posts.

Ao inserir uma imagem no post, dê uma olhada na barra lateral e escolha o tamanho que melhor atende às suas necessidades:

Por exemplo, se você colocar uma imagem estreita e pequena como esta, uma imagem pequena (300x200px) pode ser perfeita:

mas usar essa mesma miniatura para uma imagem maior gera resultados terríveis:

Melhor usar uma versão com mais resolução:

#4 Use o Formato de Imagem Apropriado

Existem diferentes formatos de imagem, cada um com seus pontos fortes e fracos para compactar imagens. Os formatos mais usados ​​são:

• PNG Ótimo formato de imagem para compartilhar capturas de tela que não contêm nenhuma imagem, como, por exemplo, uma captura de tela do editor do WordPress.
• JPG. Um dos formatos mais difundidos no mundo. Funciona muito bem com praticamente qualquer tipo de fotografia, permitindo taxas de compressão muito altas. No entanto, não é perfeito: se a foto tiver bordas muito nítidas (por exemplo, se houver texto ou desenhos), você terá que usar taxas de compactação mais baixas ou corre o risco de a imagem ter artefatos feios.
• GIF. Rei da Internet (e plataformas de mídia social). É um tipo de formato que permite animações. Para ser sincero, acho que todos os “GIFs” que usamos agora são na verdade vídeos (curtos), que oferecem melhores taxas de compactação e maior qualidade…

#5 Excluir imagens não utilizadas

Com o passar do tempo, é fácil manter muitas imagens legadas em seu site WordPress que ninguém usa em nenhum lugar. Se você deseja excluí-los rapidamente, neste post Toni explica como.

#6 Ativar carregamento lento

Então, as imagens tornam seus sites mais lentos, certo? Por que simplesmente não dizemos aos sites para não carregar imagens, a menos que seja absolutamente necessário? Isso aceleraria as coisas, não é? Digite o carregamento lento.

Lazy Loading é uma ideia bem simples: uma imagem não será carregada até que esteja visível no navegador do visitante. Por exemplo, se nosso site tem uma determinada imagem no rodapé, por que precisamos nos preocupar em carregá-la antes que o usuário chegue ao final do nosso site? Espere até que eles cheguem lá e, quando chegarem, carreguem a imagem (e se não carregarem, salvem um carregamento de imagem!)

Existem muitos plugins Lazy Loading para WordPress. Alguns provedores de hospedagem como o evento SiteGround incluem esta opção em suas instalações. Basta procurar a opção no seu Dashboard e habilitá-la.

Espero que o post de hoje ajude você a melhorar um pouco a velocidade de carregamento da web. Há poucas coisas que são tão fáceis de consertar e render resultados tão bons. Abraço e sorte!

Imagem em destaque da equipe Icons8 no Unsplash.