De acordo com o Arquivo HTTP, em dezembro de 2018, as imagens representavam mais de 40% do peso médio das páginas de um site em desktops e dispositivos móveis. Isso é enorme! 😮 Quando se trata do novo índice e desempenho do mobile-first, a optimização de imagens desempenha um papel crucial na rapidez com que o seu site WordPress será capaz de carregar. A compressão de imagens é uma das otimizações mais fáceis que você pode implementar e que, por sua vez, também terá o maior impacto. Essencialmente, isso implica diminuir o tamanho do arquivo de suas imagens usando duas formas populares de compressão: com e sem perdas.

Hoje vamos mergulhar em ambos os tipos de compressão de imagem e discutir qual deles recomendamos que você use. Isso pode variar de acordo com o tipo de negócio que você opera.

Compressão com Perda

A primeira forma de compressão é com perdas. A compressão com perda de dados envolve a eliminação de alguns dos dados da sua imagem. Por causa disso, isso significa que você pode ver degradação (redução na qualidade ou o que alguns chamam de pixelização). Por isso tens de ter cuidado com o quanto estás a reduzir a tua imagem. Não só devido à qualidade, mas também porque você não pode reverter o processo. Naturalmente, um dos grandes benefícios da compressão com perda de dados e porque é um dos métodos de compressão mais populares é que você pode reduzir o tamanho do arquivo em uma quantidade muito grande.

  • JPEGs e GIFs são ambos formatos de imagem com perdas.
  • JPEGs são ótimos para sites que precisam de tempos de carregamento rápidos, pois você pode ajustar o nível de qualidade para um bom equilíbrio entre qualidade e tamanho do arquivo.

(Sugestão de leitura: JPG vs JPEG: Entendendo o formato de arquivo de imagem mais comum)

WordPress Comprime automaticamente imagens

Você sabia que o WordPress comprime automaticamente seus JPEGs quando você os envia para a biblioteca de mídia? Por padrão, o WordPress tem imagens compactadas automaticamente até 90% do seu tamanho original. No entanto, a partir do WordPress 4.5, eles aumentaram para 82% para aumentar ainda mais o desempenho em todos os setores. Se você está se perguntando por que suas imagens parecem um pouco pixeladas em uma instalação WordPress nova, é por isso.

Embora a compactação automática seja excelente, temos visto que 82% não é, de forma alguma, suficiente quando se trata de realmente causar um impacto no desempenho do seu site. Assim, pode desativar esta opção se quiser, adicionando o seguinte filtro ao ficheiro functions.php do seu tema. Lembre-se, sempre faça um backup antes de editar seu site.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Se quiser aumentar a taxa de compressão automática do WordPress, pode adicionar o filtro e reduzir a percentagem do ficheiro original, tal como 70% no exemplo abaixo.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Lembre-se, estas não irão impactar imagens já carregadas. Você precisaria atravessar com um plugin como Regenerate Thumbnails para que ele possa aplicá-lo à sua biblioteca de mídia existente. Ou melhor ainda, recomendamos simplesmente deixar seu tema em paz e simplesmente usar um plugin de otimização de imagem do WordPress (no qual iremos mergulhar mais abaixo) ou comprimir ainda mais suas imagens antes de carregá-las.

Comprimir imagens com Save for Web (Software)

Você pode usar ferramentas como o Adobe Photoshop, Affinity Photo, Affinity Designer ou outros editores de imagem para ajustar as configurações de qualidade de uma imagem (como visto abaixo). Na maioria das ferramentas, isto está em “Salvar na web” ou “Exportar configurações”.

Alterar a qualidade da foto

Alterar a qualidade da foto

Se fizermos uma pequena comparação das taxas de compressão com perdas, podemos ver que 50% parece ótimo. 33% está começando a ficar um pouco borrado em alguns dos detalhes do fundo (mas não será notado), e 5%, obviamente, não é aceitável. Este é apenas um exemplo de porque o 82% automático no WordPress não é suficiente. Você pode e deve compactar em taxas muito mais altas para diminuir ainda mais o tamanho dos arquivos.

  • original.JPG 2.82 MB (2,000 px por 1463 px)
  • perda-comprimida-1.JPG: 227 KB (2.000 px por 1463 px) 91,95% de redução
  • Comprimido com perdas -2.JPG: 185 KB (2.000 px por 1463 px) Redução de 93,44%.
  • perda-comprimida-3.JPG: 5 KB (2.000 px por 1463 px) Redução de 99,82%
Comparação de compressão com perda

Comparação de compressão com perda

Digamos que opte pelo comprimido a 50%. O tamanho do arquivo é de 227 KB, que é definitivamente muito menor do que o arquivo original de 2+ MB. No entanto, ainda não é ótimo se esta for apenas uma das 15+ outras imagens em uma página. Geralmente, é melhor manter todas as suas imagens abaixo de 100 KB, se possível. Nos meus casos, devias ser capaz de ir muito mais pequeno. Então é aqui que também é importante redimensionar as suas imagens. A imagem 50% redimensionada primeiro para 1251 px por 916 px é apenas 95 KB.

Mas lembre-se, você pode não querer dimensionar suas imagens para baixo todo o caminho, porque a partir do WordPress 4.4, ele agora tem suporte para imagens responsivas (não dimensionadas para baixo por CSS). O WordPress cria automaticamente vários tamanhos de cada imagem carregada para a biblioteca de mídia. Ao incluir os tamanhos disponíveis de uma imagem em um atributo srcset, os navegadores podem agora optar por baixar o tamanho mais apropriado e ignorar os outros. Veja abaixo um exemplo de como seu código realmente se parece.

srcset responsivo imagens exemplo em código

srcset responsivo imagens exemplo em código

Então, com mais e mais HiDPI exibe hoje em dia, pode ser bom para encontrar um meio feliz. Diga 2x ou 3x o tamanho da coluna ou div do seu site, mas ainda assim menor que o tamanho original. O navegador mostrará o correto com base na resolução do dispositivo.

Google recomenda a compressão com perdas

Você usa o Google PageSpeed Insights? Se assim for, você provavelmente está familiarizado com o aviso que diz para “Optimizar Imagens”. Em 2017, o Google realmente atualizou sua documentação para recomendar o uso de compressão com perdas como uma forma de acelerar ainda mais o seu site.

Google PageSpeed Insights otimiza o aviso de imagens

Google PageSpeed Insights otimiza o aviso de imagens

Se você quiser se livrar desses avisos, uma das maneiras mais fáceis é usar compressão com perdas para apaziguar o Google.

Compressão sem perdas

Agora é hora de mergulhar na segunda forma de compressão que é sem perdas. A compressão sem perda, ao contrário da perda, não reduz a qualidade da imagem. Como é que isto é possível? Geralmente é feito removendo metadados desnecessários (dados gerados automaticamente pelo dispositivo que captura a imagem). No entanto, a maior desvantagem deste método é que você não verá uma redução significativa no tamanho do arquivo. Em outras palavras, ele ocupará muito espaço em disco ao longo do tempo.

  • RAW, BMP, GIF e PNG são formatos de imagem sem perdas.
  • Você pode realizar uma compressão sem perdas em sua área de trabalho usando ferramentas como Photoshop, FileOptimizer ou ImageOptim.
  • Alguns plugins aplicam o Gzip compression às imagens (minificam-nas).

Se fizermos uma pequena comparação das taxas de compressão com perdas, podemos ver que ao usar a compressão sem perdas você não perde nenhuma qualidade. No entanto, o tamanho do ficheiro da imagem foi reduzido apenas em 10,84%. Isto é comparado a mais de 90% quando se usa compressão com perdas.

  • original.JPG: 227 KB (2.000 px por 1463 px)
  • JPG: 203 KB (2.000 px por 1463 px)
Comparação de compressão sem perdas

Comparação de compressão sem perdas

Qual método de compressão é melhor?

A resposta a isto depende de ti. Para a maioria dos usuários, recomendamos usar compressão com perdas devido ao fato de que você pode facilmente comprimir uma imagem bem acima de 70% (às vezes até mais de 90%!) sem muita perda de qualidade. Multiplique isto por 15 imagens numa página e terá um papel significativo na redução do tempo de carregamento do seu site. Não só isso, mas também a compressão com perdas irá garantir que você utilize o mínimo de espaço em disco possível. O que, por sua vez, significa que você pode economizar dinheiro em hospedagem.

A compressão sem perdas é para aqueles que não podem pagar nenhuma perda de qualidade. Fotógrafos, blogueiros de alimentos e modelos são apenas alguns que vêm à mente e que dependem de imagens pixel-perfeito para ganhar a vida. Nesses casos, é essencial que você esteja hospedando suas imagens em uma CDN. Devido ao tamanho, talvez você precise até mesmo transferi-los para um serviço de armazenamento de terceiros, como o Amazon S3 ou o Google Cloud Storage.

Como Usar a Compressão com Perda no WordPress

Se você ainda está confuso entre com perda e sem perdas não se preocupe, há um monte de plugins WordPress otimização de imagem grande que você pode escolher entre que automaticamente aplicar compressão com perdas:

Nota: todos os listados acima utilizam seus próprios servidores de terceiros para comprimir imagens. Você deve sempre compactar imagens em massa fora do local por razões de desempenho. 👍

Nós usamos o Imagify no blog da Kinsta e por isso vamos mostrar-lhe como funciona. Eles têm um plano gratuito, mas até mesmo seus planos profissionais têm preços muito razoáveis. Nós otimizamos algumas imagens e estamos usando o plano “Lite” (1 GB por mês) muito bem. Paga anualmente e é menos de 4,25 dólares por mês.

A Imagify tem três níveis de optimização diferentes:

  • Normal: Este modo utiliza compressão sem perdas, o que significa que as suas imagens não perderão qualidade, mas também não serão reduzidas tanto em tamanho.
  • Agressivo: Este modo utiliza compressão com perdas e proporciona poupanças drásticas no peso inicial, com uma pequena redução na qualidade da imagem. A maior parte do tempo nem sequer é perceptível.
  • Ultra: Este modo utiliza compressão com perdas e aplica todas as otimizações disponíveis para a compressão máxima da imagem. Isto irá proporcionar uma enorme economia no peso inicial, mas você provavelmente irá notar alguma degradação da imagem.
Imagine configurações

Imagine configurações

Usamos o modo Agressivo em Kinsta e normalmente vemos 60-70% de economia dependendo da imagem. Nota: nós realmente usamos muito mais PNGs do que JPEGs devido ao fato de que a maioria das nossas imagens são ícones e ilustrações, não fotos.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
Economia de arquivo de compressão de imagem

Economia de arquivo de compressão de imagem

Você pode habilitar a otimização automática de imagens no upload (que recomendamos para que você não se esqueça) ou usar seu otimizador de imagem em massa na biblioteca de mídia. Você também pode fazer o backup da imagem original. Isso permite que você realmente converta sua imagem para outros níveis de otimização em um momento posterior ou mesmo restaurar sua imagem original. Se você não usar esse recurso, recomendamos mantê-lo desligado para economizar espaço em disco.

Você deve tipicamente redimensionar suas imagens com antecedência, mas o Imagify tem um recurso de redimensionar imagens maiores caso você esqueça ou não tenha tempo. Além da compressão com perdas, este é outro grande poupador de tamanho de arquivo!

Imagine redimensionar imagens

Imagine redimensionar imagens

Nós, na verdade, apenas recentemente usamos o recurso de otimização de imagem em massa em toda a nossa biblioteca de mídia WordPress. Como pode ver, raspou mais de 700 MB! Isto é enorme quando se trata de desempenho de front-end.

Economia na otimização de imagens em massa

Economia na otimização de imagens em massa

Testes de Velocidade

Vamos fazer um pequeno teste! Devido ao fato de vermos constantemente os usuários carregando imagens com resolução total sem compressão, faremos uma pequena comparação sobre o impacto que isso tem no desempenho geral do seu site.

Teste 1 – Original descomprimido

Primeiro enviámos 10 imagens não comprimidas. Depois fizemos 5 testes no Pingdom e fizemos a média. Podemos ver que o tempo total de carregamento é de 3,04 segundos com um tamanho total de página de 28,4 MB.

  • uncompressed-1.jpg (2.82 MB)
  • uncompressed-2.jpg (2.82 MB)
  • uncompressed-3.jpg (2.82 MB)
  • uncompressed-4.jpg (2.82 MB)
  • uncompressed-5.jpg (2.82 MB)
  • uncompressed-6.jpg (2.82 MB)
  • uncompressed-7.jpg (2.82 MB)
  • uncompressed-8.jpg (2.82 MB)
  • uncompressed-9.jpg (2.82 MB)
  • uncompressed-10.jpg (2.82 MB)
Ensaio de velocidade sem compressão

Ensaio de velocidade sem compressão (Pingdom)

Teste 2 – Comprimido

Nós então carregamos as mesmas imagens exatas novamente, mas desta vez nós habilitamos “auto-optimizar” no plugin Imagify. Fizemos então 5 testes novamente no Pingdom e fizemos a média.

  • compressed-1.jpg (69.3 KB)
  • compressed-2.jpg (69.3 KB)
  • compressed-3.jpg (69.3 KB)
  • compressed-4.jpg (69.3 KB)
  • compressed-5.jpg (69.3 KB)
  • compressed-6.jpg (69.3 KB)
  • compressed-7.jpg (69.3 KB)
  • compressed-8.jpg (69.3 KB)
  • compressed-9.jpg (69.3 KB)
  • compressed-10.jpg (69.3 KB)

Podemos ver que o tempo total de carga é agora de 522 ms com um tamanho total de página de 901.4 KB. Assim, as nossas imagens comprimidas com perdas diminuíram o tempo de carregamento da página em 82,83%! 😮 O tamanho total da página também foi reduzido em 96,83%. E as nossas imagens continuam a parecer de alta qualidade graças ao Imagify.

Ensaio de velocidade comprimido

Ensaio de velocidade comprimido (Pingdom)

Resumo

Uma vez que você determinar a qualidade das imagens que você precisa em seu site você pode escolher se você quer ou não usar compressão com ou sem perda. Novamente, para aqueles que estão mais preocupados com a velocidade e menos com a qualidade, recomendamos a compressão com perdas. Lembre-se, imagens comprimidas com perdas podem ficar bonitas se você encontrar o equilíbrio certo. Se você precisa de imagens pixel-perfeito, então você deve sempre ir com compressão sem perdas.

Quais são os teus pensamentos? Você está usando compressão com ou sem perdas em seu site WordPress. Deixe-nos saber abaixo nos comentários.


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos