प्लेसहोल्डर इमेज जनरेटर
मनचाहे आकार, रंग और टेक्स्ट के साथ प्लेसहोल्डर इमेज बनाएँ। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
अपडेट किया गया
Placeholder Image Generator
Generate custom placeholder images with colors, gradients, patterns, text overlays, and multiple formats for mockups and development.
Dimensions
Background
Text Overlay
Image Source
Live Preview
About This Tool
Features
- Local canvas generation — 100% offline
- Solid, gradient, and pattern backgrounds
- Custom text with font family and size
- Aspect ratio lock
- PNG, JPG, and WebP download
- 28+ size presets across 4 categories
- Batch download multiple sizes at once
- HTML, React, CSS and Markdown snippets
- 3 remote placeholder services
Remote Services
- Local (Canvas): Full customization, offline, all formats
- placehold.co: Clean, fast, supports custom colors & text
- via.placeholder.com: Classic placeholder service
- dummyimage.com: Simple, reliable fallback
अक्सर पूछे जाने वाले प्रश्न
वेब डिज़ाइन में प्लेसहोल्डर इमेज और असली इमेज में क्या अंतर है?
एक प्लेसहोल्डर इमेज एक अस्थायी फ़िलर ग्राफ़िक है जो अंतिम आर्टवर्क के मौजूद होने से पहले उस सटीक जगह को आरक्षित करता है जहाँ एक असली फ़ोटो होगी। प्रोडक्ट शॉट या हीरो फ़ोटो दिखाने के बजाय, यह एक सॉलिड कलर, gradient, या पैटर्न दिखाता है, आम तौर पर पिक्सेल डाइमेंशन्स ऊपर स्टैम्प्ड होते हैं ताकि आप पुष्टि कर सकें कि स्लॉट आपके इरादे के आकार पर रेंडर हो रहा है। एक असली इमेज वास्तविक कंटेंट और अर्थ ले जाती है; एक प्लेसहोल्डर केवल लेआउट संरचना ले जाता है। डिज़ाइनर और डेवलपर प्लेसहोल्डर्स का उपयोग मॉकअप, प्रोटोटाइप और अधूरे पेजों के दौरान करते हैं ताकि लेआउट सही ढंग से दिखे और सही अनुपात में हो जबकि ऐसेट्स अभी बनाई जा रही हैं। अंतिम आकार पर एक जनरेट करना तब भी कंटेंट के कूदने से रोकता है जब असली तस्वीर बाद में लोड होती है। ऊपर अपनी width, height, कलर और लेबल डालें और सेकंडों में एक साइज़्ड प्लेसहोल्डर बनाएँ।
प्लेसहोल्डर इमेज Cumulative Layout Shift (CLS) को कैसे कम करती हैं?
Cumulative Layout Shift, Google के Core Web Vitals में से एक, मापता है कि पेज लोड होते समय कितना दृश्यमान कंटेंट अप्रत्याशित रूप से खिसकता है। एक सामान्य कारण वे इमेज हैं जिनकी कोई आरक्षित जगह नहीं है: ब्राउज़र ज़ीरो-हाइट बॉक्स छोड़ता है, आसपास का टेक्स्ट रेंडर करता है, फिर तस्वीर आते ही सब कुछ नीचे धकेल देता है। सही ढंग से साइज़्ड प्लेसहोल्डर जल्दी लोड करना इसे ठीक करता है क्योंकि ब्राउज़र पहले से जानता है कि इमेज बॉक्स डाइमेंशन्स क्या हैं, इसलिए असली ऐसेट आने पर कंटेंट अपनी जगह पर रहता है। वही प्रभाव स्पष्ट width और height एट्रिब्यूट्स सेट करने से आता है, जो इसका कारण है कि यहाँ कॉपी-रेडी HTML स्निपेट दोनों के साथ loading="lazy" भी शामिल है। डेवलपमेंट के दौरान अंतिम-साइज़्ड प्लेसहोल्डर्स के विरुद्ध लेआउट बनाने का मतलब है कि आपका CLS स्कोर प्रोडक्शन वास्तविकता को दर्शाता है, न कि एक अस्थायी गैप। ऊपर अपनी सटीक डाइमेंशन्स सेट करें और इमेज बॉक्स को जगह पर लॉक करने के लिए जनरेटेड मार्कअप कॉपी करें।
सोशल मीडिया प्लेसहोल्डर्स के लिए मुझे कौन से इमेज डाइमेंशन्स उपयोग करने चाहिए?
सामान्य सोशल और वेब डाइमेंशन्स याददाश्त से गलत करना आसान है, इसलिए यह टूल Social Media, Web, Print और Screens में बंटे 28 से ज़्यादा साइज़ प्रीसेट के साथ आता है। अक्सर इस्तेमाल होने वाले साइज़ में Instagram Square 1080 × 1080 पिक्सेल, YouTube thumbnail 1280 × 720, और Open Graph शेयरिंग इमेज 1200 × 630 शामिल हैं, जो ज़्यादातर प्लेटफ़ॉर्म पर लिंक प्रीव्यू के लिए मानक है। Print प्रीसेट में A4 जैसे पेज शामिल हैं, और Screens ग्रुप में 4K UHD तक के रिज़ॉल्यूशन शामिल हैं। एक क्लिक सटीक पिक्सेल मान लागू करता है, अनुमान और कुछ-पिक्सेल-के-करीब क्रॉप के जोखिम को हटाता है। आप आस्पेक्ट रेशियो लॉक भी कर सकते हैं ताकि एक साइड एडजस्ट करने से दूसरी स्वचालित रूप से स्केल हो। ऊपर एक प्रीसेट चुनें, फिर प्लेसहोल्डर को PNG, JPG, या WebP के रूप में डाउनलोड करें, या एक बार में पूरा सेट जनरेट करें।
क्या मैं अलग-अलग साइज़ पर एक बार में कई प्लेसहोल्डर इमेज जनरेट कर सकता हूँ?
हाँ। Batch Generate टैब आपको कई साइज़ लिस्ट करने देता है, प्रत्येक अपने लेबल के साथ, और अपनी वर्तमान बैकग्राउंड और टेक्स्ट सेटिंग्स का उपयोग करके सभी को एक ही पास में डाउनलोड करता है। यह एक-एक करके हर इमेज बनाने से कहीं तेज़ है और सेट में एकसमान लुक रखता है। एक सामान्य उपयोग एक सिंगल कंपोनेंट के लिए रिस्पॉन्सिव प्लेसहोल्डर बनाना है, जैसे डेस्कटॉप, टैबलेट और मोबाइल वैरिएंट, ताकि हर ब्रेकपॉइंट पर असली ऐसेट्स के मौजूद होने से पहले एक सही ढंग से साइज़्ड फ़िलर हो। चूँकि टूल हर इमेज को ब्राउज़र के Canvas API से लोकल रूप से ड्रा करता है, बैच जनरेशन पूरी तरह आपकी डिवाइस पर चलता है बिना किसी अपलोड या साइन-अप के, और ऑफ़लाइन भी काम करता रहता है। आप कलर, gradient या पैटर्न, टेक्स्ट ओवरले और आउटपुट फॉर्मैट एक बार कंट्रोल करते हैं, और वे बैच में हर इमेज पर लागू होते हैं। ऊपर Batch Generate टैब खोलें और सेकंडों में एक पूरा रिस्पॉन्सिव सेट बनाएँ।
क्या मैं प्लेसहोल्डर इमेज फ़ाइल डाउनलोड करूँ या होस्टेड प्लेसहोल्डर URL उपयोग करूँ?
दोनों काम करते हैं, और सही चुनाव आपके वर्कफ़्लो पर निर्भर करता है। PNG, JPG, या WebP फ़ाइल डाउनलोड करने से आपको एक सेल्फ़-कंटेन्ड ऐसेट मिलती है जो आपके प्रोजेक्ट में रहती है, ऑफ़लाइन काम करती रहती है, और कभी किसी बाहरी सर्वर के ऑनलाइन रहने पर निर्भर नहीं करती। यह कमिटेड मॉकअप, डिज़ाइन हैंडऑफ़ और ऐसे पेजों के लिए उपयुक्त है जिन्हें भरोसेमंद ढंग से रेंडर होना चाहिए। एक होस्टेड प्लेसहोल्डर URL तेज़ प्रोटोटाइप के लिए उपयोगी है जहाँ आप फ़ाइलें मैनेज करने के बजाय एक इमेज रेफ़र करना पसंद करते हैं; यह टूल तीन बाहरी सेवाओं — placehold.co, via.placeholder.com, और dummyimage.com — के लिए रिक्वेस्ट URL बना सकता है, ताकि आप एक फ़ाइल के बजाय एक लिंक पेस्ट कर सकें। ट्रेड-ऑफ़ यह है कि रिमोट URL एक नेटवर्क रिक्वेस्ट जोड़ते हैं और सेवा अनुपलब्ध होने पर टूट जाते हैं। हर इमेज के लिए टूल कॉपी-रेडी HTML, JSX, CSS और Markdown स्निपेट भी जनरेट करता है। ऊपर अपना इमेज सोर्स चुनें, फिर फ़ाइल डाउनलोड करें या जनरेटेड URL कॉपी करें।
संबंधित टूल
मुफ़्त सुरक्षित पासवर्ड जनरेटर
अनुकूलन योग्य विकल्पों के साथ सुरक्षित, यादृच्छिक पासवर्ड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त UUID/GUID जनरेटर
सार्वभौमिक रूप से अद्वितीय पहचानकर्ता (UUID/GUID) बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त QR कोड जनरेटर ऑनलाइन
URL, टेक्स्ट, WiFi क्रेडेंशियल और बहुत कुछ के लिए QR कोड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON फ़ॉर्मेटर और वैलिडेटर
सिंटैक्स हाइलाइटिंग और त्रुटि पहचान के साथ JSON डेटा को फ़ॉर्मेट, सत्यापित और सुंदर बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
Placeholder Image Generator के बारे में
Placeholder Image Generator डमी इमेज बनाता है जो आपके लेआउट बनाते समय असली फ़ोटो की जगह लेती हैं। width और height सेट करें, एक बैकग्राउंड और कुछ टेक्स्ट चुनें, और टूल एक फ़िलर ग्राफ़िक ड्रा करता है जो आप सीधे एक मॉकअप, प्रोटोटाइप या अधूरे वेब पेज में डाल सकते हैं। यह फ़्रंट-एंड डेवलपर्स, UI/UX डिज़ाइनर्स और हर उस व्यक्ति के लिए बना है जिसे अंतिम आर्टवर्क तैयार होने से पहले एक सही ढंग से साइज़्ड इमेज चाहिए।
डिफ़ॉल्ट रूप से टूल हर इमेज को ब्राउज़र के HTML Canvas API से लोकल रूप से ड्रा करता है, इसलिए जनरेशन पूरी तरह आपकी डिवाइस पर होता है। आप जो कुछ टाइप करते हैं वह अपलोड नहीं होता, कोई साइन-अप नहीं, और जनरेटर आपके ऑफ़लाइन होने के बाद भी काम करता रहता है। अगर आप डाउनलोडेड फ़ाइल के बजाय होस्टेड URL पसंद करते हैं, तो आप इमेज सोर्स को तीन बाहरी सेवाओं में से एक पर स्विच कर सकते हैं — placehold.co, via.placeholder.com, या dummyimage.com — और टूल आपके लिए रिक्वेस्ट URL बनाता है।
आप क्या कस्टमाइज़ कर सकते हैं
- डाइमेंशन्स — 10 से 8000 पिक्सेल तक कोई भी width और height सेट करें। एक लॉक टॉगल आस्पेक्ट रेशियो फ़िक्स रखता है ताकि एक साइड रीसाइज़ करने से दूसरी स्वचालित रूप से स्केल हो।
- बैकग्राउंड — एक सॉलिड कलर, एक एडजस्टेबल कोण के साथ एक दो-रंगों का linear gradient (और छह रेडी-मेड gradient प्रीसेट), या एक जनरेटेड पैटर्न चुनें: checkerboard, stripes, dots, grid, या diagonal lines।
- टेक्स्ट ओवरले — अपना लेबल जोड़ें या पिक्सेल डाइमेंशन्स (उदाहरण के लिए,
800 × 600) स्टैम्प करने के लिए खाली छोड़ दें। आप टेक्स्ट कलर, 8 से 200 पिक्सेल तक फ़ॉन्ट साइज़ और फ़ॉन्ट फ़ैमिली (system-ui, Arial, Georgia, Courier New, Verdana, या Impact) कंट्रोल करते हैं। लंबा टेक्स्ट स्वचालित रूप से रैप होता है। - ग्रिड ओवरले — एक लाइव ग्रिड चालू करें ताकि लेआउट में अलाइनमेंट और स्पेसिंग जाँचने में मदद मिले।
जब आप प्रीव्यू से संतुष्ट हों, परिणाम को PNG, JPG, या WebP फ़ाइल के रूप में डाउनलोड करें। पैनल डाइमेंशन्स बदलते समय फ़ाइल साइज़ और मेगापिक्सेल काउंट का एक लाइव अनुमान भी दिखाता है।
प्रीसेट और बैच जनरेशन
सामान्य डाइमेंशन्स का अनुमान लगाना थकाऊ है, इसलिए टूल चार श्रेणियों में बंटे 28 से ज़्यादा साइज़ प्रीसेट के साथ आता है — Social Media, Web, Print और Screens। एक क्लिक Instagram Square (1080×1080), YouTube thumbnail (1280×720), Open Graph image (1200×630), A4 page, या 4K UHD screen सहित अन्य के लिए सटीक पिक्सेल सेट करता है।
Batch Generate टैब इसे आगे ले जाता है: कई साइज़ अपने-अपने लेबल के साथ लिस्ट करें और सभी को एक बार में डाउनलोड करें, प्रत्येक आपकी वर्तमान बैकग्राउंड और टेक्स्ट सेटिंग्स का उपयोग करते हुए। इससे एक बार में रिस्पॉन्सिव प्लेसहोल्डर्स का एक पूरा सेट — डेस्कटॉप, टैबलेट और मोबाइल — बनाना तेज़ हो जाता है।
डेवलपर्स प्लेसहोल्डर इमेज क्यों उपयोग करते हैं
एक प्लेसहोल्डर इमेज वह जगह आरक्षित करती है जिसे एक असली तस्वीर अंततः घेरेगी। अंतिम-साइज़्ड फ़िलर जल्दी लोड करना layout shift रोकता है: ब्राउज़र पहले से जानता है कि इमेज बॉक्स क्या है, इसलिए असली ऐसेट आने पर कंटेंट नहीं कूदता। वह आदत सीधे एक अच्छे Cumulative Layout Shift स्कोर को सपोर्ट करती है, जो Google के Core Web Vitals में से एक है। इमेज पर डाइमेंशन्स स्टैम्प करना यह पुष्टि करने का भी एक तेज़ तरीका है कि स्लॉट आपके इरादे के आकार पर रेंडर हो रहा है।
कॉपी-रेडी कोड स्निपेट्स
हर इमेज के लिए टूल मैचिंग मार्कअप जनरेट करता है जो आप प्रोजेक्ट में पेस्ट कर सकते हैं: एक HTML <img> टैग जिसमें width, height, और loading="lazy" पहले से सेट है, एक React/JSX वर्ज़न, एक CSS background-image नियम, और Markdown इमेज सिंटैक्स। जब आप किसी रिमोट सेवा का उपयोग करते हैं, तो रेडी-मेड इमेज URL भी शामिल होता है। हर स्निपेट का एक वन-क्लिक कॉपी बटन है।
ऊपर अपनी डाइमेंशन्स सेट करें, बैकग्राउंड और टेक्स्ट चुनें, और सेकंडों में एक पिक्सेल-परफ़ेक्ट प्लेसहोल्डर डाउनलोड करें — या एक पूरा बैच और उन्हें एम्बेड करने के लिए कोड लें।