Como redimensionar e compactar imagens grandes em massa (e otimizá-las)

Quer saber como redimensionar e compactar imagens grandes em massa e sem perder qualidade? Você está na página certa. Vamos ver como você pode economizar tempo enquanto otimiza suas fotos e aumenta o desempenho do seu site.

A compactação de imagem é o processo de reduzir o peso de uma imagem diminuindo seu tamanho sem comprometer muito a qualidade. Neste artigo, você aprenderá por que é crucial redimensionar e compactar imagens e como fazê-lo facilmente sem perder qualidade.

Vamos mergulhar!

Por que compactar imagens grandes para um tamanho menor

Uma das maiores tendências do web design atualmente é ter imagens grandes e bonitas em seu site. Mas quando se trata de desempenho na web, essas imagens grandes geralmente são as principais culpadas pela lentidão do seu site. Se implementadas incorretamente, essas imagens provavelmente terão um arquivo de tamanho grande, resultando em solicitações HTTP mais altas para seu navegador.

Aqui estão alguns benefícios que você pode obter ao compactar fotos grandes:

• As imagens compactadas aumentarão a velocidade , resultando em uma ótima experiência do usuário, de acordo com o Google. O Google PageSpeed ​​Insights recomenda dimensionar corretamente as imagens (especialmente para celular), adiar imagens fora da tela (aplicando carregamento lento) e usar um formato de última geração como WebP se você quiser melhorar o tempo de carregamento.

• Ao redimensionar e compactar as imagens, você pode reduzir o tamanho da página e aumentar as métricas de desempenho definidas pelo Google , incluindo o Core Web Vitals. A otimização de suas imagens também significa uma redução no tempo que os visitantes precisam esperar antes de interagir com seu site (métrica Time To Interactive) e uma velocidade percebida aprimorada (métricas First Contentful Paint e Largest Contentful Paint).

• Tamanhos de arquivo de imagem menores usam menos largura de banda – suas redes e navegadores certamente apreciarão isso! A otimização de imagens geralmente pode gerar algumas das maiores economias de bytes e melhorias de desempenho para seu site: quanto menos bytes um navegador tiver para baixar, menos concorrência na largura de banda – o que significa um tempo de carregamento mais rápido.

• Solicitações HTTP para imagens HD grandes também podem afetar negativamente o desempenho e é por isso que você deve fazer menos solicitações HTTP para acelerar seu site WordPress.

A compactação de imagens é necessária para aumentar o desempenho, mas, por outro lado, você não quer imagens borradas para o seu site, certo? O objetivo é alcançar um resultado que equilibre qualidade e otimização como no nosso exemplo abaixo:

Sem compressão JPEG – 400KB	Compressão (qualidade inalterada) JPEG – 170 KB

Isso nos leva à próxima parte: como você reduz o tamanho da imagem sem perder e sacrificar a qualidade?

Como redimensionar e compactar imagens em massa (PNG e JPEG)

As duas principais coisas a serem consideradas são o tipo de compactação que você deseja usar (com perdas vs sem perdas) e o formato do arquivo (PNG, JPEG, PDFs etc.). Você pode ver abaixo como os formatos podem afetar o tamanho da imagem:

Para tirar o máximo proveito de suas imagens PNG e JPEG, existem muitas ferramentas disponíveis. Alguns o ajudarão a fazer todo esse trabalho em seu nome (por exemplo: um plugin do WordPress), enquanto outros podem permitir que você faça suas próprias otimizações (por exemplo: Photoshop).

Aqui está nossa lista de ferramentas favoritas que você pode usar para compactar imagens JPEG ou PNG em massa. Nós os classificamos em duas categorias:

• Categoria nº 1 – Ferramentas e software da Web de otimização de imagens para otimizar imagens PNG e JPEG grandes em massa

• Categoria #2 – Plugins WordPress para redimensionar e compactar imagens PNG e JPEG grandes em massa

Vamos começar com a primeira categoria.

Categoria nº 1 – Ferramentas e software da Web de otimização de imagens para otimizar imagens PNG e JPEG grandes em massa

Aqui está nossa lista de softwares e ferramentas online que você pode usar para redimensionar e compactar várias imagens grandes:

• Foto de afinidade para compactar em lote suas imagens PNG e JPEG.

1. Vá para Arquivo > Novo Trabalho em Lote

2. Carregue todas as imagens que deseja compactar em Bulk e selecione o formato mais adequado de acordo com suas necessidades:

3. Defina a nova qualidade (70 é um bom número para manter uma boa qualidade)

• Preview (no Mac) – para redimensionar suas imagens em massa ( mas não as compacta ).

1. Abra todas as imagens usando a visualização
2. Selecione todos eles
3. Vá para Ferramentas > Tamanho e selecione novas dimensões de imagem

Tarefa concluída! O tamanho resultante é menor.

• Mass Image Compressor – uma ferramenta de conversão e compactação de imagens em lote de apontar e disparar para otimização de sites.

• Gimp – o editor de imagens popular gratuito para Mac e Windows. O GIMP vem com o chamado modo de lote que permite processar imagens de PNG, JPEG e outros formatos como GIF ou PDF. ​​Você precisará baixar e instalar uma extensão gratuita chamada “Batch Image Manipulation Plugin (BIMP). Os passos são então realmente simples.

• Photoshop – para redimensionar e compactar suas imagens PNG e JPEG (afeta a qualidade e é relativamente caro).
  1. Abra o Adobe Photoshop, selecione Arquivo > Scripts > Processador de imagem
  2. Clique em Selecionar pasta para que você possa escolher a pasta onde as imagens estão localizadas
  3. Ajuste as configurações para reduzir o tamanho
  4. Escolha uma configuração entre 1 e 12 no campo Qualidade (sugiro não ir abaixo de 6).
  5. Clique em “Executar ação”

Nota: O Photoshop pode ser uma curva de aprendizado íngreme, portanto, se você estiver interessado, listamos 10 alternativas ao Photoshop para otimização de imagens.

Se você deseja economizar tempo, não há necessidade de lidar com toda a formatação e compactação manualmente. Felizmente, alguns plugins fazem parte desse trabalho automaticamente para você! Isso nos leva à segunda categoria: os plugins do WordPress.

Categoria #2 – Plugins WordPress para redimensionar e compactar imagens PNG e JPEG grandes em massa

Você pode usar um dos plugins do WordPress abaixo para compactar imagens grandes em massa, a saber:

• Imagify (nosso plugin gratuito)
• Optimole
• Compactar JPEG e PNG (PNG minúsculo)
• EWWW
• ShortPixel
• reSmush.it

Todos eles oferecem otimização em massa, e a maioria deles também converte suas imagens para o formato WebP como o Google recomenda. Para nosso estudo de caso, usaremos o Imagify e destacaremos as etapas que você precisa seguir para otimizar suas imagens grandes.

Como compactar imagens grandes sem perder qualidade com o Imagify

Com o Imagify, você pode redimensionar e compactar em massa sem sair do WordPress. Vamos dar uma olhada no painel do Imagify para que você possa obter a aparência do recurso Otimização em massa no menu Mídia > Otimização em massa :

Após ativar o plugin Imagify, basta escolher o seu nível de compressão e clicar no botão “ IMAGIF'EM ALL ”.

Esse é o tipo de economia que você pode obter ao usar o recurso de otimização em massa do Imagify: quase 87%!

Vamos agora realizar uma demonstração de “antes e depois” para que você veja porque deve otimizar suas imagens com o Imagify.

Compactando imagens grandes em massa: uma demonstração

Executarei dois cenários de otimização em massa para minhas imagens em dispositivos móveis:

• Cenário 1 – Resultados de desempenho com imagens JPEG (sem Imagify)
• Cenário 2 – Resultados de otimização de imagem em massa com imagens WebP e modo de otimização agressiva (com Imagify)

Aqui estão as ferramentas e métricas que levarei em consideração:

Ferramentas:
Google PageSpeed ​​Insights e WebPageTest

Métricas:

• Tamanho do arquivo de cada foto
• Maior pintura de conteúdo
• Tamanho da página
• Solicitações HTTP
• Tempo de carregamento

Cenário 1 – Resultados de desempenho com imagens JPEG (sem Imagify)

1. 9 imagens veiculadas no formato JPEG
2. As imagens não são otimizadas

Aqui estão os sinalizadores de otimização de imagem que recebi depois de executar a auditoria do PageSpeed ​​Insights:

Abaixo está o detalhamento do conteúdo da minha página. As imagens são responsáveis ​​por fazer 60% das requisições e 81,5% do total de bytes:

Cenário 2 – Resultados de otimização de imagem em massa com imagens WebP e modo de otimização agressiva (com Imagify)

• As mesmas 9 imagens convertidas para o formato WebP com Imagify
• Imagens otimizadas em massa com Imagify

Vamos otimizar nossas imagens em massa e convertê-las para WebP usando o Imagify:

Logo após alguns cliques, o Imagify economizou em média 55% do tamanho do nosso arquivo:

Nossas métricas de desempenho também estão em melhor forma :

A Imagify também resolveu os problemas de desempenho sinalizados pelo PageSpeed ​​Insights :

Podemos ver apenas resultados positivos graças ao recurso de otimização em massa do Imagify:

• Todas as minhas imagens são compactadas: elas têm um tamanho menor e não comprometemos a qualidade.
• Meu Core Web Vital (LCP) estava em laranja com pontuação de 3,6 s, mas com o Imagify passou para a zona verde com 1,6 s.
• O tempo de carregamento da minha página caiu de 3,7 s para 2,1 s.
• Apenas 43% das solicitações agora são provenientes de imagens (eram 60% sem o Imagify).
• As imagens ocupam 26,5% de todo o conteúdo de bytes (contra 82% antes).

Empacotando

O plugin Imagify nos permitiu redimensionar e compactar rapidamente imagens grandes em massa diretamente do painel do WordPress. Levamos dois cliques para otimizar todas as nossas imagens automaticamente e economizou em média 60% do tamanho do nosso arquivo! Além disso, o Imagify pode converter suas imagens do WordPress para WebP, o formato de última geração recomendado pelo Google.

Não deixe que o desempenho lento do site lhe custe conversões. Comece a otimizar suas imagens em massa com o Imagify gratuitamente hoje mesmo!