वेबसाइट के लिए इमेज कैसे कंप्रेस करें बिना क्वालिटी खोए

बड़ी इमेज धीमे वेबपेज की सबसे आम वजह हैं। फ़ोन कैमरे की 4 MB की फ़ोटो, ब्लॉग पोस्ट में 800 पिक्सेल चौड़ाई पर दिखाई गई, वही विज़ुअल रिज़ल्ट देती है जो 60 KB की ऑप्टिमाइज़ वर्शन देती है — लेकिन मोबाइल कनेक्शन पर डाउनलोड होने में 60 गुना ज़्यादा समय लगता है।

यह गाइड इमेज को प्रभावी तरीके से कंप्रेस करने के तरीके बताती है: सही फ़ॉर्मेट चुनना, क्वालिटी सेटिंग तय करना, और प्रोडक्शन के लिए कंप्रेशन ऑटोमेट करना।

लॉसी बनाम लॉसलेस कंप्रेशन

लॉसी कंप्रेशन उन पिक्सेल डेटा को हटाता है जो इंसानी आँख शायद ही नोटिस करे — ग्रेडिएंट में रंग बदलाव, आउट-ऑफ-फोकस क्षेत्रों में हाई-फ़्रीक्वेंसी नॉइज़। JPEG और WebP लॉसी कंप्रेशन इस्तेमाल करते हैं। क्वालिटी पैरामीटर (0–100) से ट्रेडऑफ़ कंट्रोल होता है।

लॉसलेस कंप्रेशन डेटा को बिना हटाए पुनर्व्यवस्थित करता है। PNG लॉसलेस कंप्रेशन इस्तेमाल करता है। oxipng जैसे लॉसलेस ऑप्टिमाइज़र से PNG को प्रोसेस करके बिना क्वालिटी हानि के छोटी फ़ाइल मिलती है।

ज़्यादातर वेब इमेज लॉसी कंप्रेशन से फ़ायदा उठाती हैं। अपवाद: लोगो, टेक्स्ट वाले स्क्रीनशॉट, और जहाँ पिक्सेलेशन साफ़ दिखेगा।

सही फ़ॉर्मेट चुनना

डिफ़ॉल्ट नियम: फ़ोटो और UI स्क्रीनशॉट को WebP में बदलें। ट्रांसपेरेंट इमेज PNG (या Alpha वाले WebP) रखें। कोई भी वेक्टर आर्ट SVG में।

प्रभावी क्वालिटी सेटिंग

JPEG और WebP के लिए, क्वालिटी 75–85 वेब का स्टैंडर्ड टारगेट है। 70 से नीचे फ़ोटो में आर्टिफैक्ट दिखने लगते हैं; 85 से ऊपर बचाया गया डेटा विज़ुअली कोई फ़र्क नहीं करता।

ब्राउज़र में

एक-आध इमेज के लिए, इमेज कंप्रेसर में पेस्ट या ड्रैग करें, क्वालिटी स्लाइडर एडजस्ट करें, और कंप्रेस्ड वर्शन डाउनलोड करें। टूल पूरी तरह क्लाइंट-साइड चलता है — इमेज आपके डिवाइस से बाहर नहीं जाती।

कमांड लाइन: sharp (Node.js)

sharp सबसे तेज़ Node.js इमेज प्रोसेसिंग लाइब्रेरी है। यह libvips को wrap करती है।

npm install sharp

const sharp = require('sharp');

// JPEG को क्वालिटी 80 पर WebP में कनवर्ट करें
sharp('input.jpg')
    .webp({ quality: 80 })
    .toFile('output.webp')
    .then(info => console.log(info));

// रिसाइज़ और कंप्रेस करें
sharp('hero.png')
    .resize(1200)          // 1200px चौड़ा, aspect ratio बनाए रखें
    .webp({ quality: 82 })
    .toFile('hero.webp');

पूरी डायरेक्टरी बैच प्रोसेस करें:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images/original';
const outputDir = './images/compressed';

fs.readdirSync(inputDir)
    .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
    .forEach(file => {
        sharp(path.join(inputDir, file))
            .webp({ quality: 80 })
            .toFile(path.join(outputDir, file.replace(/\.(jpg|jpeg|png)$/i, '.webp')));
    });

कमांड लाइन: ImageMagick

ImageMagick ज़्यादातर Linux/macOS सिस्टम पर उपलब्ध है और लगभग हर फ़ॉर्मेट हैंडल करता है।

# इंस्टॉल करें
brew install imagemagick    # macOS
sudo apt install imagemagick # Ubuntu

# क्वालिटी 80 पर JPEG कंप्रेशन
convert input.jpg -quality 80 output.jpg

# WebP में कनवर्ट करें
convert input.jpg -quality 80 output.webp

# अधिकतम 1200px चौड़ा रिसाइज़ करें, फिर कंप्रेस करें
convert input.jpg -resize 1200x -quality 80 output.webp

# फ़ोल्डर में सभी JPEG को WebP में बैच कनवर्ट करें
for f in *.jpg; do convert "$f" -quality 80 "${f%.jpg}.webp"; done

कमांड लाइन: cwebp (Google का WebP एनकोडर)

# इंस्टॉल करें
brew install webp          # macOS
sudo apt install webp      # Ubuntu

# क्वालिटी 80 से कनवर्ट करें
cwebp -q 80 input.jpg -o output.webp

# रिज़ल्ट जाँचें
webpinfo output.webp

Python: Pillow

from PIL import Image

# खोलें और JPEG के रूप में कंप्रेस करें
with Image.open('input.png') as img:
    img.convert('RGB').save('output.jpg', 'JPEG', quality=80, optimize=True)

# खोलें और WebP के रूप में कंप्रेस करें
with Image.open('input.jpg') as img:
    img.save('output.webp', 'WebP', quality=80)

प्रोग्रेस के साथ बैच कंप्रेस करें:

from PIL import Image
from pathlib import Path

input_dir = Path('images/original')
output_dir = Path('images/compressed')
output_dir.mkdir(exist_ok=True)

for img_path in input_dir.glob('*.{jpg,jpeg,png}'):
    with Image.open(img_path) as img:
        out_path = output_dir / img_path.stem
        img.save(f'{out_path}.webp', 'WebP', quality=80)
        print(f'{img_path.name}: {img_path.stat().st_size // 1024}KB → {(out_path.with_suffix(".webp")).stat().st_size // 1024}KB')

रेस्पॉन्सिव इमेज — सिर्फ कंप्रेस नहीं, रिसाइज़ भी करें

3000 पिक्सेल चौड़ी इमेज को क्वालिटी 80 पर कंप्रेस करने से भी बड़ी फ़ाइल रहती है। वेब का सही तरीका है डिवाइस के हिसाब से अलग-अलग साइज़ सर्व करना।

<img
  srcset="
    hero-400.webp   400w,
    hero-800.webp   800w,
    hero-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-1200.webp"
  alt="Hero image"
  loading="lazy"
/>

sharp से साइज़ जनरेट करें:

const sharp = require('sharp');

const widths = [400, 800, 1200];
for (const w of widths) {
    sharp('hero.jpg')
        .resize(w)
        .webp({ quality: 80 })
        .toFile(`hero-${w}.webp`);
}

कंप्रेशन से क्या उम्मीद करें

24-bit PNG/JPEG फ़ोटो को क्वालिटी 80 पर WebP में कनवर्ट करने के सामान्य रिज़ल्ट:

पहले से कंप्रेस्ड JPEG के लिए फ़ायदा कम होता है। PNG फ़ोटो (लॉसलेस एनकोडेड) को लॉसी WebP में कनवर्ट करने पर फ़ायदा सबसे ज़्यादा होता है।

मुख्य बातें

• फ़ोटो और स्क्रीनशॉट को WebP में बदलें — समान क्वालिटी पर JPEG से 25–35% छोटा।
• फ़ोटो के लिए क्वालिटी 75–85 वेब का स्टैंडर्ड टारगेट है।
• लोगो और ट्रांसपेरेंसी वाली इमेज के लिए PNG या Alpha वाला WebP इस्तेमाल करें।
• बैच प्रोसेसिंग के लिए sharp (Node.js) या Pillow (Python) इस्तेमाल करें।
• srcset के ज़रिए कई साइज़ सर्व करें — 400 पिक्सेल की मोबाइल स्क्रीन को 3000 पिक्सेल की इमेज न भेजें।