A compactação de imagens para o seu site ou aplicativo pode melhorar radicalmente o desempenho. Sharp faz o trabalho pesado.

Imagens desnecessariamente grandes podem levar a tempos de resposta mais lentos, consumir largura de banda excessiva e proporcionar uma experiência lenta aos usuários, especialmente aqueles em conexões mais lentas. Isso pode resultar em taxas de rejeição mais altas ou em menos conversões.

Compactar imagens antes de carregá-las pode atenuar esses problemas e proporcionar uma melhor experiência ao usuário. O módulo Sharp torna esse processo rápido e fácil.

Configurando seu ambiente de desenvolvimento

Para demonstrar o processo de compactação de imagens, comece por configurando um serviço de upload de imagens usando multer. Você pode acelerar o processo clonando este repositório GitHub.

Após clonar o repositório GitHub, execute este comando para instalar as dependências do serviço de upload de imagens:

npm install

Em seguida, instale o Sharp executando este comando:

npm install sharp

O Afiado module é uma biblioteca Node.js de alto desempenho para processamento e manipulação de imagens. Você pode usar o Sharp para redimensionar, cortar, girar e realizar várias outras operações nas imagens com eficiência. A Sharp também possui excelente suporte para compactação de imagens.

Técnicas de compressão para diferentes formatos de imagem

Diferentes formatos de imagem possuem técnicas de compressão distintas. Isso ocorre porque cada um deles atende a usos e requisitos específicos e prioriza diferentes fatores, incluindo qualidade, tamanho do arquivo e recursos como transparência e animações.

JPG/JPEG

JPEG é um padrão de compactação de imagem desenvolvido pelo Joint Photographic Experts Group para compactar fotografias e imagens realistas com tons contínuos e gradientes de cores. Ele usa um algoritmo de compressão com perdas, gerando arquivos menores descartando alguns dados da imagem.

Para compactar uma imagem JPEG com Sharp, importe o módulo Sharp e passe o filePath ou um buffer da imagem como argumento. A seguir, ligue para o .jpeg método no Afiado instância. Em seguida, passe um objeto de configuração com um qualidade propriedade que recebe um número entre 0 e 100 como um valor. Onde 0 retorna a menor compactação com a menor qualidade e 100 retorna a maior compactação com a mais alta qualidade.

Você pode definir o valor dependendo de suas necessidades. Para obter melhores resultados de compactação, mantenha o valor entre 50-80 para encontrar um equilíbrio entre tamanho e qualidade.

Finalize salvando a imagem compactada no sistema de arquivos usando o .arquivar método. Passe o caminho do arquivo que deseja escrever como argumento.

Por exemplo:

await sharp(req.file.path)
 .jpeg({ quality: 60 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

O valor padrão para qualidade é 80.

png

PNG (Portable Network Graphics) é um formato de arquivo de imagem conhecido por sua compactação sem perdas e suporte para fundos transparentes.

Compactar uma imagem PNG com Sharp é semelhante a compactar uma imagem JPEG com Sharp. No entanto, há duas alterações que você precisa fazer quando a imagem está no formato PNG.

  1. A Sharp processa imagens PNG usando o .png método em vez do .jpeg método.
  2. O .png método usa compressãoNível, que é um número entre 0 e 9 em vez de qualidade em seu objeto de configuração. 0 oferece a maior e mais rápida compactação possível, enquanto 9 fornece a compactação mais lenta e menor possível.

Por exemplo:

await sharp(req.file.path)
 .png({
 compressionLevel: 5,
 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

O valor padrão para nível de compressão é 6.

Outros formatos

Sharps oferece suporte à compactação em vários outros formatos de imagem, que incluem:

  • WebP: A compactação de imagem WebP com Sharp segue o mesmo processo que JPG. A única diferença é que você precisa ligar para o webp método em vez do .jpeg método na instância Sharp.
  • TIFF: A compactação de imagem TIFF (Tag Image File Format) com Sharp segue o mesmo processo que JPG. A única diferença é que você precisa ligar para o briga método em vez do .jpeg método na instância Sharp.
  • AVIF: A compactação de imagem AVIF (AV1 Image File Format) com Sharp segue o mesmo processo que JPG. A única diferença é que você precisa ligar para o avif método em vez do .jpeg método na instância Sharp. O valor padrão AVIF para qualidade é 50.
  • HEIF: A compactação de imagem HEIF (High Efficiency Image File Format) com Sharp segue o mesmo processo que JPG. A única diferença é que você precisa ligar para o novilha método em vez do .jpeg método na instância Sharp. O valor padrão AVIF para qualidade é 50.

Compactando imagens com nitidez

Se você clonou o repositório GitHub, abra seu aplicativo.js arquivo e adicione as seguintes importações.

const sharp = require("sharp");
const { exec } = require("child_process");

executivo é uma função fornecida pelo processo_filho módulo que permite executar comandos shell ou processos externos de seu aplicativo Node.js.

Você pode usar esta função para executar um comando que compara os tamanhos dos arquivos antes e depois da compactação.

Em seguida, substitua o POST ‘/single' com o bloco de código abaixo:

app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
try {
if (!req.file) {
return res.status(404).send("Please upload a valid image");
 }
const compressedFileName = req.file.filename.split(".")[0];
const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;


await sharp(req.file.path)
 .jpeg({ quality: 50 })
 .toFile(compressedImageFilePath)
 .then(() => {
let sizeBeforeCompression, sizeAfterCompression;
const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;


 exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
 sizeBeforeCompression = stdout.split("\\t")[0];


 exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
 sizeAfterCompression = stdout.split("\\t")[0];
 res.send({
 message: "Image uploaded and compressed successfully",
 sizeBeforeCompression,
 sizeAfterCompression,
 });
 });
 });
 });
 } catch (error) {
console.log(error);
 }
});

O bloco de código acima implementa a técnica de compactação de imagens JPEG e compara os tamanhos antes e depois de usar o você comando.

O você comando é um utilitário Unix que significa "uso de disco". Ele estima o uso do espaço de arquivo e analisa o uso do disco em um diretório ou conjunto de diretórios. Quando você executa o você comando com o -h sinalizador, ele exibe o espaço de arquivo que cada subdiretório usa e seu conteúdo em formato legível.

Inicie seu serviço de upload executando este comando:

node app.js

A seguir, teste sua aplicação enviando uma imagem JPG para a rota host local:/upload-and-compressusando o aplicativo cliente Postman ou qualquer outra ferramenta de teste de API.

Você deverá ver uma resposta semelhante a esta:

{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}

Outros usos do módulo Sharp

Além de compactar imagens, o módulo nítido também pode redimensionar, cortar, girar e inverter imagens de acordo com as especificações desejadas. Ele também oferece suporte a ajustes de espaço de cores, operações de canal alfa e conversões de formato.