Mengompresi gambar untuk situs web atau dalam aplikasi Anda dapat meningkatkan kinerja secara drastis. Sharp melakukan pekerjaan berat.
Gambar berukuran besar yang tidak perlu dapat menyebabkan waktu respons lebih lambat, mengonsumsi bandwidth berlebihan, dan memberikan pengalaman yang lamban bagi pengguna, terutama mereka yang koneksinya lebih lambat. Hal ini dapat menghasilkan rasio pentalan yang lebih tinggi atau konversi yang lebih sedikit.
Mengompresi gambar sebelum Anda mengunggahnya dapat mengurangi masalah ini dan memberikan pengalaman pengguna yang lebih baik. Modul Sharp membuat proses ini cepat dan mudah.
Menyiapkan Lingkungan Pengembangan Anda
Untuk mendemonstrasikan proses mengompresi gambar, mulailah dengan menyiapkan layanan unggah gambar menggunakan multer. Anda dapat mempercepat prosesnya dengan mengkloning repositori GitHub ini.
Setelah mengkloning repositori GitHub, jalankan perintah ini untuk menginstal dependensi untuk layanan pengunggahan gambar:
npm install
Selanjutnya, instal Sharp dengan menjalankan perintah ini:
npm install sharp
Itu Tajam modul adalah pustaka Node.js berkinerja tinggi untuk memproses dan memanipulasi gambar. Anda dapat menggunakan Sharp untuk mengubah ukuran, memotong, memutar, dan melakukan berbagai operasi lain pada gambar secara efisien. Sharp juga memiliki dukungan luar biasa untuk mengompresi gambar.
Teknik Kompresi untuk Berbagai Format Gambar
Format gambar berbeda memiliki teknik kompresi yang berbeda. Hal ini karena masing-masingnya memenuhi penggunaan dan persyaratan tertentu, dan memprioritaskan berbagai faktor termasuk kualitas, ukuran file, dan fitur seperti transparansi dan animasi.
JPG/JPEG
JPEG adalah standar kompresi gambar yang dikembangkan oleh Joint Photographic Experts Group untuk mengompresi foto dan gambar realistis dengan corak dan gradien warna yang berkelanjutan. Ini menggunakan algoritma kompresi lossy, menghasilkan file yang lebih kecil dengan membuang beberapa data gambar.
Untuk mengompresi gambar JPEG dengan Sharp, impor modul Sharp dan teruskan filePath atau buffer gambar sebagai argumen. Selanjutnya, hubungi .jpeg metode pada Tajam contoh. Kemudian, berikan objek konfigurasi dengan a kualitas properti yang mengambil angka di antaranya 0 Dan 100 sebagai sebuah nilai. Di mana 0 mengembalikan kompresi terkecil dengan kualitas terendah dan 100 mengembalikan kompresi terbesar dengan kualitas tertinggi.
Anda dapat mengatur nilainya tergantung kebutuhan Anda. Untuk hasil kompresi terbaik, pertahankan nilai antara 50-80 untuk mencapai keseimbangan antara ukuran dan kualitas.
Selesaikan dengan menyimpan gambar terkompresi ke sistem file menggunakan .toFile metode. Lewati jalur file yang ingin Anda tulis sebagai argumen.
Misalnya:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Nilai default untuk kualitas adalah 80.
PNG
PNG (Portable Network Graphics) adalah format file gambar yang dikenal dengan kompresi lossless dan dukungan untuk latar belakang transparan.
Mengompresi gambar PNG dengan Sharp mirip dengan mengompresi gambar JPEG dengan Sharp. Namun, ada dua perubahan yang perlu Anda lakukan saat gambar berformat PNG.
- Sharp memproses gambar PNG menggunakan .png metode, bukannya .jpeg metode.
- Itu .png penggunaan metode tingkat kompresi, yang merupakan angka di antaranya 0 Dan 9 alih-alih kualitas dalam objek konfigurasinya. 0 memberikan kompresi tercepat dan terbesar, sementara 9 memberikan kompresi paling lambat dan sekecil mungkin.
Misalnya:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Nilai default untuk tingkat kompresi adalah 6.
Format Lainnya
Sharps mendukung kompresi dalam berbagai format gambar lainnya yang meliputi:
- WebP: Kompresi gambar WebP dengan Sharp mengikuti proses yang sama seperti JPG. Satu-satunya perbedaan adalah Anda harus menelepon webp metode, bukannya .jpeg metode pada contoh Sharp.
- BERTENGKAR: Kompresi gambar TIFF (Tag Image File Format) dengan Sharp mengikuti proses yang sama seperti JPG. Satu-satunya perbedaan adalah Anda harus menelepon bertengkar metode, bukannya .jpeg metode pada contoh Sharp.
- AVIF: Kompresi gambar AVIF (AV1 Image File Format) dengan Sharp mengikuti proses yang sama seperti JPG. Satu-satunya perbedaan adalah Anda harus menelepon avif metode, bukannya .jpeg metode pada contoh Sharp. Nilai default AVIF untuk kualitas adalah 50.
- HEIF: Kompresi gambar HEIF (High Efficiency Image File Format) dengan Sharp mengikuti proses yang sama seperti JPG. Satu-satunya perbedaan adalah Anda harus menelepon sapi metode, bukannya .jpeg metode pada contoh Sharp. Nilai default AVIF untuk kualitas adalah 50.
Mengompresi Gambar Dengan Tajam
Jika Anda mengkloning repositori GitHub, buka aplikasi.js file dan tambahkan impor berikut.
const sharp = require("sharp");
const { exec } = require("child_process");
eksekutif adalah fungsi yang disediakan oleh proses_anak modul yang memungkinkan Anda menjalankan perintah shell atau proses eksternal dari aplikasi Node.js Anda.
Anda dapat menggunakan fungsi ini untuk menjalankan perintah yang membandingkan ukuran file sebelum dan sesudah kompresi.
Selanjutnya ganti POST’/single' handler dengan blok kode di bawah ini:
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);
}
});
Blok kode di atas mengimplementasikan teknik kompresi gambar JPEG dan membandingkan ukuran sebelum dan sesudah menggunakan du memerintah.
Itu du perintah adalah utilitas Unix yang merupakan singkatan dari "penggunaan disk". Ini memperkirakan penggunaan ruang file dan menganalisis penggunaan disk dalam direktori atau kumpulan direktori. Saat Anda menjalankan du perintah dengan -H flag, ini menampilkan ruang file yang digunakan setiap subdirektori dan isinya dalam bentuk yang dapat dibaca manusia.
Mulai layanan unggahan Anda dengan menjalankan perintah ini:
node app.js
Selanjutnya, uji aplikasi Anda dengan mengirimkan gambar JPG ke rute tersebut host lokal:
Anda akan melihat respons yang mirip dengan ini:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Kegunaan Lain dari Modul Sharp
Selain mengompresi gambar, modul sharp juga dapat mengubah ukuran, memotong, memutar, dan membalik gambar sesuai spesifikasi yang diinginkan. Ini juga mendukung penyesuaian ruang warna, operasi saluran alfa, dan konversi format.