Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

Katie Hempenius

Imagemin webpack प्लग इन सेट अप करना

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

इस प्रोजेक्ट के लिए मौजूदा webpack.config.js, images/ डायरेक्ट्री से dist/ डायरेक्ट्री में इमेज कॉपी कर रहा है. हालांकि, यह उन्हें कंप्रेस नहीं कर रहा है.

प्रोजेक्ट में बदलाव करने के लिए, Remix to Edit पर क्लिक करें.

ध्यान दें: आपको इमेज को नए dist/ फ़ोल्डर में कॉपी करने की ज़रूरत क्यों पड़ेगी? dist/, "डिस्ट्रिब्यूशन" का छोटा नाम है. ओरिजनल कोड, इमेज वगैरह को उनके डिस्ट्रिब्यूट किए गए वर्शन से अलग रखना आम बात है, क्योंकि वे थोड़े अलग हो सकते हैं.

सबसे पहले, webpack.config.js के सबसे ऊपर यह कोड जोड़कर, Imagemin प्लगिन का एलान करें:

const ImageminPlugin = require('imagemin-webpack-plugin').default;

इसके बाद, plugins[] कलेक्शन में आखिरी आइटम के तौर पर यह कोड जोड़ें. इससे, webpack के इस्तेमाल किए जाने वाले प्लग इन की सूची में Imagemin जुड़ जाता है:

new ImageminPlugin()

✔︎ चेक-इन

आपकी पूरी webpack.config.js फ़ाइल अब कुछ ऐसी दिखनी चाहिए:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

अब आपके पास एक webpack कॉन्फ़िगरेशन है, जो Imagemin का इस्तेमाल करके इमेज को कंप्रेस करता है.

webpack चलाएं

Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
अपनी इमेज को कंप्रेस करने के लिए, कंसोल में यह कमांड टाइप करके webpack चलाएं:

webpack --config webpack.config.js --mode development

हालांकि, अगर webpack को प्रोडक्शन मोड में चलाया जाए, तो क्या होगा?

webpack को फिर से चलाएं, लेकिन इस बार प्रोडक्शन मोड में:

webpack --config webpack.config.js --mode production

इस बार, webpack एक चेतावनी दिखाता है. इससे आपको पता चलता है कि आपकी PNG फ़ाइलें, कुछ हद तक कंप्रेस होने के बावजूद, सुझाई गई साइज़ सीमा से ज़्यादा हैं. (webpack के development और production मोड, अलग-अलग चीज़ों को प्राथमिकता देते हैं. इसलिए, आपको यह चेतावनी सिर्फ़ webpack को प्रोडक्शन मोड में चलाने पर दिखती है.)

इस चेतावनी को ठीक करने के लिए, हमारे Imagemin कॉन्फ़िगरेशन को पसंद के मुताबिक बनाएं.

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

ImageminPlugin() में यह ऑब्जेक्ट पास करके, पीएनजी इमेज को कंप्रेस करने के लिए सेटिंग जोड़ें:

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

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

✔︎ चेक-इन

आपकी webpack.config.js फ़ाइल अब ऐसी दिखनी चाहिए:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

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

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

JPG को कंप्रेस करने के लिए, imagemin-webpack-plugin के डिफ़ॉल्ट प्लगिन (imagemin-jpegtran) के बजाय, imagemin-mozjpeg प्लगिन का इस्तेमाल करें. Jpegtran के उलट, Mozjpeg आपको JPG कंप्रेस करने के लिए, कंप्रेस करने की क्वालिटी तय करने की सुविधा देता है. हमने इस Glitch में आपके लिए Mozjpeg प्लग इन पहले ही इंस्टॉल कर दिया है. हालांकि, आपको अपनी webpack.config.js फ़ाइल में बदलाव करना होगा:

imagemin-mozjpeg प्लगिन को शुरू करने के लिए, अपनी webpack.config.js फ़ाइल में सबसे ऊपर यह लाइन जोड़ें:

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

ImageminPlugin() को पास किए गए ऑब्जेक्ट में plugins प्रॉपर्टी जोड़ें, ताकि ऑब्जेक्ट अब ऐसा दिखे:

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

यह कोड, webpack को Mozjpeg प्लग इन का इस्तेमाल करके, JPG फ़ाइलों को 50 की क्वालिटी में कंप्रेस करने के लिए कहता है. इसमें 0 सबसे खराब और 100 सबसे अच्छी क्वालिटी है.

अगर आपको किसी ऐसे प्लग इन के लिए सेटिंग जोड़नी हैं जो imagemin-webpack-plugin का डिफ़ॉल्ट प्लग इन है, तो उन्हें ImageminPlugin() को पास किए गए ऑब्जेक्ट पर, की-ऑब्जेक्ट पेयर के तौर पर जोड़ा जा सकता है. Pnquant की सेटिंग इसका एक अच्छा उदाहरण है.

हालांकि, अगर Mozjpeg जैसे नॉन-डिफ़ॉल्ट प्लग इन के लिए सेटिंग जोड़ी जा रही हैं, तो उन्हें plugins प्रॉपर्टी से जुड़े कलेक्शन में शामिल करके जोड़ा जाना चाहिए.

✔︎ चेक-इन

अब आपका कोड कुछ ऐसा दिखना चाहिए:

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

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

कंसोल में, webpack को फिर से चलाएं:

webpack --config webpack.config.js --mode production

बहुत बढ़िया! आपके किए गए बदलावों से, वेबपैक से जुड़ी चेतावनियां ठीक हो जानी चाहिए.

webpack आपको बड़ी इमेज के बारे में चेतावनी देता है. हालांकि, यह आपको यह नहीं बता सकता कि इमेज कंप्रेस नहीं की गई हैं या कम कंप्रेस की गई हैं. इसलिए, अपने बदलावों की पुष्टि करने के लिए, Lighthouse का इस्तेमाल करना हमेशा एक अच्छा तरीका होता है.

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

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

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

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