आपको इसके बारे में क्यों सोचना चाहिए?
बिना कंप्रेस की गई इमेज से, आपके पेजों में बिना वजह के बाइट बढ़ जाते हैं. इमेज, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के लिए उम्मीदवार हो सकती हैं. इसलिए, गैर-ज़रूरी बाइट से इमेज के संसाधन लोड होने में लगने वाला समय बढ़ सकता है. इससे एलसीपी का समय भी बढ़ सकता है.
दाईं ओर मौजूद फ़ोटो, बाईं ओर मौजूद फ़ोटो से 40% छोटी है. हालांकि, यह आम तौर पर उपयोगकर्ताओं को एक जैसी ही दिखेगी.
|
|
|
|---|
मापें
लाइटहाउस चलाएं, ताकि इमेज को कंप्रेस करके पेज लोड होने की स्पीड को बेहतर बनाने के अवसरों के बारे में पता चल सके. ये अवसर, "इमेज को बेहतर तरीके से एन्कोड करें" सेक्शन में दिए गए हैं:
Imagemin
इमेज को कंप्रेस करने के लिए, Imagemin एक बेहतरीन विकल्प है. ऐसा इसलिए, क्योंकि यह कई तरह के इमेज फ़ॉर्मैट के साथ काम करता है. साथ ही, इसे बिल्ड स्क्रिप्ट और बिल्ड टूल के साथ आसानी से इंटिग्रेट किया जा सकता है. Imagemin, CLI और npm मॉड्यूल, दोनों के तौर पर उपलब्ध है. आम तौर पर, npm मॉड्यूल सबसे अच्छा विकल्प होता है, क्योंकि यह कॉन्फ़िगरेशन के ज़्यादा विकल्प देता है. हालांकि, अगर आपको किसी कोड में बदलाव किए बिना Imagemin आज़माना है, तो सीएलआई एक अच्छा विकल्प हो सकता है.
प्लग इन
Imagemin को "प्लगिन" के आधार पर बनाया गया है. प्लगिन एक npm पैकेज होता है.यह किसी इमेज फ़ॉर्मैट को कंप्रेस करता है. उदाहरण के लिए, "mozjpeg" JPEGs को कंप्रेस करता है. लोकप्रिय इमेज फ़ॉर्मैट के लिए, चुनने के लिए कई प्लगिन उपलब्ध हो सकते हैं.
किसी प्लगिन को चुनते समय, यह देखना सबसे ज़रूरी होता है कि वह "लॉसी" है या "लॉसलैस." बिना डेटा खोए कंप्रेस करने की प्रोसेस में, कोई डेटा नहीं मिटता. लॉसी कंप्रेस करने से फ़ाइल का साइज़ कम हो जाता है. हालांकि, इससे इमेज की क्वालिटी कम हो सकती है. अगर किसी प्लगिन में यह जानकारी नहीं दी गई है कि वह "लॉसी" है या "लॉसलैस", तो इसके एपीआई से पता लगाया जा सकता है: अगर आउटपुट की इमेज क्वालिटी तय की जा सकती है, तो यह "लॉसी" है.
ज़्यादातर लोगों के लिए, लॉस वाले प्लगिन सबसे अच्छे विकल्प होते हैं. ये फ़ाइल के साइज़ को काफ़ी हद तक कम कर देते हैं. साथ ही, अपनी ज़रूरतों के हिसाब से कंप्रेस करने के लेवल में बदलाव किया जा सकता है. यहां दी गई टेबल में, Imagemin के लोकप्रिय प्लगिन की सूची दी गई है. ये सिर्फ़ उपलब्ध प्लगिन नहीं हैं, लेकिन ये सभी आपके प्रोजेक्ट के लिए अच्छे विकल्प होंगे.
| इमेज फ़ॉर्मैट | लॉसी प्लग इन | लॉसलेस प्लगिन |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
Imagemin CLI
Imagemin CLI, पांच अलग-अलग प्लगिन के साथ काम करता है: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, और imagemin-svgo. Imagemin, इनपुट के इमेज फ़ॉर्मैट के आधार पर सही प्लगिन का इस्तेमाल करता है.
"images/" डायरेक्ट्री में मौजूद इमेज को कंप्रेस करने और उन्हें उसी डायरेक्ट्री में सेव करने के लिए, यह कमांड चलाएं. इससे ओरिजनल फ़ाइलें ओवरराइट हो जाती हैं:
$ imagemin images/* --out-dir=images
Imagemin npm मॉड्यूल
अगर आपको बंडलर के साथ Imagemin का इस्तेमाल करना है, तो देख लें कि आपके चुने गए बंडलर के लिए कोई प्लगिन उपलब्ध है या नहीं. उदाहरण के लिए, webpack एक लोकप्रिय बंडलर है, जो Imagemin के साथ काम करता है. इस कोडलैब में, webpack के साथ Imagemin इस्तेमाल करने के तरीके के बारे में ज़्यादा जानें.
Imagemin को Node स्क्रिप्ट के तौर पर भी इस्तेमाल किया जा सकता है. यह कोड, JPEG फ़ाइलों को कंप्रेस करने के लिए "imagemin-mozjpeg" प्लगिन का इस्तेमाल करता है. इससे फ़ाइलों की क्वालिटी 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);
})();