संक्षेप में: ब्लर प्लेसहोल्डर सजावट नहीं है — यह लोडिंग इफ़ेक्ट के रूप में छिपा हुआ Cumulative Layout Shift करेक्शन है, क्योंकि एक सही ढंग से साइज़ किया गया प्लेसहोल्डर असली फ़ाइल आने से पहले इमेज की सटीक जगह आरक्षित कर लेता है। इस गाइड को Character Counter, Encoding Converter, Text Difference और AI Hidden Characters के साथ जोड़ें।

LQIP (Low Quality Image Placeholder) असली इमेज का एक बहुत छोटा, भारी कम्प्रेस्ड वर्शन है — अक्सर 20×20 पिक्सल या उससे भी छोटा, कुछ सौ बाइट्स — जो फ़ुल-रिज़ॉल्यूशन फ़ाइल लोड होने के दौरान धुंधला और बड़ा करके दिखाया जाता है।

असली समस्या जिसे LQIP हल करता है: लेआउट शिफ़्ट, सौंदर्यशास्त्र नहीं

ऐसे प्लेसहोल्डर के बिना जो इमेज के अंतिम आयाम आरक्षित करता है, पेज इमेज के लिए बिना जगह के रेंडर होता है, फिर फ़ाइल आने के पल में उसके नीचे की हर चीज़ को नीचे धकेल देता है — Cumulative Layout Shift (CLS), Google की Core Web Vitals में से एक, ठीक इसी के लिए दंड देती है। समान आस्पेक्ट रेशियो का प्लेसहोल्डर (धुंधला हो या न हो) पहले रेंडर से ही सही जगह घेरता है, इसलिए असली इमेज लोड होने पर कुछ भी हिलता नहीं — धुंधलापन असली फ़िक्स के ऊपर एक अच्छा एक्स्ट्रा है, जो जगह आरक्षित करना है।

एक बहुत छोटी इमेज कैसे तुरंत एम्बेड होती है

LQIP प्लेसहोल्डर आमतौर पर base64-एनकोडेड डेटा URI के रूप में सीधे HTML में एम्बेड किए जाते हैं — <img src="data:image/jpeg;base64,..."> — इसलिए प्लेसहोल्डर बिना किसी अतिरिक्त नेटवर्क रिक्वेस्ट के रेंडर होता है, जो मायने रखता है क्योंकि पूरी बात कुछ दिखाने की है इससे पहले कि असली इमेज की रिक्वेस्ट पूरी हो। चूँकि सोर्स इमेज बहुत छोटी है (एनकोडिंग से पहले अक्सर 1KB से कम), Base64 का ओवरहेड — रॉ बाइट्स से लगभग 33% बड़ा — किसी प्लेसहोल्डर के लिए नगण्य है, हालाँकि फ़ुल-साइज़ इमेज के लिए यह बेकार है।

LQIP बनाम सॉलिड डोमिनेंट कलर प्लेसहोल्डर

एक बहुत छोटा धुंधला थंबनेल एक सिंगल डोमिनेंट-कलर रेक्टेंगल से ज़्यादा विज़ुअल जानकारी (मोटे आकार, रंग वितरण) रखता है, लेकिन इसका मतलब ज़्यादा सेटअप काम भी है — हर फ़ोटो के लिए एक छोटी इमेज जनरेट और स्टोर करना, बनाम एक ही औसत रंग की गणना करना। किसी फ़ोटो-हेवी गैलरी के लिए जहाँ इमेज ही मुद्दा है, LQIP की एक्स्ट्रा फ़िडेलिटी आमतौर पर इसके लायक है; छोटी UI इमेज या आइकन के लिए, एक फ़्लैट कलर प्लेसहोल्डर कम ओवरहेड के साथ CLS रोकथाम का काम करता है।

प्लेसहोल्डर सही ढंग से जोड़ने का वर्कफ़्लो

  1. हर इमेज टैग पर एक स्पष्ट width और height (या CSS aspect-ratio) सेट करें — यही वास्तव में जगह आरक्षित करता है; प्लेसहोल्डर इमेज खुद अकेले यह नहीं करती।
  2. प्लेसहोल्डर को इमेज के असली आस्पेक्ट रेशियो में जनरेट करें, न कि किसी फ़िक्स्ड साइज़ में जो मेल न खाए — बेमेल रेशियो असली इमेज उसे बदलने पर शिफ़्ट पैदा करता है।
  3. प्लेसहोल्डर को base64 डेटा URI के रूप में एम्बेड करें ज़ीरो-रिक्वेस्ट लोडिंग के लिए, सिर्फ़ वाक़ई छोटी प्लेसहोल्डर इमेज के लिए आरक्षित।
  4. ब्राउज़र की नेटवर्क थ्रॉटलिंग के साथ टेस्ट करें — प्लेसहोल्डर का मूल्य तभी दिखता है जब असली इमेज आने में धीमी हो।

बचने योग्य आम गलतियाँ

  • स्पष्ट आयाम सेट किए बिना ब्लर इफ़ेक्ट जोड़ना — अकेले धुंधलापन लेआउट शिफ़्ट के लिए कुछ नहीं करता।
  • असली इमेज से अलग आस्पेक्ट रेशियो वाला प्लेसहोल्डर उपयोग करना, जो बदले जाने पर वैसे भी शिफ़्ट का कारण बनता है।
  • "स्थिरता के लिए" फ़ुल-साइज़ इमेज को base64 में एम्बेड करना, बिना किसी प्लेसहोल्डर फ़ायदे के पेज का वज़न बढ़ाना।
  • LQIP को शुद्ध रूप से विज़ुअल इफ़ेक्ट मानना और यह चूकना कि इसका असली काम लेआउट स्पेस आरक्षित करना है।

धुंधलापन वह है जो यूज़र्स नोटिस करते हैं; उसके नीचे आयामों के ज़रिए आरक्षित की गई जगह ही वास्तव में आपके Core Web Vitals स्कोर की रक्षा करती है।