Web sitelerinizin yükünü hafifletmek, hızını arttırmak adına yapılan başlıca işlemlerden olan WebP formatında görsel kullanımını hızlandırmak için NodeJS vasıtası ile tüm görsellerinizi toplu olarak sıkıştırıp WebP formatına çevireceğiz.
Önce WebP formatına çevrilecek görselleri toplu olarak bir klasöre toplayıp klasörün adını img yapalım. Sonra anadizine index.js adında bir dosya açalım. Sonrasında adres satırına cmd yazıp enter’a basarak terminali açalım.
Terminal ekranı geldiğinde işimize yarayacak olan npm dosyalarını, npm install imagemin-webp imagemin-jpegtran imagemin-pngquant fonksiyonuyla çağıralım. Sonrasında aşağıdaki kodları index.js dosyasının içine yapıştırıp kaydedelim.
const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');
const imageminWebp = require('imagemin-webp');
(async () => {
const files = await imagemin(['img/*.{jpg,png}'], {
destination: 'img',
plugins: [
imageminJpegtran(),
imageminPngquant(),
imageminWebp(
{
quality: [80, 90, 1] /* WebP çıktısının boyutu ve kalitesi için değerleri değiştirebilirsiniz*/
})
]
});
console.log('WebP dönüştürmesi tamamlandı');
})();
Görseller sıkıştırıldıktan sonra .webp formatındaki yeni görseller de aynı img klasörü içerisine oluşturulacak, farklı klasörde oluşturulmasını istiyorsanız destination: ‘img’ koduna yeni klasörünüzün yolunu tanımlayabilirsiniz.
Kodu index.js içine kaydettikten hemen sonra terminal ekranına node index.js yazıp belirttiğimiz kalitede webp formatına dönüştürmeyi tamamlıyoruz. Farka bakalım.
