Das Komprimieren von Bildern für Ihre Website oder innerhalb Ihrer App kann die Leistung radikal verbessern. Sharp übernimmt die schwere Arbeit.
Unnötig große Bilder können zu langsameren Reaktionszeiten führen, übermäßig viel Bandbreite beanspruchen und für ein träges Erlebnis für Benutzer sorgen, insbesondere für Benutzer mit langsameren Verbindungen. Dies kann zu höheren Absprungraten oder weniger Conversions führen.
Das Komprimieren von Bildern vor dem Hochladen kann diese Probleme mildern und für ein besseres Benutzererlebnis sorgen. Das Sharp-Modul macht diesen Vorgang schnell und einfach.
Einrichten Ihrer Entwicklungsumgebung
Um den Vorgang des Komprimierens von Bildern zu demonstrieren, beginnen Sie mit Einrichten eines Bild-Upload-Dienstes mit Multer. Sie können den Prozess durch Klonen beschleunigen dieses GitHub-Repository.
Führen Sie nach dem Klonen des GitHub-Repositorys diesen Befehl aus, um die Abhängigkeiten für den Bild-Upload-Dienst zu installieren:
npm install
Als nächstes installieren Sie Sharp, indem Sie diesen Befehl ausführen:
npm install sharp
Der Scharf Das Modul ist eine leistungsstarke Node.js-Bibliothek zur Verarbeitung und Bearbeitung von Bildern. Mit Sharp können Sie Bilder effizient in der Größe ändern, zuschneiden, drehen und verschiedene andere Vorgänge an ihnen ausführen. Sharp bietet auch eine hervorragende Unterstützung für die Komprimierung von Bildern.
Komprimierungstechniken für verschiedene Bildformate
Verschiedene Bildformate verfügen über unterschiedliche Komprimierungstechniken. Dies liegt daran, dass sie jeweils auf bestimmte Verwendungszwecke und Anforderungen zugeschnitten sind und unterschiedliche Faktoren wie Qualität, Dateigröße und Funktionen wie Transparenz und Animationen priorisieren.
JPG/JPEG
JPEG ist ein Bildkomprimierungsstandard, der von der Joint Photographic Experts Group entwickelt wurde, um Fotos und realistische Bilder mit kontinuierlichen Tönen und Farbverläufen zu komprimieren. Es benutzt ein verlustbehafteter Komprimierungsalgorithmus, wodurch kleinere Dateien generiert werden, indem einige Bilddaten verworfen werden.
Um ein JPEG-Bild mit Sharp zu komprimieren, importieren Sie das Sharp-Modul und übergeben Sie den Dateipfad oder einen Puffer des Bildes als Argument. Rufen Sie als Nächstes die an .jpeg Methode auf der Scharf Beispiel. Übergeben Sie dann ein Konfigurationsobjekt mit a Qualität Eigenschaft, die eine Zahl dazwischen annimmt 0 Und 100 als Wert. Wo 0 gibt die kleinste Komprimierung mit der niedrigsten Qualität zurück und 100 Gibt die größte Komprimierung mit der höchsten Qualität zurück.
Sie können den Wert je nach Bedarf einstellen. Um optimale Komprimierungsergebnisse zu erzielen, sollten Sie den Wert dazwischen beibehalten 50-80 ein Gleichgewicht zwischen Größe und Qualität zu finden.
Zum Abschluss speichern Sie das komprimierte Bild mithilfe von im Dateisystem .einordnen Methode. Übergeben Sie den Pfad der Datei, in die Sie schreiben möchten, als Argument.
Zum Beispiel:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Der Standardwert für Qualität Ist 80.
PNG
PNG (Portable Network Graphics) ist ein Bilddateiformat, das für seine verlustfreie Komprimierung und die Unterstützung transparenter Hintergründe bekannt ist.
Das Komprimieren eines PNG-Bilds mit Sharp ähnelt dem Komprimieren eines JPEG-Bilds mit Sharp. Wenn das Bild im PNG-Format vorliegt, müssen Sie jedoch zwei Änderungen vornehmen.
- Sharp verarbeitet PNG-Bilder mit .png Methode anstelle der .jpeg Methode.
- Der .png Methode verwendet Komprimierungsstufe, Das ist eine Zahl zwischen 0 Und 9 anstatt Qualität in seinem Konfigurationsobjekt. 0 sorgt für die schnellstmögliche und größtmögliche Komprimierung 9 sorgt für die langsamste und kleinste Komprimierung, die möglich ist.
Zum Beispiel:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Der Standardwert für Komprimierungsstufe Ist 6.
Andere Formate
Sharps unterstützt die Komprimierung in verschiedenen anderen Bildformaten, darunter:
- WebP: Die WebP-Bildkomprimierung mit Sharp folgt dem gleichen Prozess wie JPG. Der einzige Unterschied besteht darin, dass Sie anrufen müssen webp Methode anstelle der .jpeg Methode auf der Sharp-Instanz.
- TIFF: Die TIFF-Bildkomprimierung (Tag Image File Format) mit Sharp folgt dem gleichen Prozess wie JPG. Der einzige Unterschied besteht darin, dass Sie anrufen müssen tiff Methode anstelle der .jpeg Methode auf der Sharp-Instanz.
- AVIF: Die AVIF-Bildkomprimierung (AV1 Image File Format) mit Sharp folgt dem gleichen Prozess wie JPG. Der einzige Unterschied besteht darin, dass Sie anrufen müssen avif Methode anstelle der .jpeg Methode auf der Sharp-Instanz. Der AVIF-Standardwert für Qualität Ist 50.
- HEIF: Die HEIF-Bildkomprimierung (High Efficiency Image File Format) mit Sharp folgt dem gleichen Prozess wie JPG. Der einzige Unterschied besteht darin, dass Sie anrufen müssen heif Methode anstelle der .jpeg Methode auf der Sharp-Instanz. Der AVIF-Standardwert für Qualität Ist 50.
Komprimieren von Bildern mit Sharp
Wenn Sie das GitHub-Repository geklont haben, öffnen Sie Ihr app.js Datei und fügen Sie die folgenden Importe hinzu.
const sharp = require("sharp");
const { exec } = require("child_process");
Geschäftsführer ist eine Funktion, die von bereitgestellt wird child_process Modul, mit dem Sie Shell-Befehle oder externe Prozesse aus Ihrer Node.js-Anwendung ausführen können.
Mit dieser Funktion können Sie einen Befehl ausführen, der die Dateigrößen vor und nach der Komprimierung vergleicht.
Als nächstes ersetzen Sie den POST ‘/single’-Handler mit dem folgenden Codeblock:
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);
}
});
Der obige Codeblock implementiert die Technik zum Komprimieren von JPEG-Bildern und vergleicht die Größen vor und nach der Verwendung du Befehl.
Der du command ist ein Unix-Dienstprogramm, das für „Disk Usage“ steht. Es schätzt die Speicherplatznutzung und analysiert die Festplattennutzung in einem Verzeichnis oder einer Gruppe von Verzeichnissen. Wenn Sie das ausführen du Befehl mit dem -H Flag zeigt es den von jedem Unterverzeichnis verwendeten Dateibereich und seinen Inhalt in für Menschen lesbarer Form an.
Starten Sie Ihren Upload-Dienst, indem Sie diesen Befehl ausführen:
node app.js
Testen Sie als Nächstes Ihre Anwendung, indem Sie ein JPG-Bild an die Route senden lokaler Host:
Sie sollten eine ähnliche Antwort wie diese sehen:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Weitere Einsatzmöglichkeiten des Sharp-Moduls
Neben der Komprimierung von Bildern kann das Sharp-Modul auch die Größe ändern, Bilder zuschneiden, drehen und nach den gewünschten Spezifikationen spiegeln. Es unterstützt auch Farbraumanpassungen, Alphakanaloperationen und Formatkonvertierungen.
