Συμπίεση εικόνων στο Node.js με Sharp

Οι άσκοπα μεγάλες εικόνες μπορεί να οδηγήσουν σε πιο αργούς χρόνους απόκρισης, να καταναλώνουν υπερβολικό εύρος ζώνης και να παρέχουν μια υποτονική εμπειρία στους χρήστες, ειδικά σε αυτούς που έχουν πιο αργές συνδέσεις. Αυτό μπορεί να οδηγήσει σε υψηλότερα ποσοστά εγκατάλειψης ή λιγότερες μετατροπές.

Η συμπίεση εικόνων πριν τις ανεβάσετε μπορεί να μετριάσει αυτά τα προβλήματα και να προσφέρει καλύτερη εμπειρία χρήστη. Η μονάδα Sharp κάνει αυτή τη διαδικασία γρήγορη και εύκολη.

Ρύθμιση του αναπτυξιακού σας περιβάλλοντος

Για να δείξετε τη διαδικασία συμπίεσης εικόνων, ξεκινήστε από ρύθμιση μιας υπηρεσίας μεταφόρτωσης εικόνων χρησιμοποιώντας multer. Μπορείτε να επιταχύνετε τη διαδικασία κλωνοποιώντας αυτό το αποθετήριο GitHub.

Μετά την κλωνοποίηση του αποθετηρίου GitHub, εκτελέστε αυτήν την εντολή για να εγκαταστήσετε τις εξαρτήσεις για την υπηρεσία αποστολής εικόνων:

npm install

Στη συνέχεια, εγκαταστήστε το Sharp εκτελώντας αυτήν την εντολή:

npm install sharp

ο Αιχμηρός Το module είναι μια βιβλιοθήκη Node.js υψηλής απόδοσης για επεξεργασία και χειρισμό εικόνων. Μπορείτε να χρησιμοποιήσετε το Sharp για να αλλάξετε το μέγεθος, να περικόψετε, να περιστρέψετε και να εκτελέσετε αποτελεσματικά διάφορες άλλες λειτουργίες σε εικόνες. Το Sharp έχει επίσης εξαιρετική υποστήριξη για τη συμπίεση εικόνων.

Τεχνικές συμπίεσης για διαφορετικές μορφές εικόνας

Διαφορετικές μορφές εικόνας έχουν διακριτές τεχνικές συμπίεσης. Αυτό συμβαίνει επειδή το καθένα ανταποκρίνεται σε συγκεκριμένες χρήσεις και απαιτήσεις και δίνει προτεραιότητα σε διαφορετικούς παράγοντες, όπως η ποιότητα, το μέγεθος του αρχείου και χαρακτηριστικά όπως η διαφάνεια και τα κινούμενα σχέδια.

JPG/JPEG

Το JPEG είναι ένα πρότυπο συμπίεσης εικόνας που αναπτύχθηκε από την Joint Photographic Experts Group για τη συμπίεση φωτογραφιών και ρεαλιστικών εικόνων με συνεχείς τόνους και χρωματικές διαβαθμίσεις. Χρησιμοποιεί έναν αλγόριθμο συμπίεσης με απώλειες, δημιουργώντας μικρότερα αρχεία απορρίπτοντας ορισμένα δεδομένα εικόνας.

Για να συμπιέσετε μια εικόνα JPEG με Sharp, εισαγάγετε τη λειτουργική μονάδα Sharp και περάστε το filePath ή ένα buffer της εικόνας ως όρισμα. Στη συνέχεια, καλέστε το .jpeg μέθοδος στο Αιχμηρός παράδειγμα. Στη συνέχεια, περάστε ένα αντικείμενο διαμόρφωσης με a ποιότητα ιδιοκτησία που παίρνει έναν αριθμό μεταξύ 0 και 100 ως αξία. Οπου 0 επιστρέφει τη μικρότερη συμπίεση με τη χαμηλότερη ποιότητα και 100 επιστρέφει τη μεγαλύτερη συμπίεση με την υψηλότερη ποιότητα.

Μπορείτε να ορίσετε την τιμή ανάλογα με τις ανάγκες σας. Για καλύτερα αποτελέσματα συμπίεσης, διατηρήστε την τιμή μεταξύ 50-80 για να επιτευχθεί μια ισορροπία μεταξύ μεγέθους και ποιότητας.

Ολοκληρώστε αποθηκεύοντας τη συμπιεσμένη εικόνα στο σύστημα αρχείων χρησιμοποιώντας το .να αρχειοθετήσω μέθοδος. Περάστε τη διαδρομή του αρχείου στο οποίο θέλετε να γράψετε ως όρισμα.

Για παράδειγμα:

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

Η προεπιλεγμένη τιμή για ποιότητα είναι 80.

PNG

Το PNG (Portable Network Graphics) είναι μια μορφή αρχείου εικόνας γνωστή για τη συμπίεση χωρίς απώλειες και την υποστήριξη για διαφανή φόντο.

Η συμπίεση μιας εικόνας PNG με Sharp είναι παρόμοια με τη συμπίεση μιας εικόνας JPEG με Sharp. Ωστόσο, υπάρχουν δύο αλλαγές που πρέπει να κάνετε όταν η εικόνα είναι σε μορφή PNG.

1. Το Sharp επεξεργάζεται εικόνες PNG χρησιμοποιώντας το .png μέθοδο αντί του .jpeg μέθοδος.
2. ο .png χρήσεις μεθόδων Επίπεδο συμπίεσης, που είναι ένας αριθμός μεταξύ 0 και 9 αντί ποιότητα στο αντικείμενο διαμόρφωσής του. 0 δίνει την ταχύτερη και μεγαλύτερη δυνατή συμπίεση, ενώ 9 δίνει την πιο αργή και μικρότερη δυνατή συμπίεση.

Για παράδειγμα:

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

Η προεπιλεγμένη τιμή για Επίπεδο συμπίεσης είναι 6.

Άλλες μορφές

Το Sharps υποστηρίζει συμπίεση σε διάφορες άλλες μορφές εικόνας που περιλαμβάνουν:

• WebP: Η συμπίεση εικόνας WebP με Sharp ακολουθεί την ίδια διαδικασία με το JPG. Η μόνη διαφορά είναι ότι πρέπει να καλέσετε το webp μέθοδο αντί του .jpeg μέθοδος στην περίπτωση Sharp.
• ΚΑΒΓΑΔΑΚΙ: Η συμπίεση εικόνας TIFF (Tag Image File Format) με Sharp ακολουθεί την ίδια διαδικασία με το JPG. Η μόνη διαφορά είναι ότι πρέπει να καλέσετε το καβγαδάκι μέθοδο αντί του .jpeg μέθοδος στην περίπτωση Sharp.
• AVIF: Η συμπίεση εικόνας AVIF (AV1 Image File Format) με Sharp ακολουθεί την ίδια διαδικασία με το JPG. Η μόνη διαφορά είναι ότι πρέπει να καλέσετε το avif μέθοδο αντί του .jpeg μέθοδος στην περίπτωση Sharp. Η προεπιλεγμένη τιμή AVIF για ποιότητα είναι 50.
• ΕΙΦ: Η συμπίεση εικόνας HEIF (High Efficiency Image File Format) με Sharp ακολουθεί την ίδια διαδικασία με το JPG. Η μόνη διαφορά είναι ότι πρέπει να καλέσετε το heif μέθοδο αντί του .jpeg μέθοδος στην περίπτωση Sharp. Η προεπιλεγμένη τιμή AVIF για ποιότητα είναι 50.

Συμπίεση εικόνων με Sharp

Εάν κλωνοποιήσατε το αποθετήριο GitHub, ανοίξτε το app.js αρχείο και προσθέστε τις ακόλουθες εισαγωγές.

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

εκτελεστ είναι μια λειτουργία που παρέχεται από το παιδί_διαδικασία μονάδα που σας επιτρέπει να εκτελείτε εντολές φλοιού ή εξωτερικές διεργασίες από την εφαρμογή Node.js.

Μπορείτε να χρησιμοποιήσετε αυτήν τη συνάρτηση για να εκτελέσετε μια εντολή που συγκρίνει τα μεγέθη των αρχείων πριν και μετά τη συμπίεση.

Στη συνέχεια, αντικαταστήστε το POST "/singleχειριστή με το μπλοκ κώδικα παρακάτω:

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

Το παραπάνω μπλοκ κώδικα εφαρμόζει την τεχνική για τη συμπίεση εικόνων JPEG και συγκρίνει τα μεγέθη πριν και μετά τη χρήση του du εντολή.

ο du Η εντολή είναι ένα βοηθητικό πρόγραμμα Unix που σημαίνει "χρήση δίσκου". Εκτιμά τη χρήση του χώρου αρχείων και αναλύει τη χρήση του δίσκου σε έναν κατάλογο ή ένα σύνολο καταλόγων. Όταν τρέχετε το du εντολή με το -η σημαία, εμφανίζει τον χώρο αρχείων που χρησιμοποιεί κάθε υποκατάλογος και τα περιεχόμενά του σε αναγνώσιμη από τον άνθρωπο μορφή.

Ξεκινήστε την υπηρεσία μεταφόρτωσης εκτελώντας αυτήν την εντολή:

node app.js

Στη συνέχεια, δοκιμάστε την εφαρμογή σας στέλνοντας μια εικόνα JPG στη διαδρομή localhost:/upload-and-compressχρησιμοποιώντας την εφαρμογή πελάτη Postman ή οποιοδήποτε άλλο εργαλείο δοκιμής API.

Θα πρέπει να δείτε μια απάντηση παρόμοια με αυτήν:

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

Άλλες χρήσεις της μονάδας Sharp

Εκτός από τη συμπίεση εικόνων, η ευκρινή μονάδα μπορεί επίσης να αλλάζει το μέγεθος, να περικόπτει, να περιστρέφει και να αναστρέφει τις εικόνες στις επιθυμητές προδιαγραφές. Υποστηρίζει επίσης προσαρμογές χρωματικού χώρου, λειτουργίες καναλιών άλφα και μετατροπές μορφής.