हर प्रोजेक्ट में एक अटपटा बीच का दौर आता है। लेआउट आकार ले रहा है, क्लाइंट प्रगति देखना चाहता है, लेकिन फ़ोटो अभी तैयार नहीं हैं। फ़ोटोग्राफ़र अगले हफ़्ते के लिए बुक है, प्रोडक्ट शॉट अभी गोदाम में हैं, और इलस्ट्रेशन "लगभग पूरे" हैं। तो पेज ख़ाली जगहों से भरा है, या उससे भी बुरा, बेतरतीब स्टॉक फ़ोटो से, जिन्हें क्लाइंट पसंद कर बैठता है और फिर पा नहीं सकता।
अच्छी प्लेसहोल्डर इमेज इसे चुपचाप हल कर देती हैं। वे जगह घेरे रखती हैं, सबको दिखाती हैं कि क्या कहाँ जाएगा, और फ़ाइनल कंटेंट के बारे में कोई वादा किए बिना डिज़ाइन को असली जैसा महसूस कराती हैं। यह गाइड बताती है कि वे क्यों मायने रखती हैं, कौन से साइज़ इस्तेमाल करें, कौन सा फ़ॉर्मेट चुनें, और लेआउट तोड़े बिना उन्हें असली इमेज से कैसे बदलें।
प्लेसहोल्डर सही तरीक़े से बनाना क्यों फ़ायदेमंद है
जो इमेज हाथ में हो, उसे डाल देना लुभावना है। सही प्लेसहोल्डर पर लगाए कुछ मिनट फ़ायदा देते हैं:
- वे उम्मीदें तय करते हैं। "Team photo, 1200 × 600" लेबल वाला स्लेटी बॉक्स क्लाइंट को ठीक-ठीक बताता है कि वहाँ क्या आएगा। बेतरतीब स्टॉक फ़ोटो एक ऐसी तस्वीर पर बहस को न्योता देती है जो इस्तेमाल ही नहीं होगी।
- वे लेआउट पक्का करते हैं। जब प्लेसहोल्डर का आकार फ़ाइनल इमेज जितना होता है, तो डिज़ाइन पहले दिन से अपने असली अनुपात में टेस्ट होता है।
- वे कंटेंट बनाने वालों को दिशा देते हैं। फ़ोटोग्राफ़र और डिज़ाइनर ठीक-ठीक देख सकते हैं कि कौन से साइज़ और आकार चाहिए।
- वे आपको लाइसेंसिंग की परेशानी से दूर रखते हैं। जिन इमेज के अधिकार आपके पास नहीं हैं, उन्हें अस्थायी रूप से इस्तेमाल करना भी अक्सर लाइव साइट तक पहुँच जाता है।
आम लेआउट के लिए साइज़ गाइड
प्लेसहोल्डर का अनुपात फ़ाइनल इमेज से मेल खाना चाहिए। आम वेब लेआउट के लिए ये समझदार शुरुआती बिंदु हैं:
| हिस्सा | आम साइज़ | Aspect ratio |
|---|---|---|
| हीरो बैनर | 1200 × 600 | 2:1 |
| ब्लॉग या लेख का कवर | 1200 × 675 | 16:9 |
| कार्ड थंबनेल | 600 × 400 | 3:2 |
| प्रोडक्ट फ़ोटो | 800 × 800 | 1:1 |
| प्रोफ़ाइल या avatar | 200 × 200 | 1:1 |
| ईमेल हेडर | 600 × 200 | 3:1 |
| सोशल शेयर इमेज | 1200 × 630 | लगभग 1.91:1 |
याद रखें कि हाई-रिज़ॉल्यूशन स्क्रीन इमेज को उनके CSS साइज़ के दो या तीन गुना पर दिखाती हैं, इसलिए 600 पिक्सल वाली कार्ड इमेज को शार्प दिखने के लिए 1200 पिक्सल की फ़ाइल चाहिए हो सकती है; स्क्रीन रिज़ॉल्यूशन, viewport और पिक्सल रेशियो पर हमारी गाइड इसकी वजह बताती है।
सटीक पिक्सल से ज़्यादा मायने aspect ratio रखता है। अगर असली प्रोडक्ट फ़ोटो चौकोर होंगी, तो हर प्रोडक्ट प्लेसहोल्डर भी चौकोर होना चाहिए, वह किसी भी साइज़ में दिखे।
ऐसे प्लेसहोल्डर बनाना जो बात समझाएँ
Placeholder Image Generator आपके ब्राउज़र में सादी इमेज बनाता है। चौड़ाई और ऊँचाई सेट करें (हर एक 100 से 1200 पिक्सल तक), बैकग्राउंड और टेक्स्ट के रंग चुनें, और चाहें तो एक लेबल टाइप करें। लेबल के बिना इमेज अपना साइज़ दिखाती है, जैसे 600 × 400।
कुछ आदतें उन्हें कहीं ज़्यादा काम का बनाती हैं:
- सिर्फ़ साइज़ नहीं, मक़सद से लेबल करें। "Hero: summer campaign" या "Product: front view" से हर कोई एक नज़र में पेज समझ जाता है।
- न्यूट्रल रंग इस्तेमाल करें। हल्के स्लेटी रंग या आपके ब्रांड का सबसे हल्का शेड ध्यान प्लेसहोल्डर पर नहीं, लेआउट पर रखते हैं।
- टेक्स्ट पढ़ने लायक़ रखें। बैकग्राउंड के मुक़ाबले पर्याप्त कंट्रास्ट वाला टेक्स्ट रंग चुनें; समीक्षा के दौरान लेबल अक्सर स्क्रीनशॉट में पढ़े जाते हैं।
- जिस कंटेंट का आप इंतज़ार कर रहे हैं, उसके लिए अलग रंग इस्तेमाल करें, ताकि लंबे पेज में बाक़ी चीज़ें अलग दिखें।
PNG, SVG या data URI?
जनरेटर कई आउटपुट देता है, और हर एक अलग स्थिति के लिए ठीक है।
SVG
एक छोटी-सी टेक्स्ट फ़ाइल जो किसी भी साइज़ और किसी भी स्क्रीन पर बिल्कुल शार्प रहती है। वेब मॉकअप और प्रोटोटाइप के लिए बढ़िया। ज़्यादातर आधुनिक डिज़ाइन टूल भी इसे इम्पोर्ट कर सकते हैं।
PNG
एक सामान्य इमेज फ़ाइल जो हर जगह काम करती है, उन टूल और ऐप में भी जो SVG स्वीकार नहीं करते। इसे डिज़ाइन सॉफ़्टवेयर, स्लाइड डेक, कंटेंट मैनेजमेंट सिस्टम और ईमेल टेम्पलेट के लिए इस्तेमाल करें।
Data URI
इमेज सीधे टेक्स्ट की एक लाइन में encode होती है जिसे आप HTML या CSS में पेस्ट करते हैं, होस्ट करने के लिए कोई फ़ाइल नहीं:
<img src="data:image/svg+xml;charset=utf-8,..." width="600" height="400" alt="">जल्दी बनने वाले प्रोटोटाइप, कोड उदाहरण और टेस्ट पेज के लिए बिल्कुल सही। बड़ी या बार-बार इस्तेमाल होने वाली इमेज के लिए असली फ़ाइल हल्की रहती है।
होस्ट किया गया लिंक
टूल आपको placehold.co से एक मिलता-जुलता लिंक भी देता है, जो एक मुफ़्त सार्वजनिक प्लेसहोल्डर सेवा है। जब आपको बस एक URL चाहिए तो यह सुविधाजनक है, लेकिन यह इस पर निर्भर करता है कि जब भी आपका पेज लोड हो तब वह सेवा ऑनलाइन हो, इसलिए इसे लंबे समय तक चलने वाली किसी चीज़ के बजाय प्रोटोटाइप के लिए ही रखना बेहतर है।
लेआउट तोड़े बिना प्लेसहोल्डर बदलना
असली इमेज आने का पल वह है जहाँ कई प्रोजेक्ट डगमगा जाते हैं। पेज उछलते हैं, crop चेहरे काट देते हैं, और फ़ाइलों का साइज़ फूल जाता है। थोड़ी तैयारी यह सब रोक देती है।
हमेशा आकार सेट करें
हर इमेज को शुरू से width और height attributes, या CSS aspect ratio दें। तब ब्राउज़र इमेज लोड होने से पहले सही जगह आरक्षित कर लेता है, इसलिए इमेज दिखने पर पेज नहीं खिसकता। यही खिसकना Google, Core Web Vitals में से एक, Cumulative Layout Shift के रूप में मापता है; Core Web Vitals पर हमारी गाइड बताती है कि यह क्यों मायने रखता है।
Aspect ratio मिलाएँ
अगर असली फ़ोटो का आकार प्लेसहोल्डर से अलग है, तो वह या तो crop होगी या बिगड़ जाएगी। तय अनुपात में इमेज माँगें, या अपलोड करने से पहले उन्हें crop करें।
अपलोड करने से पहले रीसाइज़ करें
कैमरे से सीधे आई फ़ोटो अक्सर 5000 पिक्सल चौड़ी और कई मेगाबाइट की होती हैं। उन्हें उस साइज़ में बदलें जिसमें वे दिखती हैं और WebP जैसा कुशल फ़ॉर्मेट इस्तेमाल करें; Image Resizer आपकी इमेज कहीं अपलोड किए बिना दोनों काम एक क़दम में करता है।
बचे हुए प्लेसहोल्डर ढूँढें
यह हैरानी की हद तक आम है कि एक भूला हुआ प्लेसहोल्डर लाइव साइट तक पहुँच जाता है, अक्सर किसी कम देखे जाने वाले पेज पर। लॉन्च से पहले अपने टेम्पलेट और कंटेंट में प्लेसहोल्डर URL और लेबल खोजें, और मुख्य पेजों को Broken Image Checker से गुज़ारें, जो उन इमेज को भी दिखाता है जो ज़रूरत से कहीं बड़ी हैं। टूटी इमेज ढूँढने पर हमारी गाइड लॉन्च से पहले की पूरी जाँच बताती है।
डेवलपर के लिए प्लेसहोल्डर
प्लेसहोल्डर कोड में भी उतने ही काम के हैं जितने डिज़ाइन में:
- Seed डेटा और डेमो अकाउंट सही साइज़ की इमेज के साथ कहीं ज़्यादा असली लगते हैं।
- Component libraries असली assets पर निर्भर हुए बिना हर कार्ड, avatar और बैनर की स्थिति दिखा सकती हैं।
- लेआउट के automated tests अनुमानित, तय साइज़ वाली इमेज के साथ ज़्यादा भरोसेमंद होते हैं।
- Loading states फ़ाइनल इमेज वाले हिस्से से मेल खाता न्यूट्रल प्लेसहोल्डर रंग इस्तेमाल कर सकती हैं, ताकि असली इमेज लोड होते समय पेज स्थिर लगे।
- डॉक्यूमेंटेशन और ट्यूटोरियल कॉपीराइट के सवालों से मुक्त रहते हैं जब हर उदाहरण इमेज एक सादा, लेबल वाला प्लेसहोल्डर हो।
याद रखें कि प्रोटोटाइप में जब प्लेसहोल्डर इमेज सिर्फ़ सजावटी हों, तो उन्हें ख़ाली alt attribute, alt="", दें, और असली कंटेंट आने पर सार्थक alt text दें।
वायरफ़्रेम से लॉन्च तक एक साफ़-सुथरा तरीक़ा
- हर पेज के लिए इमेज की सूची और aspect ratios जल्दी तय करें।
- उन अनुपातों में लेबल वाले प्लेसहोल्डर बनाएँ और उनसे लेआउट तैयार करें।
- असली इमेज बनाने वाले के साथ साइज़ समेत सूची शेयर करें।
- इमेज आते ही पेज दर पेज प्लेसहोल्डर बदलें, हर एक को रीसाइज़ करते हुए।
- लॉन्च से पहले बचे हुए प्लेसहोल्डर खोजें और मुख्य पेजों पर टूटी या ज़रूरत से बड़ी इमेज जाँचें।
यह चमक-दमक वाला काम नहीं है, लेकिन यह वह शांत व्यवस्था है जो किसी प्रोजेक्ट को अफ़रा-तफ़री के बजाय सुकून भरा बनाती है। अपने अगले वायरफ़्रेम पर Placeholder Image Generator से शुरू करें और देखें कि समीक्षा की बातचीत कितनी आसान हो जाती है।
