छवि कंप्रेसर

छवि संपीड़न और वेब प्रदर्शन

वेबसाइट की speed में images सबसे बड़ा bottleneck होती हैं। Google के PageSpeed Insights में "Properly size images" और "Serve images in next-gen formats" सबसे आम suggestions में होते हैं। एक unoptimized image जो 5MB की है, optimize होने के बाद 500KB रह सकती है — और user को फर्क नज़र भी नहीं आएगा।

Page load time सीधे bounce rate से जुड़ा है। Research बताती है कि अगर page 3 seconds से ज़्यादा load होने में लगे, तो 40% users छोड़ देते हैं। E-commerce sites में 1 second की delay 7% conversion loss का कारण बन सकती है।

Image Compression के दो प्रकार

Lossy Compression (हानिकारक संपीड़न)

Lossy compression में कुछ data permanently delete होता है। JPEG format इसी सिद्धांत पर काम करता है। यह human eye की limitations का फायदा उठाता है — हम subtle color differences और fine details को उतना नहीं देख पाते जितना computer store करता है। Quality 80% पर रखने पर file size में dramatic reduction आती है लेकिन visually image लगभग same दिखती है।

Lossless Compression (हानिरहित संपीड़न)

Lossless compression में कोई data नहीं जाता — सिर्फ redundant patterns को efficiently encode किया जाता है। PNG format lossless है। इसमें file छोटी होती है लेकिन उतनी नहीं जितनी lossy में। Lossless compression उन images के लिए ज़रूरी है जिनमें text, logos, या sharp edges हों जहां quality compromise नहीं किया जा सकता।

WebP Format — नई पीढ़ी का format

WebP Google द्वारा 2010 में develop किया गया था और आज यह modern web का standard बन रहा है। WebP के फायदे:

• JPEG की तुलना में 25-35% छोटा same quality पर
• PNG की तुलना में 26% छोटा lossless mode में
• Transparency support PNG की तरह (alpha channel)
• Animation support GIF की तरह
• सभी modern browsers (Chrome, Firefox, Safari, Edge) support करते हैं

WebP कब use करें

अधिकांश web images के लिए WebP ideal choice है। Photos के लिए lossy WebP और logos/icons/screenshots के लिए lossless WebP। केवल backward compatibility की ज़रूरत होने पर JPEG/PNG रखें।

Image Optimization के Best Practices

सही dimensions

Image को page पर जितने pixels में display होना है, उससे बड़ी image serve करना wasteful है। एक 4000x3000 pixel की photo जो 400x300 pixels में display होगी, उसे crop/resize करके serve करें।

Responsive images

HTML में srcset attribute से different resolutions के लिए अलग images serve करें:

<img src="photo-400.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px">

Lazy loading

Viewport में visible नहीं हैं उन images को immediately load न करें:

<img src="photo.webp" loading="lazy" alt="description">

CDN का उपयोग

Cloudflare, AWS CloudFront, या Fastly जैसे CDNs images को users के नज़दीकी server से serve करते हैं जिससे latency कम होती है।

Quality बनाम File Size का संतुलन

Quality 80-85% पर रखने से JPEG images में 50-70% size reduction आती है और visual difference minimal होता है। Quality 60-70% पर और reduction होती है लेकिन closely inspect करने पर artifacts दिखने लगते हैं। Photography portfolios के लिए 90%+ quality रखें, blog thumbnails और social media के लिए 75-85% पर्याप्त है।