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

Katie Hempenius

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

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

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

मापें

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

इमेजमिन

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

प्लग इन

Imagemin को "प्लगइन" के आस-पास बनाया गया है. प्लगिन एक npm पैकेज होता है, जो किसी खास इमेज फ़ॉर्मैट (उदाहरण के लिए, "mozjpeg" JPEG को कंप्रेस करता है). लोकप्रिय इमेज फ़ॉर्मैट एक से ज़्यादा प्लगिन हो सकते हैं.

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

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

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

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

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

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

इमेजमिन एनपीएम मॉड्यूल

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

आप 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);
})();