Otimização de imagens: Converta e comprima PNG, JPG para WebP em Node.js

A era digital trouxe as imagens para o centro de nossa experiência de navegação. No entanto, o problema é que essas imagens muitas vezes ocupam uma largura de banda considerável, afetando o desempenho do site. Podemos combater isso reduzindo o tamanho das imagens por meio de um processo chamado Otimização de imagens. Neste artigo, exploraremos como converter arquivos de imagens como PNG e JPG para WebP e comprimi-los usando o Node.js.

# Por que escolher o WebP?

O WebP, um formato de imagem moderno desenvolvido pelo Google, oferece compressão superior com e sem perdas para imagens na web. Ao converter arquivos PNG e JPG para WebP, podemos obter tamanhos de arquivo menores sem comprometer a qualidade da imagem, tornando nossos sites mais rápidos.

# Configurando o Node.js

Antes de começarmos o processo de conversão, vamos garantir que o Node.js esteja instalado. Caso contrário, faça o download e instale de acordo com seu sistema operacional.

# Instalando os módulos necessários

Vamos utilizar dois pacotes do npm: sharp para a conversão de imagens e imagemin-webp para a compressão de imagens.

npm install sharp imagemin imagemin-webp

# Convertendo imagens para WebP

Vamos usar o módulo sharp para converter uma imagem PNG ou JPG para WebP. Isso é feito lendo o arquivo de entrada e transformando-o no formato WebP.

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('Conversão de imagem concluída.'))
  .catch(err => console.error(err));

# Comprimindo imagens WebP

Agora, vamos comprimir a imagem WebP convertida usando o módulo imagemin-webp.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('Compressão de imagem concluída.');
})();

# Código completo

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('Conversão e compressão de imagem concluídas.');
    })();
  })
  .catch(err => console.error(err));

Este script completo converterá sua imagem para o formato WebP e a comprimirá.

# Conclusão

Aí está: uma maneira eficiente de converter e comprimir PNG e JPG para WebP no Node.js. Agora você pode otimizar suas imagens, acelerar o tempo de carregamento do seu site e proporcionar uma melhor experiência ao usuário. Com um pouco de prática, essas etapas se tornarão naturais.

# Perguntas frequentes

1. Por que devo usar o WebP em vez de PNG ou JPG? O WebP oferece uma compressão superior, reduzindo o tamanho do arquivo sem perda significativa de qualidade da imagem.

2. Por que precisamos comprimir imagens? A compressão de imagens reduz o tamanho do arquivo, o que pode melhorar drasticamente o tempo de carregamento do site e economizar largura de banda.

3. Posso usar outras linguagens de programação para essa tarefa? Sim, outras linguagens como Python, Java, etc., também possuem bibliotecas para conversão e compressão de imagens. No entanto, este tutorial foca no Node.js.

4. E se o processo de conversão ou compressão falhar? Verifique se o Node.js e todos os módulos necessários estão instalados corretamente. Se o problema persistir, o problema pode estar relacionado à própria imagem.

5. Posso ajustar o nível de compressão? Sim, o plugin imagemin-webp permite ajustar o parâmetro de qualidade para controlar o nível de compressão.