इमेज को कंप्रेस करने के लिए Imagemin का इस्तेमाल करना

Katie Hempenius

आपको इसके बारे में क्यों सोचना चाहिए?

बिना कंप्रेस की गई इमेज आपके पेजों को बेवजह बढ़ा देती हैं. इमेज सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए कैंडिडेट हो सकती हैं. इसलिए, ये ग़ैर-ज़रूरी बाइट रिसॉर्स लोड होने में लगने वाले समय को बढ़ा सकती हैं. इस वजह से, एलसीपी में ज़्यादा समय लग सकता है.

दाईं ओर वाली फ़ोटो, बाईं ओर की फ़ोटो से 40% छोटी है, फिर भी हो सकता है कि वह औसत उपयोगकर्ता की तरह दिखे.

दूरी मापें

इमेज को कंप्रेस करके, पेज लोड को बेहतर बनाने के अवसरों का पता लगाने के लिए लाइटहाउस चलाएं. ये अवसर "इमेज को बेहतर तरीके से कोड में बदलें" सेक्शन में दिए गए हैं:

इमेजमिन

Imagemin, इमेज कंप्रेशन का एक बेहतरीन विकल्प है, क्योंकि यह कई तरह के इमेज फ़ॉर्मैट के साथ काम करता है. साथ ही, इसे बिल्ड स्क्रिप्ट और बिल्ड टूल के साथ आसानी से इंटिग्रेट किया जा सकता है. Imagemin को CLI और npm मॉड्यूल, दोनों के तौर पर इस्तेमाल किया जा सकता है. आम तौर पर, एनपीएम मॉड्यूल सबसे अच्छा विकल्प होता है, क्योंकि यह ज़्यादा कॉन्फ़िगरेशन विकल्प देता है. हालांकि, अगर किसी कोड को छुए बिना Imagemin को आज़माना है, तो सीएलआई एक अच्छा विकल्प है.

प्लग इन

Imagemin को "प्लगिन" के साथ बनाया गया है. प्लगिन एक ऐसा npm पैकेज होता है जो किसी खास इमेज फ़ॉर्मैट को कंप्रेस करता है (जैसे कि "mozjpeg", JPEG को कंप्रेस करता है). लोकप्रिय इमेज फ़ॉर्मैट में चुनने के लिए कई प्लगिन हो सकते हैं.

किसी प्लग इन को चुनते समय सबसे ज़रूरी बात यह है कि वह "लॉसी" हो या "लॉसी". लॉसलेस कंप्रेशन में, कोई डेटा गायब नहीं होता. कंप्रेस होने से फ़ाइल का साइज़ कम हो जाता है, लेकिन इमेज की क्वालिटी कम हो जाती है. अगर किसी प्लगिन में यह जानकारी नहीं दी गई है कि वह "लॉसी" है या "लॉसी", तो एपीआई की मदद से यह पता लगाया जा सकता है: अगर आउटपुट की इमेज क्वालिटी तय की जा सकती है, तो वह "लॉसी" है.

ज़्यादातर लोगों के लिए, नुकसान पहुंचाने वाले प्लगिन सबसे अच्छे विकल्प होते हैं. इन टूल से फ़ाइल के साइज़ में काफ़ी ज़्यादा बचत होती है. साथ ही, इनकी मदद से कंप्रेशन लेवल को पसंद के मुताबिक बनाया जा सकता है. नीचे दी गई टेबल में, Imagemin के लोकप्रिय प्लगिन की सूची दी गई है. उपलब्ध सिर्फ़ ये प्लग इन नहीं हैं, लेकिन ये सभी आपके प्रोजेक्ट के लिए अच्छे विकल्प होंगे.

इमेजमिन सीएलआई

Imagemin सीएलआई पांच अलग-अलग प्लगिन के साथ काम करता है: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, और imagemin-svgo. Imagemin एक सही प्लगिन का इस्तेमाल करता है. ऐसा, इनपुट के इमेज फ़ॉर्मैट के आधार पर होता है.

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

$ imagemin images/* --out-dir=images

इमेजमिन npm मॉड्यूल

अगर इनमें से किसी बिल्ड टूल का इस्तेमाल किया जाता है, तो Imagemin के लिए वेबपैक, गल्प या ग्रंट की मदद से, कोडलैब की जांच करें.

आप Imagemin का इस्तेमाल नोड स्क्रिप्ट के तौर पर भी कर सकते हैं. यह कोड "imagemin-mozjpeg" प्लगिन का इस्तेमाल करके, JPEG फ़ाइलों को 50 की क्वालिटी कंप्रेस करने के लिए इस्तेमाल करता है ('0' सबसे खराब; '100' सबसे अच्छा है):

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

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();