Gulp के साथ Imagemin का इस्तेमाल करना

केटी हेम्पेनियस

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में इस ग्लिच को खोलें.

Imagemin Gulp प्लग इन सेटअप करें

इस Glitch में पहले से ही gulp, gulp-cli, और gulp-imagemin प्लगिन मौजूद है. Imagemin के लिए कॉन्फ़िगरेशन जोड़ने के लिए, आपको अपनी gulpfile.js फ़ाइल में बदलाव करना होगा.

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
• सबसे पहले, gulpfile.js में सबसे ऊपर इस कोड को जोड़कर gulp-imagemin प्लगिन को शुरू करें:

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

• इसके बाद, gulpfile.js में //Add tasks here टिप्पणी को इस कोड ब्लॉक से बदलें:

gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

यह कोड एक गल्प टास्क जोड़ता है, जो images/ डायरेक्ट्री में मौजूद इमेज को कंप्रेस करने के लिए Imagemin का इस्तेमाल करता है. ओरिजनल इमेज को ओवरराइट किया जाता है और उसी images/ डायरेक्ट्री में सेव किया जाता है.

✔✔ चेक-इन

आपकी gulpfile.js फ़ाइल अब कुछ इस तरह दिखेगी:

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

अब आपके पास एक gulpfile.js है, जिसका इस्तेमाल इमेज को कंप्रेस करने के लिए किया जा सकता है.

गल्प चलाएं

1. टूल बटन पर क्लिक करें.
2. इसके बाद, कंसोल बटन पर क्लिक करें.
3. कंसोल में नीचे दिया गया कमांड लिखकर, अपनी इमेज कंप्रेस करने के लिए Gulp चलाएं:

gulp

गल्प पूरा होने पर, आपको टर्मिनल में इस तरह का एक संदेश दिखाई देगा:

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

फ़ाइल के साइज़ में 15% का सुधार करना एक अच्छी शुरुआत है. हालांकि, अलग-अलग कंप्रेशन सेटिंग का इस्तेमाल करके ज़्यादा सुधार किए जा सकते हैं.

अपने Imagemin कॉन्फ़िगरेशन को पसंद के मुताबिक़ बनाएँ

imagemin-pngquant कंप्रेशन क्वालिटी लेवल के बारे में बताने वाला एक प्लगिन है. हमने imagemin-pngquant को इस प्रोजेक्ट के package.json फ़ाइल में पहले ही जोड़ दिया है, ताकि आप अपनी PNG फ़ाइल को कंप्रेस करने के लिए इसका इस्तेमाल कर सकें. इसका इस्तेमाल करने के लिए, प्लगिन की जानकारी दें. साथ ही, अपनी गल्पफ़ाइल में कंप्रेस करने की क्वालिटी का लेवल बताएं.

• अपने gulpfile.js में सबसे ऊपर इस लाइन को जोड़कर, imagemin-pngquant प्लगिन का एलान करें:

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

• नीचे दिए गए कलेक्शन को ImageminPlugin() में पास करके, imagemin-pngquant प्लगिन (और उसकी सेटिंग) जोड़ें:

[pngquant({quality: [0.5, 0.5]})]

यह कोड, Imagemin को Pngquant प्लगिन का इस्तेमाल करके PNG फ़ाइल कंप्रेस करने के लिए कहता है. quality फ़ील्ड कंप्रेशन लेवल तय करने के लिए, min और max वैल्यू की रेंज का इस्तेमाल करता है—0 सबसे कम और 1 सबसे ज़्यादा है. सभी इमेज को 50% क्वालिटी पर कंप्रेस करने के लिए, 0.5 को कम से कम और सबसे ज़्यादा वैल्यू, दोनों के तौर पर पास करें.

✔✔ चेक-इन

आपकी gulpfile.js फ़ाइल अब कुछ इस तरह दिखेगी:

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

लेकिन JPG के बारे में क्या? प्रोजेक्ट में JPG इमेज भी हैं; इन्हें भी कंप्रेस करना होगा.

अपने Imagemin कॉन्फ़िगरेशन को पसंद के मुताबिक़ बनाएँ (जारी)

JPG इमेज को कंप्रेस करने के लिए, imagemin-mozjpeg प्लगिन का इस्तेमाल करें. यह प्लगिन आपके लिए पहले से इंस्टॉल किया गया है.

• इस लाइन को अपने gulpfile.js के ऊपर रखकर, imagemin-mozjpeg प्लगिन का एलान करें.

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

• इसके बाद, ImageminPlugin() को पास किए गए कलेक्शन में mozjpeg({quality: 50}) जोड़ें:

[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔✔ चेक-इन

आपकी gulpfile.js फ़ाइल अब कुछ इस तरह दिखेगी:

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Gulp को फिर से चलाएं और Lighthouse की मदद से नतीजों की पुष्टि करें

• Gulp फिर से चलाएं:

gulp

गल्प पूरा होने पर, आपको टर्मिनल में इस तरह का एक संदेश दिखाई देगा:

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

बहुत बढ़िया! ये नतीजे काफ़ी बेहतर होते हैं.

आखिर में, आपने अभी-अभी जो बदलाव किए हैं उनकी पुष्टि करने के लिए, Lighthouse का इस्तेमाल करें.

लाइटहाउस "इमेज को बेहतर तरीके से कोड में बदलें" परफ़ॉर्मेंस ऑडिट से आपको यह पता चल सकता है कि आपके पेज पर मौजूद JPEG इमेज को सही तरीके से कंप्रेस किया गया है या नहीं.

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
• अपने Glitch के लाइव वर्शन पर Lighthouse > विकल्प > परफ़ॉर्मेंस ऑडिट चलाएं. साथ ही, पुष्टि करें कि "इमेज को बेहतर तरीके से एन्कोड करें" ऑडिट पास हो गया है.

हो गया! आपने अपने पेज पर इमेज को बेहतर तरीके से कंप्रेस करने के लिए, Imagemin का इस्तेमाल किया है.