Como optimizar imagens para o teu site WordPress e agradar aos utilizadores

O que têm em comum Ayrton Senna, Michael Schumacher, Usain Bolt e Michael Phelps?

Foram campeões por serem os mais rápidos.

Não é só nas pistas de Fórmula 1, de corrida ou natação que a velocidade é importante. É um critério determinante no sucesso de qualquer site que se preze.

Quanto mais rápido for o site maiores são as possibilidades de corresponder aos desejos dos utilizadores.

Há diversos factores que contribuem para o tempo de carregamento. Uns mais técnicos, outros menos. Entre eles estão as imagens. São um elemento decisivo neste aspecto.

Sabes se aquelas que tens no teu site estão aptas a corresponder à velocidade que precisas?

Imagina um utilizador do teu site com o seu smartphone na mão. Abre o navegador e faz uma pesquisa. Entre os primeiros resultados, porque tens uma estratégia SEO decente, está o teu projecto online.

O utilizador olha interessado para aquilo que o Google apresenta e acaba por escolher o teu. Com o dedo carrega no link e… parabéns, tens um novo utilizador a caminho. Quem sabe não se torna um visitante regular…

Enquanto está à espera que o teu site carregue, levanta os olhos do smartphone por um instante para depois os voltar a colocar no ecrã. Ainda nada… Já passaram 3 ou 4 segundos e o teu site ainda está a carregar. Neste ponto o utilizador já não quer esperar mais. Com um suspiro, carrega no ícone para recuar e vai em busca de outro site. Ainda por cima um concorrente teu…

Dados estatísticos da Kissmetrics não deixam dúvidas:

  • 47% dos consumidores esperam que uma página web carregue em 2 segundos ou menos;
  • 40% das pessoas abandona um site se levar mais de 3 segundos a carregar.

É importante ter em conta que todas as imagens que inseres numa página são carregadas para apresentação ao visitante quando chega a esse página, o que corresponde a um aumento do tempo de carregamento.

Para garantires que os utilizadores não se vão embora do teu site antes de verem o que tens para mostrar, precisas de optimizar as imagens.

velocidade da internet

Os benefícios da optimização de imagens

O teu site ficará mais rápido e eficiente, com diversas vantagens:

  • os utilizadores gostam de sites rápidos porque ninguém gosta de esperar 20 segundos pelo carregamento de uma página;
  • os motores de busca gostam de sites rápidos, porque gostam de oferecer bons resultados aos utilizadores;
  • a tua taxa de rejeição será mais baixa, porque os utilizadores estão mais confiantes a passear por outros páginas;
  • vais ocupar menos espaço no serviço de alojamento.

Estas são razões mais que suficientes para optimizar imagens. Em rigor, bastaria a primeira. Estamos de acordo, não estamos?

Vamos aos 3 passos essenciais…

Escolhe o melhor formato para as imagens

Em primeiro plano vamos olhar para o tipo de imagens que podes ou deves colocar no site. Os dois formatos mais comuns são o .png e o .jpg.

Por norma, e na maior parte dos sites, quase todas as imagens devem ser apresentados em .jpg.

É o formato com a melhor relação qualidade / peso para fotos, ilustrações, imagens com gradientes ou muito coloridas.

Já o .png é o formato indicado para imagens que necessitam de transparência e usam uma gama de cores limitada, como os logótipos. Também são muito usados em imagens de captura de ecrã.

Populares pela possibilidade de animação, os GIF são apenas adequados para imagens de fraca qualidade e pouca cor. Usa-os apenas se pretendes algo animado no site.

Agora que selecionamos o tipo de imagem, vamos analisar o tamanho.

Redimensiona as imagens para o tamanho adequado

Já ouviste dizer que é melhor prevenir que remediar, certo?

Para evitar remediar, deves tratar as imagens de forma correcta antes de as carregares para o teu site. Com o peso em píxeis e as dimensões adequadas.

É muito comum encontrarmos sites que apresentam imagens de 4000 píxeis (px) quando só precisam de as ter com 1600px porque esse é o limite máximo permitido pelo estilo do site. Neste aspecto não há um número padrão porque cada um tem as suas características.

Para o teu caso, tens de apurar qual é a largura máxima permitida pelo estilo usado no teu site.

Tomemos como exemplo o actual blog da Virgu.

A largura máxima é de 945px. De nada serve criarmos imagens com 2000px de largura quando só cerca de metade será apresentado ao visitante.

Desta forma, podemos redimensionar as imagens para o máximo da largura possível ou, quando muito, ligeiramente maiores. Por exemplo 1020px.

Com isto estarás a evitar um peso extra no carregamento da imagem.

Se tens imagens já carregadas no teu site com dimensões muito superiores às necessárias podes redimensiona-las usando o WordPress.

No menu lateral vai a Multimédia -> Selecciona a imagem -> Editar imagem e escolhe as novas dimensões. Não te esqueças de guardar, no fim.

O WordPress permite que redimensiones as imagens já carregadas para o site
O WordPress permite que redimensiones as imagens já carregadas para o site

 

Se o teu site tem poucas imagens e tens de as redimensionar, este é um bom método. Pode envolver o investimento de alguns minutos mas será tempo bem aplicado.

No entanto, se tens umas centenas ou milhares de imagens a precisar de intervenção, talvez seja preferível usares um plugin.

Será ainda o caso dos sites com múltiplos colaboradores, alguns dos quais não têm o mesmo cuidado que outros.

Redimensionar imagens com plugin

Uma das grandes vantagens do WordPress sobre outros sistemas de gestão de conteúdos é a enorme quantidade de plugins que existem para te ajudar num conjunto alargado de funcionalidades.

É importante dizer que não deves abusar do número de plugins no teu site. Não tanto por causa do seu número mas da capacidade de funcionarem bem uns com os outros. Mas isso é conversa para outra altura.

Regressando à questão das imagens…

Redimensiona com o Imsanity

O Imsanity é um plugin que permite redimensionar as imagens para o tamanho que desejas. Nas definições indicas a largura ou altura máxima que pretendes, bem como a sua qualidade.

Trabalha em dois níveis:

  • Quando um autor ou colaborador carrega uma imagem maior que a dimensão configurada, o plugin irá automaticamente redimensiona-la e substituir a original;
  • Redimensiona em grupo imagens já carregadas para o site.

O Imsanity é gratuito.

Além de adequar o tamanho, precisas ainda de comprimir as imagens.

Comprime as imagens para criar ficheiros mais leves e rápidos no site

Por vezes carregamos para o site imagens bem dimensionadas para aquilo que precisamos mas que, ainda assim, estão pesadas. Por exemplo, uma imagem com 1000px de largura com 400kb.

Para resolver o problema pode ser necessário comprimir a imagem.

Esta é uma tarefa delicada porque queremos provocar um menor impacto no carregamento das imagens mantendo uma excelente qualidade visual. No fundo queremos oferecer aos utilizadores o melhor:

  • um site que carregue rápido;
  • um site que proporciona imagens de boa qualidade.

A compressão é uma tarefa delicada. Porque é necessário o equilíbrio correcto, para evitar destruir a imagem.

A melhor forma de chegar a um resultado final de categoria superior é utilizar um de dois sistemas:

  • ferramenta online
  • plugin

Comecemos por aquilo que recomendamos sempre: tratar a imagem antes de a carregar para o site.

Ferramentas online para compressão de imagens

Há diversas ferramentas deste género:

Todos eles fazem um bom trabalho, embora uns melhores que outros.

Estes são as meus preferidos:

TinyPNG

O TinyPNG é um histórico destas andanças. Ao contrário do que o nome pode indicar, não trata apenas ficheiros .png mas também .jpg. Aliás, tem um irmão gémeo para comprovar isso no TinyJPG.

Não precisas de mudar de site para trabalhar formatos diferentes. Um ou outro funcionam com ambos os formatos.

O TinyPNG ou TinyJPG é muito simples. Basta carregar a imagem ou arrasta-la para a área definida no ecrã e pronto. A aplicação faz a sua magia e oferece um link para descarregar a imagem depois de concluída.

Podes carregar até 20 imagens com um tamanho máximo de 5MB de cada vez.

A aplicação não tem qualquer opção de configuração.

É gratuita.

TinyPNG é uma ferramenta prática e poderosa
TinyPNG é uma ferramenta prática e poderosa

Optimizilla

O Optimizilla também é bastante simples de usar.

Além de gratuito. Como o TinyPNG permite o carregamento em grupo até 20 imagens.

Tem, no entanto, um extra. Permite que escolhas o relação entre compressão/qualidade.

O Optimzilla tem uma configuração adicional
O Optimzilla tem uma configuração adicional

Plugins para compressão de imagens

As ferramentas online são excelentes para comprimir imagens antes destas serem aplicada no site mas não podem fazer quando já estão inseridas nas páginas.

Neste ponto tens duas opções:

  1. tratar de novo a imagem, voltar a carregar para o site e voltar a aplicar na respectiva página;
  2. usar um plugin.

Como ficou dito atrás, se tiveres poucas imagens, opta pela primeira opção e usa sempre este método para as novas imagens. Se tiveres muitas, segue pelo segundo.

O mesmo se passa com a questão dos colaboradores do teu site. Se todos eles forem cuidadosos e respeitarem as indicações de como tratar e carregar as imagens, segue pelo primeiro. Caso contrário… já sabes o resto.

Há diversos plugins para este efeito no WordPress.

Estes são os nossos destaques:

E agora os preferidos.

WP Smush

O WP Smush é um histórico. Tem dois sabores, gratuito e pago.

A versão gratuita, no entanto, deixa algo a desejar na compressão. A proprietária do plugin, a wpmudev, salienta no site que a versão premium garante muito melhores resultados. Não é difícil acreditar.

Permite a compressão em grupo mas a versão grátis tem um limite de 50 imagens de cada vez.

Compress JPEG & PNG images – TinyPNG

É um dos favoritos, tal como acontece com a ferramenta online. Também tem versão grátis e premium.

É um plugin de fácil utilização. Basta instalar e já está, desde que não pretendas mudar as configurações que surgem por omissão.

A versão grátis tem um limite de 100 imagens por mês. É um limite aceitável para um site de pequena dimensão mas insuficiente para lojas online ou sites de média e grande dimensão.

ShortPixel

O ShortPixel apresenta excelente níveis de compressão. Com versões grátis e comercial, tem mais definições que os anteriores mas isso não faz com que seja um plugin complexo.

A versão grátis também tem um limite de 100 imagens por mês.

Neste ponto é importante saberes que as compressões não são todas iguais…

Shortpixel fornece excelentes resultados mas envolve mexer em mais definições
Shortpixel fornece excelentes resultados mas envolve mexer em mais definições

As duas formas de compressão: losslessly ou lossy

Tecnicamente há duas formas de realizar a compressão das imagens e há uma melhor que outra em termos de qualidade.

A compressão losslessly passa por reorganizar os dados da imagem de forma a que fiquem compactados. Não há perda de dados nem de qualidade.

Já a compressão lossy envolve uma redução da qualidade da imagem, que pode ser ou não visível pelos utilizadores, dependendo das características da própria imagem. Na maior parte dos casos a perda de qualidade não será relevante. Com excepção de sites onde as imagens podem ser um elemento diferenciador, como fotógrafos, objectos de luxo, entre outros.

Conclusão

Há um número elevado de ferramentas e plugins para WordPress que ajudam a tratar e preparar as imagens para uma boa experiência por parte dos utilizadores do teu site. Todos sabemos que eles gostam de sites rápidos e eficientes (afinal todos nós gostamos do mesmo).

Não há, portanto, qualquer razão para os castigares apresentando imagens desnecessariamente grandes.

Agora é a tua vez. Usa o PageSpeed Insights, da Google, e descobre se tens imagens para optimizar. Aposto que sim.