O melhor guia para otimização de imagens para WordPress

1 … 2 … 3 … – seu cliente em potencial acabou de fechar seu site porque ainda está carregando. Soa familiar? Acredito que você foi aquele visitante impaciente e frustrado muitas vezes. Eu sei que fui. É por isso que compilei uma lista definitiva de coisas que você precisa saber sobre otimização de imagem. Vai ser longo, mas espero que você ache que vale a pena ler.

Índice

• O conteúdo deste artigo em vídeo de 3 minutos
• Benefícios da otimização de imagem
• Formatos de imagem
• Redimensionar imagens antes de enviar
  • Plugin Imsanity WordPress para redimensionar imagens automaticamente
• Como compactar imagens
  • Melhores ferramentas on-line para compactação de imagens
    • TinyPNG
    • Optimizilla
    • Compressor
    • ImageOptim
    • ImageSmaller
    • Kraken
    • JPEG.io
    • Informações do PageSpeed
    • Resultados da Melhor Ferramenta de Compressão Online
    • Melhor ferramenta de compactação online para JPEGs
    • Melhor ferramenta de compactação online para PNGs
    • Melhor Ferramenta de Compressão de Imagem Online em geral
  • Melhores plugins do WordPress para compactação de imagens
    • WP Smush (versão gratuita)
    • Comprimir imagens JPEG e PNG por TinyPNG
    • ShortPixel
    • Imagify
    • EWWW Image Optimizer (versão gratuita)
    • Resultados do Melhor Plugin WordPress para Compressão de Imagens
    • Melhor plugin WordPress para compactar JPEGs
    • Melhor plugin WordPress para compactar PNGs
    • Melhor plugin WordPress para compactação de imagens em geral
• Conclusão

O conteúdo deste artigo em vídeo de 3 minutos

Aqui está uma visão geral em vídeo muito rápida deste artigo. Eu ainda recomendo a leitura, mas só para provocá-lo o suficiente, aqui vamos nós:

Benefícios da otimização de imagem

Você ainda não está convencido de toda essa coisa de otimização de imagem? Vejamos todos os benefícios que você obterá se apenas corrigir esse pequeno e trivial problema:

• Seu site será mais rápido
• Sua pontuação no Google PageSpeed ​​será melhor
• O Google vai gostar mais de você e seus rankings nos mecanismos de pesquisa melhorarão
• Sua taxa de rejeição será menor e mais visitantes verão sua página
• Você precisará de menos armazenamento em seus servidores e gastará menos recursos em servidores, o que economizará dinheiro
• Você economizará dinheiro do plano de dados móveis para você e seus visitantes

Eu tenho sua atenção agora, certo? Agora podemos começar com o trabalho real.

Formatos de imagem

A otimização de imagem começa com alguns conhecimentos básicos sobre formatos de imagem. Os dois formatos mais comuns na internet são PNG com extensão .png e JPEG com extensão .jpg . Usarei JPEG na maioria dos casos, pois é o melhor formato para fotos, imagens com gradientes e imagens com milhões de cores. Por outro lado, o PNG é melhor com imagens coloridas limitadas, como logotipos, e com imagens com transparência.

O próximo exemplo mostrará a você o quão importante é escolher o formato de imagem certo para a melhor otimização de imagem.

Vou salvar nossa imagem child.jpg não otimizada nos formatos .jpg e .png . Podemos ver que a imagem child-saved-as-jpeg.jpg tem 3,1 MB e a imagem child-saved-as-png.png tem 4,5 MB. Nesse caso, a imagem PNG ficou 45% maior que a imagem JPEG, diferença que deriva simplesmente da escolha de um formato de imagem específico. Não há maneira mais fácil de economizar tanto espaço com tão pouco esforço. Bem, talvez haja. Vamos dar uma olhada no próximo passo.

Redimensionar imagens antes de enviar

Economizamos algum espaço escolhendo o formato de imagem correto em nosso exemplo anterior, mas podemos economizar ainda mais espaço se redimensionarmos a imagem antes de carregá-la. Mas quanto devemos redimensioná-lo? Realmente depende da largura e do contêiner do seu site.

Em nosso site ProteusThemes, a largura máxima da imagem é 1110 px, então redimensionarei a imagem atual child.jpg , que tem 1800 px de largura, para 1110 px de largura. Nesse caso, passamos de 3,1 MB para 1,1 MB de tamanho, o que representa mais 65% de espaço economizado e reduzido .

Dica: Você pode redimensionar imagens diretamente em sua biblioteca de mídia do WordPress. Clique em Mídia -> Selecione sua imagem -> Editar imagem e escolha novas dimensões para sua imagem:

Plugin Imsanity WordPress para redimensionar imagens automaticamente

Se você não quiser pensar em redimensionar imagens ou se muitos usuários diferentes fizerem upload de imagens para o seu site, o plugin Imsanity deve funcionar perfeitamente para você. Nas configurações do plugin, você pode escolher a largura ou altura máxima que as imagens devem ter e o plugin redimensionará todas as imagens maiores para esse tamanho. Você também pode selecionar o recurso de redimensionamento em massa para redimensionar todas as imagens existentes. Eu definitivamente recomendo este plugin para qualquer pessoa que tenha problemas em redimensionar cada imagem separadamente antes de carregá-la. Você pode baixar o plugin Imsanity gratuitamente.

Como compactar imagens

Agora que aprendemos o básico da otimização de imagens, vamos ver como podemos melhorar nosso jogo. Podemos encontrar inúmeras ferramentas online de compressão de imagens na internet e até plugins do WordPress , que irão reduzir o tamanho da sua imagem. Mas temos que ter cuidado aqui, algumas das ferramentas quase não farão diferença e algumas das configurações destruirão nossa imagem e a tornarão inútil. Então, como encontrar o equilíbrio perfeito? Não se preocupe, no momento da redação deste artigo (junho de 2017, atualizado em 2018), testamos todas as ferramentas/serviços online mais populares e plugins do WordPress para otimização de imagens e selecionamos os melhores.

Usamos 3 imagens JPEG diferentes e 1 imagem PNG para realizar nosso teste.

Todas as 3 imagens JPEG são do Unsplash, dos autores Mi Pham, Breather, Denise Chan e Niko Virtanen. Eles foram cortados e redimensionados para 1110 x 624 px para fins de teste.

Para imagem PNG, criamos nossa própria imagem com o logotipo ProteusThemes e algum padrão por trás dele. Assim como as imagens de teste JPEG, esta também é redimensionada para 1110 x 624 px.

Vamos agora colocar todas as imagens em todas as ferramentas e plugins selecionados para compactação e descobriremos qual é o melhor para você usar. Vamos começar com ferramentas online.

Melhores ferramentas on-line para compactação de imagens

No momento da redação deste artigo (junho de 2017, atualizado em 2018), aqui está uma lista completa das ferramentas e serviços online mais populares para compactação de imagens:

• TinyPNG
• Optimizilla
• Compressor
• ImageOptim
• ImageSmaller
• Kraken
• JPEG.io
• Informações do PageSpeed

Se você acha que alguma outra ferramenta merece estar nessa lista, avise-nos, vamos testá-la e adicioná-la à lista. Você pode encontrar minhas análises de cada ferramenta abaixo, além de minha avaliação das melhores. Se você não quiser ler sobre cada ferramenta individualmente, clique aqui – Mostre-me os vencedores!

TinyPNG

TinyPNG foi uma das primeiras ferramentas de compressão de imagem que usei e ainda uso algumas vezes. Não há opções, basta fazer o upload das imagens e você as compactará. Com esta ferramenta online, você pode fazer upload em massa de até 20 imagens com o tamanho de 5 MB.

Optimizilla

Optimizilla é outra ferramenta online simples, mas poderosa. É gratuito e tem a opção de fazer upload em massa de até 20 imagens. Para melhor relação compressão/qualidade, deixamos a configuração de qualidade em 90, como é por padrão. Se você quiser aumentar ainda mais a compactação, basta alterar essa configuração e verá as alterações na qualidade imediatamente.

Compressor

O Compressor tem potencial para se tornar uma das melhores ferramentas para compressão de imagens, mas tem uma grande falha. No momento, não há opção para upload em massa, o que significa que você só pode compactar 1 imagem por vez. Fora isso, é grátis, fácil de usar e com duas opções de compactação. Usamos a opção com perdas em nosso teste, pois a qualidade da imagem ainda permanece a mesma após a compactação.

ImageOptim

ImageOptim é uma ferramenta com muitas configurações. Você pode escolher entre 3 opções de qualidade diferentes e 3 opções de qualidade de cor diferentes. Descobrimos que os melhores resultados de compactação/qualidade estão com as configurações padrão. Defina a qualidade como média e a qualidade da cor como automática. O que mais me incomodou com o ImageOptim , ao lado do design pouco desatualizado, foi que exporta JPEGs mesmo se eu fizer upload de PNGs . Enviei um e-mail ao Kornel (criador do ImageOptim) sobre esse problema e ele já o corrigiu.

ImageSmaller

Assim como no Compressor , o ImageSmaller tem a mesma falha. Não há opção para upload em massa. No entanto, possui um dos maiores limites de upload, com os 50 MB. Se você tiver arquivos maiores para otimizar, o ImageSmaller pode ser a ferramenta certa para você.

Kraken

Kraken é uma ferramenta de compressão de imagem premium, com o melhor painel entre todas as ferramentas que testei. Você encontrará uma interface web agradável para fazer upload de suas imagens e muitas configurações diferentes para obter os melhores resultados. Usamos suas configurações padrão com perdas em nosso teste.

JPEG.io

JPEG.io é uma versão gratuita da mesma ferramenta do Kraken . Ele tem os mesmos recursos de compactação, mas como o URL do site nos diz, é apenas para JPEGs.

Informações do PageSpeed

Você não esperava ver este aqui, certo? O PageSpeed ​​Insights também nos fornece um .zip de arquivos compactados quando estamos testando nosso site. Essa não é a maneira mais amigável, pois você já terá que ter seu site online com todas as imagens e depois substituí-las pelas novas compactadas, mas obterá imagens compactadas como o Google deseja.

Resultados da Melhor Ferramenta de Compressão Online

Abaixo você encontrará gráficos com resultados de todos os nossos testes. Você também pode verificar nossa planilha detalhada para obter mais informações.

Melhor ferramenta de compactação online para JPEGs

A maioria das ferramentas comprimiu nossos JPEGs de teste em cerca de 80% . Vamos dar uma olhada na nossa imagem child.jpg . Começamos com uma imagem de 3,1 MB e após o redimensionamento e compactação nossa imagem ficou com apenas 165 KB, o que significa 95% menor em tamanho . Agora, isso é uma diferença! Conseguimos obter os mesmos resultados com Compressor e ImageOptim . Então, parece que temos dois vencedores aqui.

Melhor ferramenta de compactação online para PNGs

Para nosso teste de PNG, obtivemos uma média de 50% de redução de tamanho com todas as ferramentas. No entanto, o Optimizilla foi um pouco melhor do que o resto deles, com 56% de redução do tamanho da nossa imagem pt-logo.png .

Melhor Ferramenta de Compressão de Imagem Online em geral

Mesmo que o Optimizilla não fosse a melhor ferramenta de compactação para JPEGs, eu o recomendaria como a melhor ferramenta de compactação atualmente disponível online. JPEGs compactados com 79% ainda são incríveis e você pode aumentar ainda mais, com uma configuração simples de qualidade na página. Ele também tem uma opção para upload em massa, onde falta o Compressor e upload mais confiável, do que ImageOptim , onde todas as imagens são exportadas como JPEGs, mesmo que PNGs estejam entre eles. Por tudo isso, acho que o Optimizilla merece o título de melhor ferramenta de compressão de imagens online.

Em seguida, vamos ver se os plugins do WordPress podem superar as ferramentas de compressão de imagem online.

Melhores plugins do WordPress para compactação de imagens

Qual é a diferença entre ferramentas de imagem online e plugins do WordPress? Bem, se você usar ferramentas de imagem online para compactação de imagens, ainda precisará fazer upload dessas imagens para o seu site WordPress e usá-las. Se você preferir ter tudo em um só lugar, o plugin WordPress para compressão de imagens pode ser o caminho a percorrer. A maioria dos plugins também tem a opção de otimizar imagens com o upload, para que você possa ativar essa configuração e esquecer qualquer trabalho adicional.

Eu fiz um novo site WordPress para cada plugin e carreguei as mesmas 4 imagens todas as vezes. Diferentes plugins têm configurações diferentes, então eu estava procurando o equilíbrio perfeito entre compressão e qualidade de imagem.

Testei os seguintes plugins:

• WP Smush (versão gratuita)
• Comprimir imagens JPEG e PNG por TinyPNG
• ShortPixel
• Imagify
• EWWW Image Optimizer (versão gratuita)

Como eu mencionei antes, se você conhece algum outro plugin que devemos testar, avise-nos e vamos adicioná-lo à lista. Se você não quiser saber mais sobre esses plugins, clique aqui – Mostre-me os vencedores!

WP Smush (versão gratuita)

O WP Smush é um dos plugins mais antigos para compactação de imagens que conheço. Ele tem uma boa vantagem em relação a todos os outros plugins, já que não há necessidade de registro para usar uma versão gratuita. Ele também tem uma opção para compactar automaticamente as imagens recém-carregadas, então, uma vez que o plug-in esteja definido, você pode esquecê-lo e ele fará todo o trabalho para você em segundo plano. Infelizmente, os resultados de compactação foram um dos piores na versão gratuita, então eu não recomendaria usá-lo. Eles afirmaram em seu site que a versão pro está comprimindo muito melhor, então também testarei esta na próxima atualização do artigo.

Comprimir imagens JPEG e PNG por TinyPNG

Assim como a ferramenta de compressão online TinyPNG , o plugin WordPress também é muito simples. Depois de passar pelo registro, ele tem configurações mínimas e está basicamente funcionando imediatamente. Todas as imagens recém-carregadas também podem ser compactadas automaticamente, para que você possa ativar o plug-in e esquecê-lo.

ShortPixel

O ShortPixel foi, pessoalmente, uma das maiores surpresas. Eu nunca tinha ouvido falar dele antes da minha pesquisa e fiquei realmente impressionado. Com as configurações padrão recomendadas com perdas, ele tem os melhores resultados de compactação entre os plugins do WordPress e também possui uma opção brilhante. Esta opção é para fotógrafos ou quaisquer outros profissionais, que precisam de fotos de altíssima qualidade e não podem comprometer a perda de qualidade.

Imagify

Imagify é um plugin, feito pelas mãos dos famosos autores de plugins WP Rocket . Após o registro, você terá algumas opções claras para escolher. Para a melhor compressão de ração e qualidade de imagem, escolha o modo agressivo. Uma coisa legal nas configurações também é a opção de ter uma pasta separada para as imagens originais, caso algo dê errado com a compactação. A única coisa que não entendi completamente é por que devemos alternar para o modo de exibição de lista na mídia para ver os resultados da compactação. Fora isso, o Imagify é um plugin muito bom e sólido.

EWWW Image Optimizer (versão gratuita)

O EWWW Image Optimizer foi o único plugin, o que me deu alguns erros. Em primeiro lugar, tentei em minha própria hospedagem e recebi um erro, que o EWWW Image Optimizer requer exec() ou chave de API. A próxima vez que tentei o plugin no meu site WordPress de desenvolvimento local e recebi um erro de que estou perdendo o pngout. Segui as instruções de como instalá-lo e o plugin finalmente ficou pronto para teste. Desde que testei a versão gratuita, havia apenas uma opção sem perdas, o que não levou aos melhores resultados. Assim como com o WP Smush, também testarei a versão pro do EWWW Image Optimizer na próxima atualização do artigo e veremos se ele terá um desempenho melhor.

Resultados do Melhor Plugin WordPress para Compressão de Imagens

Assim como antes, você encontrará gráficos com os resultados de todos os nossos testes abaixo. Você também pode verificar nossa planilha detalhada para obter mais informações.

Melhor plugin WordPress para compactar JPEGs

ShortPixel foi o vencedor, com média de 84% de compressão . O mesmo que Compressor e ImageOptim na categoria de melhor ferramenta de compressão online. O segundo melhor plugin foi o Imagify , com média de 70% de compressão . Declaro que o ShortPixel é atualmente o vencedor absoluto dessa categoria.

Melhor plugin WordPress para compactar PNGs

O melhor plug-in de compactação PNG é chamado de compactar imagens JPEG e PNG da TinyPNG , com 56% de compactação . Curiosamente, o melhor resultado é, novamente, o mesmo da categoria de melhor ferramenta de compressão online. No entanto, outros plugins foram um pouco mais competitivos aqui, com a compactação de cerca de 50% .

Melhor plugin WordPress para compactação de imagens em geral

Na minha opinião, a melhor relação entre experiência do usuário, diferentes configurações e compressão, foi do plugin ShortPixel . No geral, é um plugin muito sólido, com muitas opções, mas também com ótimas configurações padrão. Você pode começar a usar o plugin imediatamente após o registro e, o mais importante, a compactação é ótima. No momento, eu usaria o plugin ShortPixel para meu próprio site, especialmente se a maioria das imagens for JPEGs.

Conclusão

Essa foi uma longa viagem, certo? Enquanto isso, conseguimos compactar nossa imagem child.jpg em até 95% . Seu site pode funcionar muito mais rápido, se você seguir apenas estes 3 passos simples . Vamos repeti-los novamente:

• Selecione o formato de imagem correto
• Redimensione a imagem antes de enviar
• Comprima a imagem com as ferramentas online ou plugins do WordPress

Outra coisa importante é que você use apenas uma ferramenta ou plugin WordPress para cada imagem, já que a maioria deles tem algum tipo de compressão com perdas, o que significa que a qualidade da sua imagem pode piorar a cada compressão adicional e isso é algo que não fazemos. não quero. Também adicionamos todas as imagens de teste no GitHub se você quiser verificar a comparação de qualidade entre elas ou testar algumas outras ferramentas e plugins por conta própria.

Você não deve ter mais desculpas para não compactar suas imagens. Existem muitas ferramentas e maneiras diferentes de fazer isso e nós provamos que no final vale a pena. Escolha seu próprio vencedor pessoal para compactação online ou plugin WordPress e verifique a pontuação do Google PageSpeed ​​do seu site antes e depois da otimização. Compartilhe as informações sobre a velocidade do seu site e a melhoria da pontuação em nossa seção de comentários. Também gostaria de saber se este artigo o ajudou com a otimização de imagens e quais são seus pensamentos sobre isso.