संक्षेप में: प्लेसहोल्डर इमेज सटीक आयाम की धूसर (या रंगीन) डमी ग्राफ़िक हैं, जो डिज़ाइन करते समय असली फ़ोटो की जगह लेती हैं। इनका असली मूल्य यह है कि ये सही जगह पहले ही आरक्षित कर देती हैं, ताकि अंतिम असेट आने से पहले और बाद लेआउट एक जैसा व्यवहार करे — कोई reflow नहीं, कोई आश्चर्य नहीं। यह गाइड बताती है कब उपयोग करें, कौन-सा फ़ॉर्मैट निर्यात करें, और लेआउट शिफ्ट कैसे टालें।
लेआउट बनाने से पहले अंतिम फ़ोटोग्राफ़ी का इंतज़ार करना उल्टा है। प्लेसहोल्डर इमेज आपको पहले आयाम तय करने देती हैं, फिर असली विज़ुअल डालने देती हैं बिना लेआउट को अचानक खिसकाए।
जगह आरक्षित करें, सिर्फ़ भरें नहीं
प्लेसहोल्डर की सबसे मूल्यवान बात यह है कि यह वही सटीक चौड़ाई-ऊँचाई घेरता है जो असली इमेज उपयोग करेगी। यदि लेआउट बिना आरक्षित आयाम वाली इमेज के इर्द-गिर्द बना है, तो अंतिम असेट डालने पर सब कुछ उछल पड़ता है — टेक्स्ट फिर से बहता है, बटन खिसकते हैं, और वेब पर यह Cumulative Layout Shift के रूप में दिखता है। शुरू से सही-आकार प्लेसहोल्डर के साथ डिज़ाइन करने से अंतिम अदला-बदली इमेज बदलती है, स्थिति नहीं।
असली आयाम और अनुपात मिलाएँ
प्लेसहोल्डर तभी उपयोगी है जब वह आने वाले से मेल खाए। अंतिम इमेज के वास्तविक पिक्सेल आयाम और पहलू अनुपात (aspect ratio) सेट करें — 16:9 हीरो, 1:1 अवतार, 4:3 थंबनेल — ताकि मॉकअप वास्तविकता को प्रतिबिंबित करे। हर प्लेसहोल्डर पर उसका आकार अंकित करना (कई जेनरेटर इसे इमेज पर छापते हैं) समीक्षा में बेमेल पकड़ना आसान बनाता है।
retina और उच्च-DPI
उच्च-घनत्व स्क्रीन पर इमेज को अपने लेआउट आकार से अधिक भौतिक पिक्सेल चाहिए। प्लेसहोल्डर को 2×, 3× या 4× पर निर्यात करना यह जाँचने देता है कि असली असेट retina डिस्प्ले पर कैसा दिखेगा, और पुष्टि करता है कि आपने अंतिम संस्करण के लिए ज़रूरी बड़ी फ़ाइल की योजना बना ली है।
कौन-सा फ़ॉर्मैट निर्यात करें
- PNG / WebP — स्क्रीन मॉकअप और प्रोटोटाइप के लिए।
- SVG — रिज़ॉल्यूशन-स्वतंत्र, छोटा, तब आदर्श जब सटीक आकार अब भी अनिश्चित हो।
- Base64 / Data URI — प्लेसहोल्डर को सीधे HTML या CSS में एम्बेड करता है, बिना बाहरी फ़ाइल के स्व-निहित प्रोटोटाइप के लिए सुविधाजनक।
एक व्यावहारिक वर्कफ़्लो
- अपने लेआउट के इमेज-स्लॉट और उनके असली आयाम सूचीबद्ध करें।
- उन्हें प्लेसहोल्डर इमेज जेनरेटर में बनाएँ — सभी आकार एक साथ बनाने के लिए बैच मोड उपयोग करें।
- उन्हें डिज़ाइन में डालें और पुष्टि करें कि व्यूपोर्ट का आकार बदलने पर कुछ न खिसके।
- असली असेट एक-एक कर बदलें; चूँकि जगह आरक्षित है, लेआउट स्थिर रहता है।
यदि उन इमेजों के आस-पास सामग्री भरने हेतु डमी टेक्स्ट भी चाहिए, तो Lorem Ipsum जेनरेटर जोड़ें ताकि पूरा मॉकअप यथार्थ घनत्व में पढ़े।
बचने योग्य आम ग़लतियाँ
- ग़लत अनुपात के प्लेसहोल्डर उपयोग करना, जिससे असली इमेज अप्रत्याशित रूप से क्रॉप हो।
- इमेज के आयाम आरक्षित न करना, जिससे अंतिम आने पर लेआउट शिफ्ट हो।
- retina स्केलिंग अनदेखा करना और फ़ाइल आकार कम आँकना।
- प्लेसहोल्डर को प्रोडक्शन में भेज देना क्योंकि उसे कभी बदला ही नहीं गया।