एक छवि खींचें या चुनने के लिए क्लिक करें
PNG, JPEG, WebP, GIF, BMP, AVIF
यह कैसे काम करता है
प्लेसहोल्डर वह है जो किसी छवि के डाउनलोड होने तक उसकी जगह लेता है। यह दो अलग काम करता है: छवि जितनी जगह लेगी उतनी जगह पहले से आरक्षित करना, ताकि छवि आने पर आसपास का पाठ न खिसके; और अंतिम सामग्री जैसा कुछ दिखाना, ताकि प्रतीक्षा एक धूसर आयत देखने की तुलना में कम लगे।
समाधान तीन तरह के हैं। संक्षिप्त हैश (BlurHash और ThumbHash) छवि को इतनी छोटी टेक्स्ट स्ट्रिंग में समेट देते हैं कि आप उसे रिकॉर्ड के बाकी हिस्सों के साथ डेटाबेस के एक कॉलम में रख सकते हैं; ब्राउज़र उसे डिकोड करके धुंधली छवि बनाता है। data URI (LQIP थंबनेल और SVG) पहले से एन्कोड की गई छवि को HTML या CSS के भीतर ले जाते हैं, इसलिए उन्हें जावास्क्रिप्ट की बिल्कुल ज़रूरत नहीं। और सादा रंग सबसे सस्ता प्लेसहोल्डर है: सिर्फ़ सात वर्ण।
कौन सा उपयुक्त है, यह इस पर निर्भर करता है कि HTML कहाँ बनता है। यदि छवियाँ डेटाबेस से आती हैं और आप उन्हें सैकड़ों की संख्या में सूचीबद्ध करते हैं, तो प्रति रिकॉर्ड सबसे हल्का विकल्प हैश है। यदि आप स्थैतिक पृष्ठ बनाते हैं या ऐसा फ़्रेमवर्क उपयोग करते हैं जो पहले से प्लेसहोल्डर समर्थित करता है, तो data URI डिकोडिंग कोड जोड़ने से बचाता है। यहाँ दिखने वाले सभी मान आपके ब्राउज़र में गणना किए जाते हैं: छवि किसी सर्वर पर अपलोड नहीं होती।
उदाहरण
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjBlurHash की लंबाई केवल घटकों की संख्या पर निर्भर करती है, छवि के आकार या सामग्री पर नहीं: 4 × 3 पर हमेशा 28 वर्ण, 3 × 3 पर 22 और 5 × 4 पर 44 होते हैं।thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHएक ThumbHash 17 से 25 बाइट लेता है, यानी Base64 में 24 से 36 वर्ण। सटीक आकार छवि के अनुपात पर और उसमें पारदर्शिता है या नहीं इस पर निर्भर करता है, क्योंकि यह प्रारूप अल्फ़ा चैनल को भी एन्कोड करता है।lqip 24 px webpdata:image/webp;base64,UklGRi…24 px चौड़ी WebP थंबनेल आमतौर पर 1 KB से कम रहती है। HTML में एम्बेड होने के कारण यह कोई अतिरिक्त अनुरोध नहीं बनाती, पर दस्तावेज़ को भारी करती है, जो अलग से कैश नहीं होता।उपयोग के मामले
- छवियों की तालिका में BlurHash या ThumbHash संग्रहित करें ताकि कोई सूची या अनंत स्क्रॉल वाला फ़ीड पहले ही क्षण से कुछ दिखा सके।
- जब छवि कोई स्थैतिक इम्पोर्ट न हो, तब next/image के blurDataURL या NgOptimizedImage के placeholder को भरें।
- प्लेसहोल्डर को width और height विशेषताओं के साथ मिलाकर उत्पाद या लेख कार्ड में लेआउट शिफ्ट (CLS) से बचें।
- ऐसे स्थैतिक HTML, ईमेल या टेम्पलेट में प्लेसहोल्डर एम्बेड करें जहाँ आप डिकोडिंग जावास्क्रिप्ट नहीं चला सकते।
- वही BlurHash वेब और मोबाइल ऐप दोनों में पुनः उपयोग करें, जिनके लिए Swift, Kotlin और Flutter में डिकोडर उपलब्ध हैं।
- जब बाइट बजट में थंबनेल तक की गुंजाइश न हो, तब औसत रंग को कंटेनर की पृष्ठभूमि के रूप में उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
BlurHash या ThumbHash?
ThumbHash कम बाइट में छवि को अधिक निष्ठा से दोहराता है, पारदर्शिता बनाए रखता है और अनुपात संग्रहित करता है, इसलिए उसे बनाने के लिए आपको मूल आकार जानने की भी ज़रूरत नहीं। BlurHash पुराना और कम सटीक है, पर उसके कार्यान्वयन कहीं अधिक प्लेटफ़ॉर्म और भाषाओं के लिए मौजूद हैं। यदि आप शून्य से शुरू कर रहे हैं तो ThumbHash चुनें; यदि आपके स्टैक में पहले से BlurHash डिकोडर हैं तो स्थानांतरित होने की कोई वजह नहीं।
क्या इससे LCP बेहतर होता है?
सीधे नहीं। प्लेसहोल्डर गति की अनुभूति बेहतर करता है और width तथा height के साथ मिलकर लेआउट शिफ्ट खत्म करता है, पर LCP मीट्रिक तब भी असली छवि के बनने पर ही मापी जाती है। इससे भी बढ़कर: यदि मुख्य छवि ही LCP तत्व है, तो उस पर loading="lazy" न लगाएँ और न ही उसे प्लेसहोल्डर के पीछे टालें; बेहतर है उसे fetchpriority="high" से चिह्नित करें ताकि ब्राउज़र उसे पहले माँगे। प्लेसहोल्डर उन छवियों के लिए हैं जो पहली स्क्रीन से बाहर हैं।
BlurHash में कितने घटक उपयोग करने चाहिए?
क्षैतिज छवियों के लिए चार गुणा तीन अच्छा रहता है और लंबवत के लिए तीन गुणा चार। हर अतिरिक्त घटक दो वर्ण और थोड़ा और विवरण जोड़ता है, पर छह या सात से ऊपर अंतर नंगी आँखों से दिखना बंद हो जाता है, क्योंकि परिणाम वैसे भी धुंधला ही दिखाया जाता है।
हैश या data URI?
हैश प्रति छवि कुछ दर्जन बाइट लेता है और तब आदर्श है जब एक ही पृष्ठ पर कई छवियाँ हों, पर उसे डिकोड करने के लिए क्लाइंट में कोड चाहिए। data URI को कुछ नहीं चाहिए, हालाँकि वह दस से पचास गुना भारी होता है और HTML के भीतर जाता है, जो अलग से कैश नहीं होता। कुछ ही प्रमुख छवियाँ हों तो data URI ठीक है; लंबी सूचियों में हैश।
थंबनेल सीधे इस्तेमाल करने के बजाय SVG क्यों?
क्योंकि धुंधलापन ब्राउज़र तब लगाता है जब वह SVG बनाता है। इससे आप कहीं छोटी थंबनेल से शुरू कर सकते हैं और बड़ा करने पर पिक्सेल के खाने नहीं दिखते, तथा परिणाम हर आकार में समान रूप से चिकना दिखता है। SVG अल्फ़ा को अपारदर्शी भी कर देता है, ताकि धुंधलापन किनारों को पारदर्शी न बना दे।
क्या प्लेसहोल्डर के आकार की कोई सीमा है?
यह उपकरण पर निर्भर करता है। Angular का NgOptimizedImage तब कंसोल में चेतावनी देता है जब प्लेसहोल्डर का data URI 4000 वर्णों से अधिक हो जाए, क्योंकि उसके आगे HTML का भार लाभ से अधिक पड़ने लगता है। यह एक अच्छा सामान्य संदर्भ है: यदि आपकी थंबनेल इस मान से आगे निकले तो चौड़ाई या गुणवत्ता घटाएँ।