AI-जेनरेटेड कंटेंट के लिए इमेज ऑप्टिमाइज़ेशन
AI इमेज एक अनूठी परफॉरमेंस समस्या पैदा करती हैं। जब तक जनरेशन पूरा नहीं हो जाता, तब तक आपको इमेज के साइज, फॉर्मेट या कंटेंट का पता नहीं होता। इसके बावजूद, आपको स्लो लोडिंग और लेआउट शिफ्ट (layout shifts) को रोकना होगा।
एक फ्री AI इमेज जनरेटर बनाते समय मैंने इन स्टेप्स का उपयोग किया था।
स्टैंडर्ड ऑप्टिमाइज़ेशन यह मानकर चलता है कि आपको इमेज के बारे में पहले से पता है। आप डाइमेंशन्स (dimensions) की गणना कर सकते हैं और बिल्ड टाइम पर ऑप्टिमाइज़ कर सकते हैं। जेनरेटेड इमेज इस नियम को तोड़ती हैं। जब तक यूजर रिक्वेस्ट नहीं करता, तब तक इमेज मौजूद ही नहीं होती।
डिलीवरी को कैसे हैंडल करें:
- रॉ AI आउटपुट आमतौर पर PNG होता है। PNG फाइलें बहुत बड़ी होती हैं, जो अक्सर 800KB से 1.2MB के बीच होती हैं।
- इमेज को WebP में बदलें। समान क्वालिटी पर WebP फाइलें PNG की तुलना में 25% से 35% छोटी होती हैं।
- WebP के लिए 85 क्वालिटी का उपयोग करें। AI इमेज में नेचुरल टेक्सचर नॉइज़ (texture noise) होती है। हाई सेटिंग्स विजुअल क्वालिटी में सुधार किए बिना फाइल साइज बढ़ा देती हैं।
लेआउट शिफ्ट को कैसे रोकें:
यूजर जनरेट पर क्लिक करने से पहले एक आस्पेक्ट रेशियो (aspect ratio) चुनते हैं। इसका लाभ उठाएं।
- चुने गए रेशियो (1:1, 16:9, आदि) के आधार पर कंटेनर का साइज पहले से तय करें।
- इससे इमेज आने से पहले कंटेनर सही साइज में रहता है।
- यह cumulative layout shift (CLS) को खत्म कर देता है।
लोडिंग स्पीड को कैसे सुधारें:
जेनरेट की गई इमेज आमतौर पर Largest Contentful Paint (LCP) एलिमेंट होती है।
- अपने कोड में इमेज को प्रायोरिटी (priority) के रूप में मार्क करें।
- अपने CDN के लिए preconnect लिंक का उपयोग करें। यह DNS और TLS हैंडशेक को जल्दी हैंडल करता है।
- एक स्केलेटन लोडर (skeleton loader) का उपयोग करें जो ठीक उसी जगह घेरे जहाँ फाइनल इमेज आएगी।
कैशिंग स्ट्रैटेजी:
- इन्फरेंस लेयर (inference layer) पर कैश न करें। हर रिक्वेस्ट फ्रेश महसूस होनी चाहिए।
- डिलीवरी स्पीड के लिए CDN लेयर पर कैश करें।
- प्रत्येक इमेज का एक यूनिक URL होता है, इसलिए एग्रेसिव कैशिंग (aggressive caching) सुरक्षित है।
इन बदलावों के परिणाम:
- औसत साइज: 900KB से 200KB।
- LCP: 4.1s से 1.9s।
- CLS: खत्म हो गया।
कार्यों का सारांश:
- 85 क्वालिटी पर WebP में बदलें।
- चुने गए आस्पेक्ट रेशियो का उपयोग करके कंटेनर्स का साइज पहले से तय करें।
- प्राइमरी इमेज को प्रायोरिटी लोडिंग पर सेट करें।
- CDN लेवल पर भारी कैशिंग करें।
- 'below the fold' वाले सेकेंडरी कंटेंट के लिए ही लेजी लोडिंग (lazy loading) का उपयोग करें।
वैकल्पिक लर्निंग कम्युनिटी: https://t.me/GyaanSetuAi