blank

YORUM YOK

Görsellerinizi toplu olarak WebP’ye çevirin / NodeJS

13 Haziran 20201 dk'da okunur

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.

Görsellerinizi toplu olarak WebP'ye çevirin - NodeJS
Kodun sağlıklı çalıştığı klasör düzeni.

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.

Sıkıştırmanın yapıldığı terminal ekranı
Sıkıştırmanın yapıldığı terminal ekranı

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.

blank
PNG ve WEBP Sıkıştırma Karşılaştırması

 

blank

Yazıyı beğendiyseniz abone olabilirsiniz!

Epostanızı bırakırsanız bu blogdaki her yazı size bildirilecek.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir