Gulp – Resim Optimizasyonu

3 Haziran 2020 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

Gulp ile front-end kısmında çalışmak artık benim için açıkcası vazgeçilmez bir durum oldu. Çünkü; SCSS, Jade ve JavaScript dosyalarını derlemek / sıkıştırmak oldukça kolay ve zevkli. Aksi halde her biri için de çeşitli programlar kullanmak gerekiyor ki bu da hem bilgisayar için ekstra bir yük hem de zaman oldukça fazla bir zaman kaybı demek.

Gulp ile resimleri optimize etmekte çok kolay bir işlem. O halde hemen resimleri nasıl optimize edeceğimizi anlatalım.

Gulp, NodeJS‘nin bir aracı diyebiliriz. Dolayısıyla bilgisayarınızda NodeJS’nin kurulu olduğunu varsayarak devam ediyorum.

Oluşturmuş olduğunuz proje dizinizde ilk olarak Gulp ve daha sonra da Gulp’ın paketi olan gulp-imagemin paketini kurmamız gerekiyor. Bu işlemi npm paket yöneticisi kullanarakta yapabileceğiniz gibi benim sıklıkla kullandığım Yarn‘ı da kullanarak yapabilirsiniz.

gulp ve gulp-imagemin paketlerini indirdikten sonra gulpfile.js dosyamızın içeriği aşağıdaki gibi olacaktır.

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('image-min', function () {
    return (
        gulp.src('images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('images'))
    )
});

Artık gulpfile.js dosyamızı derleyebiliriz.

$ gulp image-min

Yukarıdaki kodlarımıza tekrar dönecek olursak; images dizini altındaki tüm resim dosyalarını optimize edip yine aynı dizin içerisine kaydediyor. Yani bir nevi; optimize edilmemiş resimleri optimize edip optimize edilmemiş hallerini silip optimize edilmiş hallerini tekrar yüklüyor. Burada; optimize edilmemiş resim dosyalarını farklı bir dizinde optimize edilmiş resim dosyalarını farklı bir dizinde saklayabilirsiniz, seçim tamamen size kalmış durumda.

Örneğin bir resim dosyasıyla test edelim. Resmimiz buradaki resim olsun. Bu resmin ölçüleri: 5088×3253 ve boyutu: 3.24MB. Görüldüğü gibi web için oldukça büyük bir resim. Bu resmimizi yukarıdaki kodları kullanarak optimize edelim.

Optimize sonucumuz aşağıdaki gibi olacaktır.

Yukarıdaki resimde de görüldüğü üzere; resmimiz 1.39MB yani %41 oranında küçülmüş. Yeni resmimizin büyüklüğü: 1.91MB.

gulpfile.js dosyamıza en temel şekilde kodlarımızı yazdık. gulp-imagemin paketinin farklı dosya tipleri için farklı yetenekleri de vardır. Bunlar:

gifsicle (GIF resimlerini optimize)

mozjpeg (JPEG resimlerini optimize)

optipng (PNG resimlerini optimize)

svgo (SVG resimlerini optimize)

şeklindedir. Yukarıdaki linkleri inceleyerek sizin için en iyi olan farklı dosya tiplerinde farklı optimize kurallarını uygulayabilirsiniz.

Örneğin; gulp-imagemin sayfasındaki kodları alalım. Yeni gulpfile.js dosyamız aşağıdaki gibi olsun.

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('image-min', function () {
    return (
        gulp.src('images/*')
            .pipe(imagemin([
                imagemin.gifsicle({
                    interlaced: true
                }),
                imagemin.mozjpeg({ 
                    quality: 75, progressive: true 
                }),
                imagemin.optipng({ 
                    optimizationLevel: 5 
                }),
                imagemin.svgo({
                    plugins: [
                        { 
                            removeViewBox: true 
                        },
                        { 
                            cleanupIDs: false 
                        }
                    ]
                })
            ]))
            .pipe(gulp.dest('images'))
    )
});

Örnek resmimizi tekrar optimize edelim. Sonuç aşağıdaki gibi olacaktır.

Yukarıdaki resimde de görüldüğü üzere; resmimiz 1.71MB yani %50.4 oranında küçülmüş. Yeni resmimizin büyüklüğü: 1.60MB.

İlk ve ikinci optimize arasındaki farkların olması yukarıda bahsettiğimiz araçların doğru kullanımıyla alakalı bir durum. Daha önce de size dediğim gibi; sizin için en uygun olan optimize oranını bulmak için bu linkleri inceleyebilirsiniz.

Kategoriler: [Gulp] Etiketler: #gulp #gulp-imagemin #nodejs #npm #yarn

Bir cevap yazın

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

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.