मुख्य सामग्री पर जाएँ
Size + colours → PNG / SVG

Placeholder Image Generator – किसी भी साइज़ की प्लेसहोल्डर इमेज बनाएँ

किसी भी साइज़ और रंग में, अपने लेबल के साथ प्लेसहोल्डर इमेज बनाएँ। PNG या SVG डाउनलोड करें, data URI कॉपी करें, या होस्टेड इमेज URL कॉपी करें।

टूल के बटन और संदेश अभी अंग्रेज़ी में हैं। टूल का काम करने का तरीका अंग्रेज़ी पेज जैसा ही है।

इस टूल के बारे में

प्लेसहोल्डर इमेज जनरेटर के बारे में

प्लेसहोल्डर इमेज जनरेटर मॉकअप, वायरफ़्रेम और डेवलपमेंट के लिए सादी प्लेसहोल्डर इमेज बनाता है। चौड़ाई और ऊँचाई सेट करें, बैकग्राउंड और टेक्स्ट के रंग चुनें, और चाहें तो अपना लेबल टाइप करें; वरना इमेज पर उसका साइज़ दिखता है, जैसे 600 × 400। इमेज आपके ब्राउज़र में SVG के रूप में बनती है, इसलिए कुछ अपलोड नहीं करना पड़ता और किसी बाहरी सेवा की ज़रूरत नहीं होती। आप इसे PNG या SVG फ़ाइल के रूप में डाउनलोड कर सकते हैं, या data URI के रूप में कॉपी कर सकते हैं जो बिना कोई फ़ाइल होस्ट किए सीधे <img> टैग या CSS में चलता है। अगर लिंक इस्तेमाल करना पसंद है, तो टूल placehold.co से, जो एक मुफ़्त प्लेसहोल्डर इमेज सेवा है, मेल खाता URL भी देता है। टेक्स्ट का साइज़ इमेज के हिसाब से बदलता है, ताकि लेबल हर साइज़ पर पढ़ा जा सके। चौड़ाई और ऊँचाई दोनों 100 से 1200 पिक्सेल तक सेट की जा सकती हैं, और टेक्स्ट हमेशा साफ़ sans-serif फ़ॉन्ट में बीच में रहता है। क्योंकि इमेज सादा SVG है, वह किसी भी ज़ूम पर बिल्कुल शार्प रहती है, और SVG व data URI आउटपुट किसी फ़ोटो के मुक़ाबले बहुत छोटे होते हैं, जिससे मॉकअप और टेस्ट पेज हल्के रहते हैं।

अपने साइज़ और रंग की प्लेसहोल्डर इमेज बनाने वाले टूल का चित्र

प्लेसहोल्डर कहाँ काम आते हैं

असली इमेज तैयार होने तक जगह भरें

वेबसाइट मॉकअप

फ़ोटो तैयार होने से पहले क्लाइंट को लेआउट दिखाएँ।

उदाहरणहोमपेज प्रोटोटाइप में “Hero image” लेबल वाले 1200 × 600 प्लेसहोल्डर इस्तेमाल करें।

फ़्रंट-एंड डेवलपमेंट

डिज़ाइन एसेट का इंतज़ार किए बिना लेआउट और इमेज साइज़ टेस्ट करें।

उदाहरणबिना किसी इमेज फ़ाइल के कार्ड ग्रिड टेस्ट करने के लिए data URI को <img> टैग में पेस्ट करें।

डॉक्यूमेंटेशन

ड्राफ़्ट गाइड में बताएँ कि स्क्रीनशॉट कहाँ आएँगे।

उदाहरण“Screenshot: settings page” लेबल वाले 800 × 450 प्लेसहोल्डर जोड़ें।

ईमेल टेम्पलेट

फ़ाइनल आर्टवर्क आने से पहले सही साइज़ की इमेज जगहों के साथ ईमेल लेआउट टेस्ट करें।

उदाहरण“Header banner” लेबल वाला 600 × 200 बैनर प्लेसहोल्डर ठीक वही जगह दिखाता है जहाँ कैंपेन इमेज आएगी।

प्रोडक्ट पेज प्रोटोटाइप

शॉप टेम्पलेट को सही अनुपात की इमेज से भरें।

उदाहरणलेआउट की समीक्षा के दौरान 800 × 800 के चौकोर प्लेसहोल्डर प्रोडक्ट फ़ोटो की जगह लेते हैं।

पढ़ाई और ट्यूटोरियल

कोडिंग पाठ और स्लाइड में कॉपीराइट की चिंता के बिना सादी इमेज इस्तेमाल करें।

उदाहरणएक CSS ग्रिड ट्यूटोरियल नंबर वाले प्लेसहोल्डर से दिखाता है कि आइटम कॉलम में कैसे जाते हैं।

सुझाव

प्लेसहोल्डर का पूरा फ़ायदा उठाएँ

मक़सद के साथ लेबल लगाएँ

“Team photo, 3:2” जैसा लेबल डिज़ाइनर को ठीक-ठीक बताता है कि कौन सी इमेज देनी है।

शार्प स्केलिंग के लिए SVG

SVG किसी भी ज़ूम पर साफ़ रहता है और फ़ाइल साइज़ में बहुत छोटा है। जहाँ SVG नहीं चलता, वहाँ PNG इस्तेमाल करें।

बाद में प्लेसहोल्डर बदलना

असली फ़ोटो आने पर उन्हें उसी साइज़ में रीसाइज़ करें, ताकि लेआउट न खिसके।

Image Resizer खोलें

फ़ाइनल आस्पेक्ट रेशियो से मिलाएँ

असली इमेज वाला ही अनुपात रखें, जैसे वीडियो थंबनेल के लिए 16:9, ताकि बदलते समय लेआउट न खिसके।

विरोधी रंग इस्तेमाल करें

ऐसा टेक्स्ट रंग चुनें जो बैकग्राउंड से अलग दिखे, ताकि स्क्रीनशॉट और समीक्षा में लेबल पढ़े जा सकें।

data URI छोटे रखें

data URI छोटे प्लेसहोल्डर के लिए बढ़िया हैं। बड़ी या बार-बार आने वाली इमेज के लिए फ़ाइल या URL से आपका HTML हल्का रहता है।