lifelong learner — urip iku urup, currently working on accenture.

Konversi dan mengkompressi (compress) file gambar dengan sharp

0
Degananda.com -

Konversi dan Kompressi gambar

Fungsi kompresi terdapat pada output dari sharp. Secara default sharp memiliki empat tipe gambar yang dapat dikonversi yakni :

  1. jpg/jpeg
  2. png
  3. tiff
  4. webp

setiap input yang masuk ke sharp dapat dikonversi menjadi empat tipe gambar diatas dengan menggunakan perintah


sharp(input).png(options) // konversi ke png

sharp(input).jpg(options) // konversi ke jpg

sharp(input).tiff(options) // konversi ke tiff

sharp(input).webp(options) // konversi ke webp

proses konversi akan mengubah input buffer menjadi file baru dengan tipe data yang telah ditentukan. Selain mengganti tipedata konversi diatas juga dapat mengubah banyak hal diantarannya yaitu :

  1. Quality. Kualitas dari gambar meliputi ketajaman warna, intensitas warna , kedetailan gambar dan lain sebagainnya. Parameter quality ini memiliki nilai berupa integer dari range 0-100. Makin tinggi makin bagus kualitasnya namun size yang dihasilkan akan semakin besar. Sehingga jika ingin melakukan kompresi maka turunkan kualitas. 50-80 should be ok. Artinnya mengkompresi 20-50% dari totalsize
  2. Interlace, mengaktifkan fitur interlace secara default false.
  3. Chromasubsampling, ,mengaktifkan Chromasubsampling akan bernilai true apabila quality diset <= 90.

dari ketiga parameter diatas kita hanya akan menggunakan opsi “quality” dengan range nilai yang kita inginkan. Setelah input dikonversi menjadi tipe tertentu maka buffer tersebut harus kita jadikan file dengan menggunakan perintah toFile(). Saran kami hilangkan extension dari file tersebut untuk mencegah hal-hal yang tidak dinginkan

sharp('./'+req.file.path).toBuffer().then(
    (data) => {
        sharp(data).jpeg({
            quality : 50
        }).toFile('./'+req.file.path+'.jpg', (err,info) => {
             res.send("oke");
         });
     }).catch(
        (err) => {
        res.send('something wrong');
    }
)

Implementasi

Berikut ini adalah full source code untuk mengkonversi file image hasil upload menjadi jpg. Mengapa jpg ? karena ukurannya relatif lebih kecil jika dibandingkan dengan png dan lebih umum jika dibandingkan dengan dua format lain seperti tiff ataupun webp.

/*
    Gresik 7 Agustus 2017.
*/
var express = require('express');
var multer = require('multer');
var path = require('path');
var upload = multer(
    { 
        dest : 'uploads/',
        fileFilter : function(req, file , inst){
            var extFile = path.extname(file.originalname);
            // mime type test
            var filetypeallowed = /png|jpg|jpeg/;
            var mimetype = filetypeallowed.test(file.mimetype); // return boolean
            // cek jika extension bukan png atau mimetype tidak sama dengan png
            if(!(extFile !== ".png" || extFile !== ".jpg" || extFile !== ".jpeg") || !mimetype){
                // skip uploadnya
                console.log('failed');
                inst(null, false)
            } else {
                inst(null, true)
            }
        }
    }
);
var app = express();
var cors = require('cors');
var sharp = require('sharp');
/* Cross Origin */
app.use(cors());
app.post('/fileupload', upload.single('photo'), function(req,res){
    if(req.file){
        sharp('./'+req.file.path).toBuffer().then(
            (data) => {
                sharp(data).jpeg({
                    quality : 50
                }).toFile('./'+req.file.path+'.jpg', (err,info) => {
                    res.send("oke");
                });
            }
        ).catch(
            (err) => {
                res.send('something wrong');
            }
        )
    } else {
        console.log('kamu upload apa hayoo');
        res.send('kamu upload apa gan? file apa hayoo');
    }
});

app.listen(4156, function(){
    console.log('app running');
})

Testing

Pada bagian ini kita akan mencoba untuk melihat perbandingan kualitas gambar dan ukurannya jika dikompressi dengan range 1-100 dengan interval 10 (10,20,30,40,50,60,70,80,90). Nantinnya kita ambil satu nilai yang paling masuka akal di lihat dari kualitas gambar dan ukurannya. Ukuran kecil namun gambar tidak dapat dilihat oleh mata untuk apa ? begitu pula kualitas bagus namun memakan storage yang besar juga akan menambahkan beban infrastruktur.

File gambar dasar

file tersebut memiliki ukuran 409kb. Dengan kita akan coba kompressi dengan resolusi 680×292 dan jenis file png. Konversi hanya pada kualitas gambar dengan tidak melakukan resize.

Quality : 90

ukuran ahir -> 48kb

Quality : 80

ukuran ahir -> 33kb

Quality 70

ukuran ahir -> 25kb

quality 60

ukuran ahir -> 20kb

quality 50

ukuran ahir -> 17kb

Kesimpulan

Semakin kecil quality maka size akan semakin kecil namun gambar semakin blur. Sehingga menurut kami pribadi nilai 80/90 sudah “cukup” karena dengan mengurangi sedikit quality dapat mengurangi size dari 400kb menjadi 33kb (quality 80). Namun itu kembali ke preferensi pribadi anda.