ग्रंट के साथ Imagemin का इस्तेमाल करना

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

Imagemin Grunt प्लगिन सेट अप करें

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

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  • gruntfile.js में, //Add configuration here टिप्पणी को इस कोड ब्लॉक से बदलें:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

यह कोड ब्लॉक, Grunt को बताता है कि किन फ़ाइलों को Imagemin के साथ कंप्रेस किया जाना चाहिए.

  • dynamic बताता है कि कंप्रेस की जाने वाली फ़ाइलों की सूची, डाइनैमिक तौर पर जनरेट की जाएगी. ऐसा, तय किए गए फ़ाइल पैटर्न से फ़ाइलों के नाम का मिलान करके किया जाएगा.

  • फ़ाइल पैटर्न {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} का मिलान images/ डायरेक्ट्री में मौजूद सभी JPEG और PNG इमेज से होगा.

  • इस लाइन को grunt.registerTask(...) से ठीक पहले जोड़कर, Imagemin टास्क को लोड करें:
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • आखिर में, /* list plugins here */ टिप्पणी को 'imagemin' से बदलकर, Imagemin को डिफ़ॉल्ट ग्रंट टास्क के तौर पर जोड़ें. वह लाइन अब कुछ ऐसी दिखेगी:
grunt.registerTask('default', ['imagemin']);

✔✔ चेक-इन

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

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

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

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

  • अपने gruntfile.js में सबसे ऊपर इस लाइन को जोड़कर, imagemin-pngquant प्लगिन का एलान करें:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • imagemin ऑब्जेक्ट में options प्रॉपर्टी जोड़कर, PNG इमेज को कंप्रेस करने की सेटिंग जोड़ें. वह options प्रॉपर्टी ऐसी दिखनी चाहिए:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

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

✔✔ चेक-इन

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

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

लेकिन JPEG के बारे में क्या? प्रोजेक्ट में JPEG इमेज भी हैं, इसलिए आपको यह भी बताना चाहिए कि उन्हें कैसे कंप्रेस किया जाता है.

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

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

  • imagemin-mozjpeg प्लगिन का एलान करने के लिए, इस लाइन को अपने gruntfile.js के ऊपर रखें.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • इसके बाद, options ऑब्जेक्ट के कलेक्शन में mozjpeg({quality: 50}) जोड़ें. वह कलेक्शन अब कुछ ऐसा दिखना चाहिए:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔✔ चेक-इन

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

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Lighthouse चालू करके, नतीजों की पुष्टि करें

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

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

Minified 6 images (saved 667 kB - 66.5%)

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

आखिर में, आपने अभी-अभी जो बदलाव किए हैं उनकी पुष्टि करने के लिए, Lighthouse का इस्तेमाल करें. लाइटहाउस "इमेज को बेहतर तरीके से कोड में बदलें" परफ़ॉर्मेंस ऑडिट से आपको यह पता चलेगा कि आपके पेज पर मौजूद JPEG इमेज को सही तरीके से कंप्रेस किया गया है या नहीं.

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

लाइटहाउस में 'इमेज को बेहतर तरीके से कोड में बदलें' ऑडिट को पास करना

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