Afbeeldingen comprimeren in Node.js met Sharp

Onnodig grote afbeeldingen kunnen leiden tot tragere reactietijden, overmatig bandbreedte verbruik en een trage ervaring voor gebruikers, vooral voor gebruikers met een langzamere verbinding. Dit kan resulteren in hogere bouncepercentages of minder conversies.

Voorafgaand aan het verzenden van digitale mediabestanden, kan het comprimeren van de visuele componenten helpen bij het verminderen van mogelijke complicaties en het leveren van een verbeterde gebruikersinterface. De module Sharp biedt een eenvoudige en handige oplossing om dit doel te bereiken.

Uw ontwikkelomgeving instellen

Om de procedure voor het verkleinen van visuele inhoud te illustreren, begint u met het implementeren van een uploadfunctie voor bestanden met Multer. Je kunt het proces versnellen door de code van deze GitHub repository te dupliceren.

Om de afbeelding upload service succesvol in te stellen vanuit een gekloonde GitHub repository, voer je het volgende commando uit om alle benodigde afhankelijkheden te installeren:

 npm install

Installeer vervolgens Sharp door dit commando uit te voeren:

 npm install sharp

De module Sharp is een krachtige Node.js bibliotheek voor het verwerken en manipuleren van afbeeldingen. Je kunt Sharp gebruiken om afbeeldingen efficiënt te verkleinen, bij te snijden, te roteren en verschillende andere bewerkingen op afbeeldingen uit te voeren. Sharp heeft ook uitstekende ondersteuning voor het comprimeren van afbeeldingen.

Compressietechnieken voor verschillende afbeeldingsformaten

Verschillende afbeeldingsformaten maken gebruik van unieke compressiestrategieën, omdat ze zijn afgestemd op bepaalde gebruikssituaties en overwegingen, zoals kwaliteit, bestandsafmetingen en kenmerken zoals transparantie en animatiemogelijkheden.

JPG/JPEG

JPEG, of de beeldcompressiestandaard van de Joint Photographic Experts Group, is speciaal ontworpen voor het comprimeren van foto’s en andere afbeeldingen met continue kleur- en kleurgradaties. Door gebruik te maken van een unieke vorm van lossy compressie, vermindert het effectief de bestandsgrootte door selectief bepaalde aspecten van de originele beeldgegevens te verwijderen.

Ten eerste, importeer de Sharp module; ten tweede, geef ofwel het pad naar het afbeeldingsbestand of een buffer die de inhoud bevat; ten derde, gebruik de .jpeg methode van de geïmporteerde Sharp instantie; ten slotte, voeg een configuratieobject toe met een kwaliteit attribuut ingesteld op een numerieke waarde variërend van 0 tot 100, waarbij lagere waarden kleinere bestanden vertegenwoordigen maar een slechtere visuele kwaliteit terwijl hogere waarden grotere bestanden produceren met een betere helderheid.

Men kan de parameter aanpassen aan hun specifieke eisen.Om optimale compressieprestaties te bereiken, wordt aanbevolen om de waarde binnen het bereik van 50-80 te houden, waarbij een geschikt evenwicht tussen bestandsgrootte en natuurgetrouwheid van de afbeelding wordt bereikt.

Sluit af met het opslaan van de gecomprimeerde weergave in het bestandssysteem met behulp van de methode .toFile , waarbij het pad van het gewenste uitvoerbestand als parameter wordt doorgegeven.

Bijvoorbeeld:

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

De standaardinstelling voor afbeeldingskwaliteit is standaard ingesteld op 80.

PNG

PNG, of Portable Network Graphics, is een algemeen erkend bestandsformaat voor afbeeldingen dat bekend staat om zijn vermogen om gegevens verliesvrij te comprimeren en tegelijkertijd transparantie in afbeeldingen te ondersteunen, waardoor het zeer veelzijdig is en ideaal voor verschillende toepassingen.

Wanneer je een afbeelding opgeslagen in Portable Network Graphics (PNG) formaat probeert te comprimeren met Sharp, is het belangrijk op te merken dat het proces verschillende overeenkomsten heeft met het comprimeren van een vergelijkbare afbeelding opgeslagen als een JPEG-bestand (Joint Photographic Experts Group). Er zijn echter twee verschillende aanpassingen die tijdens deze procedure moeten worden gemaakt.

Sharp gebruikt het PNG-bestandsformaat in plaats van JPEG om afbeeldingen te verwerken.

De PNG-indeling maakt gebruik van een nieuwe benadering van compressie door gebruik te maken van de parameter “compressionLevel”, in plaats van de traditionele instelling “kwaliteit”, om het bereikte compressieniveau te regelen. Bij de laagste instelling (0) produceert het algoritme de snelste en meest uitgebreide reductie in bestandsgrootte, terwijl de hoogste instelling (9) de langzaamste en minst substantiële compressie oplevert.

Bijvoorbeeld:

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

Standaard is de waarde die is toegewezen aan het compressieniveau ingesteld op 6.

Andere formaten

Sharps biedt ook ondersteuning voor het comprimeren van afbeeldingen in een verscheidenheid aan extra bestandsindelingen, waaronder:

Het gebruik van het WebP beeldcompressiealgoritme in combinatie met Sharp volgt een vergelijkbare procedure als het gebruik van JPEG, met als enige verschil dat de webp methode van de Sharp instantie moet worden aangeroepen in plaats van de .jpeg methode.

Het Tagged Image File Format (TIFF) dat wordt gebruikt voor het comprimeren van afbeeldingen in de implementatie van Sharp volgt een vergelijkbare procedure als JPEG, zij het met een alternatieve methodeaanroep. In plaats van de “.jpeg” methode aan te roepen op de Sharp instantie, moet men in plaats daarvan de “tiff” methode aanroepen.

De AVID-indeling, die betrekking heeft op de AV1 Image File Format die door Sharp wordt gebruikt voor beeldcompressie, werkt op dezelfde manier als JPEG.In plaats van de .jpeg-methode te gebruiken op een Sharp-voorbeeld, moet men echter de avif-methode gebruiken. Bovendien is het de moeite waard om op te merken dat de standaardwaarde voor de kwaliteitsinstelling binnen het AVIF-formaat is ingesteld op 50.

HEIF, wat staat voor High Efficiency Image File Format, gebruikt een vergelijkbare compressiemethode als JPEG. Het vereist echter het gebruik van de heif methode in plaats van de .jpeg methode op de Sharp instantie. Bovendien heeft AVIF standaard een beeldkwaliteitsinstelling van 50.

Afbeeldingen comprimeren met Sharp

Als men de GitHub repository heeft gereproduceerd, is het noodzakelijk om het “app.js” bestand binnen het project te openen en de eerder genoemde import statements daarin op te nemen.

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

De exec functie, die beschikbaar is gemaakt door de child_process module, maakt het mogelijk om shell commando’s of externe processen uit te voeren binnen een Node.js applicatie.

Met deze functie kun je een commando uitvoeren dat de afmetingen van een bestand vergelijkt voor en na compressie.

Vervolgens vervangen we de huidige POST '/single' handler door het meegeleverde codefragment erin op te nemen.

 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);
  }
});

De bovenstaande code-implementatie omvat een methodologie voor het comprimeren van JPEG-afbeeldingsbestanden en tegelijkertijd een vergelijking van hun respectievelijke bestandsgroottes voor en na het gebruik van het du commando.

De opdracht du is een Unix-hulpprogramma dat informatie geeft over schijfgebruik door een schatting te maken van de hoeveelheid ruimte die wordt ingenomen door bestanden en mappen in opgegeven mappen. Door de vlag -h te gebruiken, kan de uitvoer worden weergegeven in een formaat dat gemakkelijk te begrijpen is voor mensen, met de bestandsruimte die wordt gebruikt door individuele submappen en hun respectievelijke inhoud.

Voer de volgende instructie uit om de werking van uw bestandsoverdrachtdienst te starten:

 node app.js

Om de functionaliteit van je applicatie te valideren, kun je de Postman client app of een alternatief API-testprogramma naar keuze gebruiken om een JPEG-afbeelding naar het opgegeven eindpunt " /upload-and-compress>" te sturen voor verdere verwerking en compressie.

Er wordt verwacht dat u een antwoord ontvangt dat lijkt op de volgende indeling:

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

Ander gebruik van de Sharp-module

De Sharp-module biedt een uitgebreide reeks mogelijkheden voor beeldmanipulatie die verder gaan dan alleen compressie. Deze omvatten het wijzigen van het formaat, bijsnijden, roteren en omkeren van afbeeldingen volgens gespecificeerde afmetingen. Bovendien zijn kleurruimtewijzigingen, bewerking van alfakanalen en conversie tussen verschillende bestandsformaten mogelijk.