NodeJS Resim Sıkıştırma

Herkese merhaba, NodeJS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde resim sıkıştırmayı anlatacağım. Hadi başlayalım !

Bir resim dosyası sıkıştırılmamış halde gereksiz veriler içerebilir ve bu veriler dosya boyutunu arttırabilir. En iyi sıkıştırma oranına sahip resim uzantılarından olan PNG’de bile dosya boyutu bazen hayli fazla olabiliyor. Ki web sitesi olanlar bilir, resim dosyalarının boyutları sitenin açılma hızını etkileyen en önemli faktörlerden birisi. Bir dosya ne kadar büyük boyutlu ise dosyanın indirilmesi o kadar uzun sürer ve siteyi yavaşlatır. Bu yüzden resim dosyaları sunucuya yüklenmeden önce sıkıştırılması gerekir. Tabi her resim yüklemesi yapmadan önce sıkıştırma işlemini yapmakla uğraşmayacağız, en azından ben uğraşmam çünkü bi zaman sonra sıkılırım 🙂

Örneğin ben bu sitemde resim dosyalarını yüklüyorum ve sunucum otomatik optimize ederek sıkıştırıyor, yani her şey kod ile yapılıyor. Benim sitem NodeJS ile yazılmadı fakat NodeJS ile de resim sıkıştırma işlemi yapılabiliyor. Artık bu işleme de geçebiliriz.

İlk olarak bir tane NodeJS projesi oluşturalım. Bunun için proje oluşturmak istediğimiz dizine terminal (Windows için CMD) ile geçerek

npm init --yes

komutunu çalıştıralım. Bu komutun ardından NodeJS projesi oluşturulmuş olacaktır.

Resim sıkıştırmak için kullanacağımız paketin adı Jimp ve bu paket NodeJS kurulumu ile beraber gelmiyor, yani elle kurmamız gerekecek. Bunun için yine terminalden

npm i jimp

komutunu çalıştırmamız yeterli olacaktır. Bu komutun ardından Npm, Jimp paketini indirecek ve projeye dahil edecektir. Son olarak proje ana dizininde index.js adında bir tane Javascript dosyası oluşturup açalım ve artık Javascript kodu yazmaya başlayalım.

İlk olarak projeye eklediğimiz Jimp paketini index.js dosyası içerisinde çağıralım. Bunun için sayfanın başına

const jimp = require('jimp');

kod satırını yazalım.

Jimp ile resim sıkıştırmak için 2 farklı yolumuz bulunmakta. Birincisi doğrudan dosya üzerinden sıkıştırma yapmak, ikincisi dosyayı buffera çevirerek sıkıştırma yapmak. Aslında her iki yolda da kullanılan metodlar aynı, tek fark gönderilen parametrelerin veritipi. Sıkıştırma yapmak için az önce sayfada çağırdığımız jimp nesnesi altında bulunan read() fonksiyonunu kullanıyoruz ve bu fonksiyonun dosya adı ve callback fonksiyonu ve buffer ve callback fonksiyonu olmak üzere 2 farklı kullanımı mevcut.

Birinci parametrede dosya adının verildiği kullanımında doğrudan dosyanın yoluyla beraber adını vermemiz yetiyor. Buffer ile kullanımında ise dosyayı öncelikle buffera çevirmemiz gerekecek. callback fonksiyonda da hata olması durumunda yakalamak için error ve hata olmaması durumunda işlemi yapmak için value adında iki parametresi bulunuyor. Yani örneğin dosya yolunu yanlış yazdıysanız yada buffer geçerli bi buffer değilse error parametresi ile yakalıyoruz, herhangi bir hata yoksa da value parametresini kullanarak sıkıştırma işlemi yapıyoruz. value parametresi üzerinden sıkıştırma yapmak içinde value nesnesi altında bulunan quality fonksiyonunu kullanıyoruz. Bu fonksiyon number tipte bir tane parametre alıyor ve resmin kalitesini parametre olarak gönderdiğimiz değere çekiyor. Ki zaten sıkıştırma yaptığımız zaman aslında arka tarafta yapılan işlemde tam olarak bu. Yani sıkıştırma yapmak demek resmin kalitesini düşürmek demek. Nitekim Whatsapp’tan bir resim gönderdiğinizde resim önce sıkıştırılır, sonra gönderilir. Gönderdiğiniz resme telefon hafızasından baktığınız zaman orijinal boyutunun nerdeyse 3’te biri hatta bazı resimlerde 10’da biri kadar olduğunu görürsünüz. Whatsapp üzerinden gönderdiğiniz resimler Whatsapp’ın sunucusunda saklandığı için daha az yer kaplaması için sıkıştırılır, yani kalitesi düşürülür.

Sıkıştırılmış resmi kaydetmek içinde quality() fonksiyonundan sonra write() fonksiyonunu kullanıyoruz. Bu fonksiyonda string tipte dosya yolunu parametre olarak istiyor ve gönderdiğiniz parametredeki dosya yoluna resmi kaydediyor. Tabi resim yolu resmin adını da kapsayacak şekilde olmalı, yani bi dosya olmalı.

Örneğin masaüstünde bulunan ‘deneme.jpg’ adındaki bir dosyayı %40 oranında sıkıştıralım ve masaüstünde sıkıştırılmış.jpg adıyla kaydedelim. İlk olarak dosya yolunu verdiğimiz yöntemi kullanalım.

jimp.read('c:/users/kullanici/desktop/deneme.jpg', function(error, value) {
    if(error) throw error;
    value.quality(60).write('c:/users/kullanici/desktop/sikistirilmis.jpg');
});

%40 oranında sıkıştırmak, resmin kalitesini %60 oranında düşürmek demek olduğu için quality() fonksiyonuna 60 değerini gönderdik. Yani quality() fonksiyonuna göndereceğimiz parametre 100 – (sıkıştırma boyutu) olarak gönderilmeli ve bir resmin kalitesi en az %0, en fazla %100 olacağından 0-100 arasında değer almalıdır.

Şimdi de aynı resmi buffer kullanarak sıkıştıralım. Bunun için read() fonksiyonuna buffer göndermemiz gerekiyor. Resmi buffera çevirmek içinde fs modülünü kullanabiliriz. Tabi fs modülünü kullanmak için öncelikle Javascript dosyası içerisinde çağırmamız gerekecek. Bunun için sayfanın başına

const fs = require('fs');

Buffer göndererek resim sıkıştırma örneğimizde şu şekilde olacaktır;

const buffer = fs.writeFileSync('c:/users/kullanici/desktop/deneme.jpg');
jimp.read(buffer, function(error, value) {
    if(error) throw error;
    value.quality(60).write('c:/users/kullanici/desktop/sikistirilmis.jpg');
});

Eveett NodeJS ile resim sıkıştırma işlemi bu kadardı, haliyle yazımızında sonuna geldik. Tüm NodeJS derslerimize <a href=”/kategori/programlama-dilleri/nodejs/” class=”text-red”>buraya tıklayarak</a> ulaşabilirsiniz. Herkese hayırlı günler.