As imagens podem ser mesmo o grande vilão quando o assunto é lentidão no carregamento do site. De agora em diante você não poderá mais se queixar deste problema, pois acaba de encontrar a o Guia Definitivo da Otimização de Imagens para Sites em WordPress!

Nunca mais perca visitantes por seu site ser lento para carregar. Siga este passo a passo e torne-se um expert no quesito de otimização de imagens para seu site em WordPress!

Índice

Por quê otimizar as imagens?

Qual formato utilizar?

Redimensionando as imagens antes de enviar para o site

Comprimindo Imagens

Por quê otimizar as imagens?

São inúmeros os motivos pelos quais se deve otimizar as imagens. Entre eles o principal sem dúvida é o melhoramento no tempo de carregamento do site. Mas tem muito mais…

  • O Google adora sites com imagens otimizadas, tem até uma ferramenta para analizar isto, o PageSpeed. Com imagens otimizadas seu site vai ter uma melhor avaliação na ferramenta
  • Seu site aparecerá em melhor posicionamento nos sites de busca
  • Com tempo de carregamento menor, mais e mais usuários irão acessar seu site
  • Você precisará de menor espaço no servidor de hospedagem, isso lhe poupará dinheiro
  • Os seus visitantes de dispositivos móveis, que são maioria hoje, irão gastar menos dados do plano e isso é muito bom

Creio que você agora está curioso para aprender como otimizar suas imagens não é? Ok. Vamos checar neste ponto logo logo.

Qual formado de imagem utilizar?

Existem dezenas de formatos de imagens, mas como padrão, o recomendado são os formatos JPEG ou PNG. Ambos são excelentes para se utilizar nas imagens do seu site. O formato JPEG suporta uma compressão maior que o PNG, no entanto o formato PNG suporta fundo transparente e o JPEG não. Além disto o formato PNG suporta transparências e é melhor para imagens pequenas e com muitos detalhes, como imagens de logomarcas por exemplo. Já o JPEG é mais indicado para imagens grandes, justamente por suportar uma melhor compressão do arquivo sem perder qualidade. Um formato que vem se tornando muito popular é o SVG, mas é preciso um pouco mais de conhecimento para poder usa-la. Uma vez que terá que manipular os bits da imagem diretamente no código HTML/CSS.

Redimencionando as imagens antes de enviar para o site

A escolha do formato correto já nos dá alguns kb extras, mas só isso ainda não é o suficiente. Precisamos analisar com cautela qual o tamanho correto, desta vez estou falando do tamanho como dimensão da imagem, não como seu tamanho em KB.

É muito comum nosso site ter algum tipo de miniatura que ao clicar se amplia para o tamanho real da imagem armazenada, o problema é que geralmente o que se faz é redimensionar a imagem da miniatura no código HTML, ou no caso dos construtores de página apenas colocando a imagem grande em um espaço pequeno, mas isso não diminui o tamanho real da imagem, apenas a redimensiona.

Tome como exemplo a imagem abaixo, o tamanho real dela é de 2560×1600 e o tamanho que quero apresentar na miniatura é de 385×240. O que devo fazer é redimensionar a imagem para colocar no lugar da miniatura e apontar o link para o arquivo de tamanho real.

Desta forma se evita que o redimensionamento seja feito no código HTML, o que trás um melhor desemprenho no carregamento da imagem, e faz com que o GooglePageSpeed por exemplo, lhe der uma nota melhor de performance.


Esta imagem tem 385×241 e não está sendo redimensionada pelo HTML, foi colocada no site já no tamanho ideal e o link aponta para o arquivo real no tamanho 2560×1600. Em resumo temos 2 imagens diferentes, uma para a miniatura com apenas 13KB e o arquivo original em tamanho real com quase 300KB. Estes 300kb só serão carregados se a imagem for clicada. Evite sempre que possível redimensionar as imagens no código HTML.

Qual o melhor compressor online?

Agora vamos para a parte prática. Como comprimir suas imagens antes de enviar para o site? Vamos começar pelos compressores online. Existem dezenas e dezenas deles, no entanto vou me ater a uns poucos exemplos pois a maioria usa o mesmo algoritmo de compressão o que muda é apenas a interface com o usuário.

Vou falar um pouco sobre os principais que uso, isso quando não estou trabalhando no meu MacBook Pro, pois nele uso um software desktop, o ImageOptim para Mac.

Como falei, existem dezenas e dezenas de ferramentas online para comprimir imagens. Se a sua preferida não está na lista, comenta aí. Apresenta ela pra gente. Valeu!

TinyPNG

O TinyPNG usa técnicas inteligentes de compactação com perdas para reduzir o tamanho do arquivo de suas imagens PNG. Ao diminuir seletivamente o número de cores na imagem, menos bytes são necessários para armazenar os dados. O efeito é quase invisível, mas faz uma grande diferença no tamanho do arquivo!


Sem dúvidas esta é uma ferramenta muito fácil de usar e por isso está na primeira posição em minha opinião. Não há opções de configurações. Apenas arraste a imagem ou imagens que deseja comprimir e a mágica acontece. O TinyPNG comprime tanto PNG quanto JPEG. Você enviar até 20 imagens de uma só vez e baixa todas em um único arquivo zipado. Isto é ótimo!

No momento em que estou escrevendo este post, o TinyPNG está celebrando 1.000.000.000 (1 bilhão) de imagens comprimidas.

Compressor

Compressor.io é uma poderosa ferramenta online para reduzir drasticamente o tamanho de suas imagens e fotos, mantendo uma alta qualidade sem quase nenhuma diferença antes e depois da compressão.


Esta ferramenta de compressão suporta não só PNG e JPEG. GIF e SVG também podem ser comprimidos com ela. Confesso que a acho um pouco mais lenta que o TinyPNG, mas por comprimir mais formatos, vale a pena o uso. Promete comprimir em até 90% as suas imagens. Mas pode se contentar se conseguir 50 ou 60%. O único ponto fraco desta ferramenta é ela não suportar o envio de várias imagens de uma só vez. :(

Optimizilla

Este otimizador de imagens online utiliza uma combinação inteligente dos melhores algoritmos de otimização e compressão para reduzir as imagens JPEG e PNG ao menor tamanho possível mantendo o nível de qualidade desejado.


Da mesma forma que o TinyPNG, o Optimizilla suporta o envio de até 20 imagens simultâneas. O que facilita o trabalho na hora de comprimir muitas imagens. A interface tem suporte à vários idiomas.

Kraken

O Kraken.io é um otimizador de imagens e compressor robusto e ultra-rápido, com os melhores algoritmos da categoria.
Economizaremos largura de banda e espaço de armazenamento e melhoraremos drasticamente os tempos de carregamento de seu site.


Asim como o TinyPNG, o Kraken é uma ferramenta que disponibiliza também uma versão paga. Mas a interface web é gratuita e resolve os problemas. Tem um dos melhores algoritmos de compressão que testei.

Na versão PRO, o painel oferece dezenas de configurações bem interessantes. No momento em que escrevo este post, o Kraken já tem mais de 2 bilhões e 300 milhões de imagens comprimidas!

Devo utilizar plugins para otimizar as imagens?

Confesso que não sou o maior fã de plugins para WordPress, e sempre que possível procuro não utilizá-los. No entanto, sei que há ótimos plugins para a otimização de imagens. A principal vantagem em se utilizar plugins é que você não precisará submeter suas imagens para o site todas as vezes que as otimizar. Veja abaixo os principais que testei:

Compress JPEG & PNG images by TinyPNG

Muito semelhante a ferramenta online. Simples e direto ao ponto. Feita a instalação, ativação e registro do plugin, o resto são configurações mínimas. Agora basta arrastar as imagens para dentro da área indicada e a mágica novamente acontece! Um recurso interessante deste plugin é que todas as novas imagens enviadas serão automaticamente compactadas.


Imagify by WP Media

Apos instalar, ativar e se registrar, você terá alguma opções de configuração para escolher. Tudo muito simples. Um coisa legal neste plugin é que ele coloca as imagens compactadas em uma pasta separada das imagens originais. Então se algo der errado é só usar as imagens originais de novo.

O estranho é que para ver as imagens compactadas você terá que alterar o modo de exibição de mídia do WordPress para lista. De reseto este é um ótimo plugin para compactação de imagens.


WP Smush – Versão Free

Este é da velha guarda. Um dos plugins de compressão mais antigos para WordPress. A principal vantagem dele diante dos concorrentes e a não necessidade de registro. Basta instalar e ativar e já está pronto para uso! Depois de corretamente configurado é um plugin que você esquece, pois ele faz todo o trabalho em segundo plano. Suas imagens serão compactadas automaticamente a medida que você as for enviando. Minha Escolha, isso se eu fosse utilizar um plugin para este fim. :)


ShortPixel Image Optimizer

Este plugin não é tão famoso e quanto o Smush por exemplo, mas tem um dos melhores algoritmos de compressão entre todos os testados. Mesmo com as configurações padrão ele oferece uma ótima compressão e mantem máxima qualidade. Isto é especialmente bom se você é fotógrafo e suas imagens precisam ser apresentadas com maior qualidade possível. Recomendo.


Conclusão

Este foi um post um pouco longo. Mas creio que vale a pena a leitura pois lhe auxilia bastante no entendimento de porque compactar suas imagens para deixar seu site mais rápido. Em alguns testes que fiz consegui compactação de mais de 90% sem perda visível na qualidade da imagem.

Vamos fazer um recapitulação rápida para fixar o aprendizado:

  • Selecione o formato correto da imagem
  • Redimensione a imagem antes de enviar para o site
  • Compacte a imagem antes de mandar para o site

Um outro ponto importante a ser observado é que você nunca deve compactar a imagem antes de mandar para o WordPress se você já usa algum plugin para fazer a compactação. Pois cada compactação implica em perda de qualidade, mesmo que imperceptível. Então se você compacta a imagem online ou no PC/MAC e depois manda para o WordPress que já tem um plugin para isto, a imagem será novamente compactada. Dupla compactação implica em perda perceptível de qualidade.Agora você não tem mais desculpas para não compactar suas imagens e deixar seu site muito mais rápido, pois tudo que precisa saber sobre isto está neste guia.

Seja o primeiro a saber das novidades

Últimos Posts

Últimos Posts