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 otimização de imagens desempenha um papel crucial na velocidade com que o seu site WordPress conseguirá 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, isto implica em diminuir o tamanho do arquivo de suas imagens usando duas formas populares de compressão: com e sem perdas. A WEBP suporta ambos os métodos de compressão!
Hoje, veremos os dois tipos de compressão de imagem e indicaremos qual deles recomendamos. Isso pode variar dependendo do tipo de negócio que você administra.
- Compressão com perda
- Compressão sem perda
- Qual método de compressão é melhor?
- Como usar a compressão com perda no WordPress
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). Portanto, você deve ter cuidado com o quanto quer reduzir a imagem. Não apenas pela qualidade, mas porque o processo é irreversível. Obviamente, uma das grandes vantagens da compressão com perda é a capacidade de reduzir significativamente o tamanho dos arquivos.
- 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)
O WordPress comprime imagens automaticamente
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 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 compressã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 arquivo 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 arquivo 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 descobrir 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, isso está em “Salvar na web” ou “Exportar configurações”.
Se fizermos uma pequena comparação das taxas de Compressão com perda, 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)
- lossy-compressed-1.JPG: 227 KB (2.000 px por 1463 px) Redução de 91,95%.
- lossy-compressed-2.JPG: 185 KB (2.000 px por 1463 px) Redução de 93,44%.
- lossy-compressed-3.JPG: 5 KB (2.000 px por 1463 px) Redução de 99,82%
Suponha que você escolha a versão 50% compactada. O tamanho do arquivo é de 227 KB, muito menor que o arquivo original de 2 MB ou mais. Mas se esta for apenas uma das mais de 15 outras imagens na página, ainda não é bom. Em geral, recomendamos manter todas as imagens abaixo de 100 KB, se possível. No meu caso deveria ser menor. Portanto, é importante redimensionar a imagem. Uma imagem de 50%, inicialmente dimensionada para 1251 pixels por 916 pixels, tem 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.
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 perda
Você usa o Google PageSpeed Insights? Se assim for, você está provavelmente familiarizado com o aviso que diz para “Otimizar Imagens”. Em 2017, o Google realmente atualizou sua documentação para recomendar o uso de compressão com perda como uma forma de acelerar ainda mais o seu site.
Se você quiser se livrar desses avisos, uma das maneiras mais fáceis é usar compressão com perda para apaziguar o Google.
Compressão sem perda
Agora é hora de verificar a 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 isso é 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 perda em sua área de trabalho usando ferramentas como Photoshop, FileOptimizer ou ImageOptim.
- Alguns plugins aplicam o Gzip compression às imagens (minificam-nas).
Os usuários Kinsta podem tirar proveito do recurso de minificação de código, que está integrado diretamente no painel MyKinsta. Isso permite aos clientes ativar facilmente a minificação automática de CSS e JavaScript com um simples clique. Isso pode ajudar a acelerar um site sem qualquer esforço manual.
Se fizermos uma pequena comparação das taxas de compressão com perda, podemos ver que ao usar a compressão sem perda você não perde nenhuma qualidade. No entanto, o tamanho do ficheiro da imagem foi reduzido apenas em 10,84%. Isso é comparado a mais de 90% quando se usa compressão com perda.
- original.JPG: 227 KB (2.000 px por 1463 px)
- JPG: 203 KB (2.000 px por 1463 px)
Qual método de compressão é melhor?
A resposta para isso depende de você. A compressão com perda é recomendada para a maioria dos usuários. Isso ocorre porque as imagens podem ser facilmente compactadas em 70% ou mais (às vezes até 90% ou mais!) sem perda significativa de qualidade. Pendure isso com 15 imagens em sua página e isso desempenhará um papel importante na aceleração do tempo de carregamento do site. Além disso, a compressão com perda usa o mínimo de espaço em disco possível. Isso significa que você pode economizar dinheiro em hospedagem.
A compressão sem perda é 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 píxel-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 perda 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 perda.
Antes de adotar uma ferramenta de terceiros, você deve considerar a possibilidade de alguns provedores de hospedagem incluírem ferramentas ou serviços para ajudá-lo a otimizar suas imagens diretamente do seu painel de controle de hospedagem. Por exemplo, Kinsta fornece uma ferramenta gratuita de Otimização de Imagens para todos os clientes que cria cópias WebP das imagens de um site (armazenadas sem custo adicional), então entrega o menor dos dois arquivos para o visitante. Isso acelera o tempo de carregamento e melhora a experiência do usuário, especialmente porque é emparelhado com o CDN da Kinsta, rápido como um relâmpago.
Se o seu provedor de hospedagem não fornece um serviço como este, então você pode verificar uma ferramenta de otimização de imagem de terceiros. Algumas das opções mais utilizadas incluem:
- Imagify (com e sem perda)
- WP Smush (com e sem perda)
- EWWW Cloud (com e sem perda)
Nota: todos os listados acima utilizam seus próprios servidores de terceiros para comprimir imagens. Você deve sempre compactar imagens em massa fora do site por razões de desempenho. 👍
Imagify é uma das opções mais populares que listamos. Eles têm um plano gratuito, mas até mesmo seus planos profissionais têm um preço muito razoável. Você pode otimizar várias imagens usando apenas o plano “Lite” (1 GB por mês), e eles oferecem opções de pagamento mensais ou anuais de baixo custo.
A Imagify tem três níveis de otimização:
- Normal: Este modo utiliza compressão sem perda, 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 perda 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 perda e aplica todas as otimizações disponíveis para a compressão máxima da imagem. Isso irá proporcionar uma enorme economia no peso inicial, mas você provavelmente irá notar alguma degradação da imagem.
Usamos o modo Agressivo na Kinsta e normalmente vemos 60–70% de economia dependendo da imagem. Nota: 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.
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 perda, este é outro grande poupador de tamanho de arquivo!
Na verdade, usamos o recurso de otimização de imagem em massa em toda à nossa biblioteca de mídia WordPress. Como pode ver, raspou mais de 700 MB! Isso é enorme quando se trata de desempenho de frontend.
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 sem compressão
Primeiro enviamos 10 imagens sem compressão. 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)
Teste 2 – Com compressão
Então carregamos as mesmas imagens exatas novamente, mas desta vez habilitamos “auto-optimizar” no plugin Imagify. Fizemos então 5 testes novamente no Pingdom e concretizamos 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 carregamento é agora de 522 ms com um tamanho total de página de 901.4 KB. Assim, às 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.
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 perda. Lembre-se, imagens comprimidas com perdas podem ficar bonitas se você encontrar o equilíbrio certo. Se você precisa de imagens píxel-perfeito, então você deve sempre ir com compressão sem perda.
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.
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário