Compressão de Imagens: Lossy x Lossless
access_time
hourglass_empty
person_outline

Compressão de Imagens: Lossy x Lossless

Compressão de imagem Lossy e Lossless são dois dos métodos mais populares para diminuir o tamanho de imagens. É altamente recomendado usar um destes dois métodos quando fizer o upload de imagens no seu site. Neste artigo, vamos mostrar por que e como fazer isso, para ajudar no desempenho do seu site.

Por Que Preciso Compactar Imagens?

Imagens grandes podem retardar o desempenho do seu site, que pode afetar diretamente na experiência dos visitantes e no ranqueamento do SEO.

Um estudo do Google descobriu que 45% dos visitantes têm menor probabilidade de visitar um mesmo site se tiverem uma experiência ruim.

Imagens de tamanhos grandes tendem a prender o site, diminuindo o tempo de carregamento. No mínimo, isso pode criar um pequeno atraso que pode irritar os visitantes do seu site. Ou, na pior das hipóteses, também pode deixar seu site sem resposta ou completamente inacessível.

A classificação SEO, como mencionado antes, é outro fator que pode ser estar em risco. O Google já confirmou que a velocidade de carregamento contribui para um dos principais fatores de classificação. Um página com carregamento lento podem impactar no rastreamento e indexação de páginas. O Bing também já afirmou que a velocidade da página importa.

Uma página com desempenho lento pode afetar nas suas taxas de conversão também. Um relatório da Dakine, uma empresa sobre um estilo de vida outdoor, mostrou que uma página com carregamento rápido melhorou a receita de dispositivos móveis em até 45%. E um dos métodos que eles usaram foi otimizar as imagens do site.

As imagens pequenas oferecem outros benefícios para seu plano de hospedagem. Em resumo, elas não consomem os recursos do seu servidor, permitindo que você economize dinheiro.

Isto acontece porque imagens pequenas ajudam a economizar espaço de armazenamento e reduzem o uso da largura de banda. Se você usa um plano de hospedagem compartilhada, isto é um ponto crítico, especialmente se seu site tiver muitas imagens.

Adicional a isso, fazer o backup do seu site pode se tornar mais rápido com as imagens otimizadas.

Você não precisa se preocupar com a qualidade geral das suas imagens ao compactá-las. Os métodos que vamos discutir são técnicas sofisticadas para remover informações desnecessárias dos seus arquivos de imagem.

Compressão de Imagens Lossy

Lossy significa com perdas. Compressão de imagens lossy é um processo que perde um pouco dos dados da sua imagem. Reduzindo, assim, o tamanho do arquivo. Este processo é irreversível, e significa que uma informação redundante será removida permanentemente.

Esta técnica pode comprimir a imagem original consideravelmente, mas geralmente é compensado pela qualidade. Enquanto o tamanho possa ficar bem pequeno, sua imagem poderá ficar pixelada (com qualidade inferior). E é por isso que é bom ter um backup do arquivo antes de fazer isto.

Os formatos JPEG e GIF são ótimos exemplos de compressão com perdas. Os JPEGs são adequados para imagens/fotografias sem transparência, enquanto os GIFs são a melhor opção para imagens animadas. Esses formatos são ótimos para um site que precisa de tempo de carregamento mais rápidos, pois você pode ajustar o tamanho e a qualidade para obter o equilíbrio correto.

Veja um exemplo que fizemos usando o serviço Shortpixel para realizar a compressão com perdas:

um exemplo de compressão de imagens lossy

Como você pode ver, não conseguimos notar a diferença entre a foto original e a compactada. Você só pode notar o pixelamento se você ampliar a parte que foi compactada. Curiosamente, conseguimos reduzir o tamanho do arquivo em 85%.

Se você usa o WordPres, ele automaticamente ajudará a comprimir JPEGs ao realizar o upload de um arquivo para sua biblioteca de mídia. E é por isto que suas imagens aparecem de forma pixelada no seu site WordPress.

Por padrão, a imagem será reduzida em 82% do tamanho original do site. Você pode aumentar o percentual ou desativar o recurso, nós vamos discutir isto um pouco mais tarde.

Compressão de Imagens Lossless

Lossless quer dizer sem perdas. Ao contrário da opção mostrada anteriormente, a compactação de imagem sem perdas não reduz a qualidade de uma imagem. Isso ocorre porque esse método remove apenas dados adicionais não essenciais que são gerados automaticamente pelo dispositivo usado para tirar a foto ou o editor de imagens.

A desvantagem é que você não verá uma redução significativa no tamanho do arquivo. Às vezes, o tamanho permanecerá próximo ao original. Como resultado, é provável que não poupe uma quantidade considerável de armazenamento.

Esse método de compactação lossless é melhor para imagens com muitos textos e com fundo transparente – camada alfa. Os formatos que se beneficiam da compactação de imagens lossless  são RAW, BMP, GIF e PNG.

Aqui está um exemplo de compressão de imagens lossless:

exemplo de compressão de imagens lossless

Como você pode ver, é quase idêntico. Na verdade, usando o mesmo serviço de antes, só conseguimos reduzir o tamanho da imagem em 5%.

Qual Deles é o Melhor?

Acreditamos que a resposta certa depende do que você precisa. A maioria dos usuários, especialmente aqueles que gerenciam um eCommerce, blog, site de portfólio, preferem a compressão de imagens lossy. Este método oferece uma redução significativa de arquivos, economizando mais armazenamento e largura de banda enquanto ajuda o site a carregar mais rápido.

Por outro lado, sites relacionados a fotografia, moda e tópicos semelhantes que exigem imagens de alta qualidade podem preferir a compactação de imagens lossless. Isso porque as imagens otimizadas são pixel-by-pixel semelhantes aos originais.

Compressão de Imagens Lossy no WordPress

Se você escolher compactação de imagem lossy e usa o WordPress, você terá a função de fazer com que o CMS faça isso automaticamente. Se você quiser ajustar a porcentagem, pode pesquisar o código e modificar os valores.

Importante: Sempre faça backup antes de qualquer alteração no seu site. Aprenda como fazer backup do seu site WordPress.

Vamos mostrar algumas mudanças que você deve saber. Para desativar a compactação automática de imagens, adicione o seguinte filtro ao arquivo function.php do tema ativo e use um método de compactação manual (como o uso de software como o Adobe Photoshop, Affinity Photo e outros editores de imagem).

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

Se você quiser aumentar a taxa de compactação automática do WordPress, você poderá fazer isso adicionando o filtro a seguir. No fragmento de exemplo, a imagem seria compactada cerca de 70%.

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

Você tem que lembrar que este método não impactará nas imagens que já estão presentes no seu site. Você precisa regenerar todas elas, usando um plugin como o Regenerate Thumbnails.

Como alternativa, se você achar que isso não é prático, recomendamos usar um plugin para ajudar você com a compressão de imagens, pois é muito mais seguro. Para este tutorial, mostraremos o Imagify.

Se você é novo no WordPress, aqui está um tutorial sobre como instalar e ativar plugins WordPress.

Imagify

imagify plugin para compactar imagens lossy e lossless

Imagify ajuda a acelerar seu site com imagens mais leves enquanto otimiza proporcionalmente com as suas necessidades.

Isso não o ajudará somente com compressão de imagens, mas também otimizará automaticamente todas os thumbnails que você já subiu no seu site. Isto deixará todo processo mais eficiente.

Existem três níveis de otimização disponíveis que você deve usar nesse plugin:

  • Normal — usará o padrão de compressão de imagens lossless, e a qualidade da imagem não será afetada de forma alguma.
  • Aggressive (Agressivo) — usará o método de compressão de imagem lossy mais forte, causando uma pequena perda na qualidade quase imperceptível.
  • Ultra — usará um método de compressão de imagem mais forte, com perda na qualidade fácil de notar.

Imagify também ajuda a converter e servir imagens WebP também. Este é o formato de imagem mais recente desenvolvido pelo Google, oferecendo imagens de qualidade mais rica e, ao mesmo tempo, reduzindo significativamente o tamanho do arquivo. Mostramos sobre o WebP neste artigo (em inglês).

Também vale a pena mencionar que há muitos plugins alternativos para compactar imagens no WordPress, como o WP Smush e ShortPixel.

Conclusão

Agora você conhece todos os elementos básicos necessários para usar a compressão de imagens Lossy e Lossless.

Compressão Lossy pode reduzir significativamente o tamanho do arquivo, em troca de qualidade.

Por outro lado, você pode preservar a qualidade usando compactação Lossless, o que, por sua vez, reduzirá o tamanho minimamente. Com a ajuda de plugins, você pode facilmente compactar imagens no seu site WordPress.

Boa sorte otimizando e acelerando o seu site! 😉

O Autor

Author

Ariane G. / @arianegoncalves

A Ari é gerente de SEO na Hostinger Brasil e está há mais de três anos na equipe. Ela já colaborou com produção e localização de tutoriais, localização de landing pages, e hoje atua com foco em SEO para garantir o posicionamento da Hostinger nos mecanismos de busca.

Tutoriais em destaque

Tutoriais relacionados

Deixe uma resposta

Comentário*

Nome*

Email*

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Faça parte da Hostinger agora!