Het comprimeren van afbeeldingen voor uw website of binnen uw app kan de prestaties radicaal verbeteren. Sharp doet het zware werk.
Onnodig grote afbeeldingen kunnen leiden tot tragere responstijden, verbruiken buitensporige bandbreedte en zorgen voor een trage ervaring voor gebruikers, vooral voor gebruikers met langzamere verbindingen. Dit kan resulteren in hogere bouncepercentages of minder conversies.
Door afbeeldingen te comprimeren voordat u ze uploadt, kunnen deze problemen worden verholpen en een betere gebruikerservaring worden geboden. De Sharp-module maakt dit proces snel en eenvoudig.
Uw ontwikkelomgeving instellen
Begin met om het proces van het comprimeren van afbeeldingen te demonstreren een beelduploadservice opzetten met behulp van Multer. U kunt het proces versnellen door te klonen deze GitHub-repository.
Nadat u de GitHub-repository hebt gekloond, voert u deze opdracht uit om de afhankelijkheden voor de uploadservice voor afbeeldingen te installeren:
npm install
Installeer vervolgens Sharp door deze opdracht uit te voeren:
npm install sharp
De Scherp module is een krachtige Node.js-bibliotheek voor het verwerken en manipuleren van afbeeldingen. U kunt Sharp gebruiken om afbeeldingen efficiënt te vergroten of verkleinen, bij te snijden, te roteren en diverse andere bewerkingen uit te voeren. Sharp heeft ook uitstekende ondersteuning voor het comprimeren van afbeeldingen.
Compressietechnieken voor verschillende beeldformaten
Verschillende beeldformaten hebben verschillende compressietechnieken. Dit komt omdat ze elk tegemoetkomen aan specifieke toepassingen en vereisten, en ze prioriteit geven aan verschillende factoren, waaronder kwaliteit, bestandsgrootte en functies zoals transparantie en animaties.
JPG/JPEG
JPEG is een beeldcompressiestandaard ontwikkeld door de Joint Photographic Experts Group om foto's en realistische afbeeldingen met doorlopende tinten en kleurovergangen te comprimeren. Het gebruikt een verliesgevend compressie-algoritme, waardoor kleinere bestanden worden gegenereerd door bepaalde afbeeldingsgegevens te verwijderen.
Om een JPEG-afbeelding met Sharp te comprimeren, importeert u de Sharp-module en geeft u het filePath of een buffer van de afbeelding als argument door. Bel vervolgens de .jpeg methode op de Scherp voorbeeld. Geef vervolgens een configuratieobject door met a kwaliteit eigenschap waartussen een getal moet komen 0 En 100 als waarde. Waar 0 retourneert de kleinste compressie met de laagste kwaliteit en 100 retourneert de grootste compressie met de hoogste kwaliteit.
U kunt de waarde instellen afhankelijk van uw behoeften. Voor de beste compressieresultaten houdt u de waarde tussen 50-80 om een evenwicht te vinden tussen omvang en kwaliteit.
Sluit af door de gecomprimeerde afbeelding op te slaan in het bestandssysteem met behulp van de .naarBestand methode. Geef het pad van het bestand waarnaar u wilt schrijven als argument door.
Bijvoorbeeld:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
De standaardwaarde voor kwaliteit is 80.
PNG
PNG (Portable Network Graphics) is een afbeeldingsbestandsindeling die bekend staat om zijn verliesvrije compressie en ondersteuning voor transparante achtergronden.
Het comprimeren van een PNG-afbeelding met Sharp is vergelijkbaar met het comprimeren van een JPEG-afbeelding met Sharp. Er zijn echter twee wijzigingen die u moet aanbrengen als de afbeelding de PNG-indeling heeft.
- Sharp verwerkt PNG-afbeeldingen met behulp van de .png methode in plaats van de .jpeg methode.
- De .png methode gebruikt compressieniveau, dat is een getal tussen 0 En 9 in plaats van kwaliteit in zijn configuratieobject. 0 geeft de snelste en grootst mogelijke compressie, terwijl 9 geeft de langzaamste en kleinst mogelijke compressie.
Bijvoorbeeld:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
De standaardwaarde voor compressieniveau is 6.
Andere formaten
Sharps ondersteunt compressie in verschillende andere afbeeldingsformaten, waaronder:
- WebP: WebP-beeldcompressie met Sharp volgt hetzelfde proces als JPG. Het enige verschil is dat je de webp methode in plaats van de .jpeg methode op de Sharp-instantie.
- TIFF: TIFF-beeldcompressie (Tag Image File Format) met Sharp volgt hetzelfde proces als JPG. Het enige verschil is dat je de Tiff methode in plaats van de .jpeg methode op de Sharp-instantie.
- AVIF: AVIF (AV1 Image File Format) beeldcompressie met Sharp volgt hetzelfde proces als JPG. Het enige verschil is dat je de avif methode in plaats van de .jpeg methode op de Sharp-instantie. De AVIF-standaardwaarde voor kwaliteit is 50.
- HEIF: HEIF (High Efficiency Image File Format) beeldcompressie met Sharp volgt hetzelfde proces als JPG. Het enige verschil is dat je de heif methode in plaats van de .jpeg methode op de Sharp-instantie. De AVIF-standaardwaarde voor kwaliteit is 50.
Afbeeldingen comprimeren met scherp
Als u de GitHub-repository hebt gekloond, opent u uw app.js bestand en voeg de volgende import toe.
const sharp = require("sharp");
const { exec } = require("child_process");
uitvoerend is een functie van de kind_proces module waarmee u shell-opdrachten of externe processen kunt uitvoeren vanuit uw Node.js-applicatie.
U kunt deze functie gebruiken om een opdracht uit te voeren die de bestandsgroottes vóór en na compressie vergelijkt.
Vervang vervolgens de POST ‘/single' handler met het onderstaande codeblok:
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);
}
});
Het bovenstaande codeblok implementeert de techniek voor het comprimeren van JPEG-afbeeldingen en vergelijkt de formaten voor en na het gebruik van de du commando.
De du command is een Unix-hulpprogramma dat staat voor 'schijfgebruik'. Het schat het gebruik van de bestandsruimte en analyseert het schijfgebruik in een map of een reeks mappen. Wanneer u de du commando met de -H flag, toont het de bestandsruimte die elke submap gebruikt en de inhoud ervan in voor mensen leesbare vorm.
Start uw uploadservice door deze opdracht uit te voeren:
node app.js
Test vervolgens uw applicatie door een JPG-afbeelding naar de route te sturen lokalehost:
Je zou een reactie moeten zien die vergelijkbaar is met deze:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Ander gebruik van de Sharp-module
Naast het comprimeren van afbeeldingen, kan de Sharp-module ook afbeeldingen wijzigen, bijsnijden, roteren en omdraaien naar de gewenste specificaties. Het ondersteunt ook kleurruimteaanpassingen, alfakanaalbewerkingen en formaatconversies.
