वेब डेवलपमेंट

Placeholder Image Generator

लेआउट और डिज़ाइन के लिए निर्दिष्ट आकार की प्लेसहोल्डर छवि जनरेट करें।

A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.

How to use it

Common uses

Things to keep in mind

SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.

A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.

इस टूल के बारे में लेख: Placeholder इमेज: डेवलपमेंट के दौरान नक़ली इमेज क्यों मायने रखती हैं

अक्सर पूछे जाने वाले प्रश्न

मैं इमेज का साइज़ और लुक कैसे नियंत्रित करूं?

आप पिक्सेल में चौड़ाई और ऊंचाई के साथ-साथ बैकग्राउंड और टेक्स्ट कलर सेट करते हैं; अगर आप कस्टम टेक्स्ट टाइप नहीं करते, तो टूल डिफ़ॉल्ट रूप से आयाम ही दिखाता है, जैसे 600x400।

यह टूल किस काम आता है?

यह मॉकअप्स और लेआउट प्रोटोटाइपिंग के लिए है — प्लेसहोल्डर इमेज डालने से आप असली इमेज तैयार होने से पहले स्पेसिंग, आस्पेक्ट रेशियो और डिज़ाइन चेक कर सकते हैं।

क्या मैं फ़ाइल डाउनलोड किए बिना इमेज इस्तेमाल कर सकता हूं?

हां, डाउनलोड करने के अलावा आप इमेज को Data URI के रूप में कॉपी करके सीधे अपने HTML या CSS में पेस्ट कर सकते हैं।

SVG और PNG प्लेसहोल्डर में क्या फ़र्क़ है?

SVG प्लेसहोल्डर वेक्टर-बेस्ड होता है, इसलिए क्वालिटी खोए बिना स्केल होता है और आमतौर पर साइज़ से बेपरवाह सिर्फ़ कुछ किलोबाइट्स का होता है, जबकि PNG एक रास्टर फ़ॉर्मैट है जिसका साइज़ इमेज के डाइमेंशन के साथ बढ़ता है — यह पेज परफ़ॉर्मेंस टेस्ट करते वक़्त असली फ़ोटो के बर्ताव को बेहतर सिमुलेट करता है।

क्या डेवलपमेंट के दौरान प्लेसहोल्डर का साइज़ वाक़ई पेज लोडिंग स्पीड को प्रभावित करता है?

SVG प्लेसहोल्डर्स का स्पीड पर लगभग कोई असर नहीं पड़ता, क्योंकि तय डाइमेंशन से बेपरवाह इनका वज़न कुछ ही बाइट्स होता है, जबकि बड़े साइज़ के रास्टर प्लेसहोल्डर्स पेज पर काफ़ी वज़न जोड़ सकते हैं — इसलिए परफ़ॉर्मेंस टेस्टिंग के लिए भविष्य की असली इमेज के क़रीब का फ़ॉर्मैट चुनना बेहतर है।

लेख: वेब डेवलपमेंट

HEX, RGB, HSL: रंग लिखने के इतने तरीक़े क्यों हैं

हाथ से कलर शेड चुनते वक़्त डिज़ाइनर अक्सर HEX की बजाय HSL क्यों चुनते हैं।

CSS मिनिफ़िकेशन: फ़ाइल से वाक़ई क्या हटाया जाता है, और क्यों

मिनिफ़ाइड CSS ब्राउज़र में बिल्कुल वैसे ही काम क्यों करता है, भले ही यह इंसान के लिए अनरीडेबल हो जाए।

JavaScript मिनिफ़िकेशन: मिनिफ़ाई और ऑब्फ़स्केट में फ़र्क़

चाहें तो मिनिफ़ाइड कोड अभी भी पढ़ा जा सकता है, जबकि ऑब्फ़स्केटेड कोड नहीं पढ़ा जा सकता।

HTML मिनिफ़िकेशन: मार्कअप में स्पेस का मतलब क्यों होता है

<pre> या textarea के अंदर स्पेस हटाना पेज का लुक क्यों बिगाड़ सकता है, जबकि लगभग हर दूसरी जगह ऐसा नहीं होता।

CSS ग्रेडिएंट: linear, radial और conic से कैसे अलग है

conic-gradient पाई चार्ट के लिए क्यों सही है, जबकि radial-gradient लाइट-स्पॉट इफ़ेक्ट देता है।

Luhn एल्गोरिदम: कार्ड नंबर की सटीकता कैसे जाँची जाती है

Luhn चेक पास करने वाला कार्ड नंबर इसका मतलब क्यों नहीं कि वह कार्ड वाक़ई मौजूद है।

IBAN: इंटरनेशनल बैंक अकाउंट नंबर की संरचना कैसी होती है

IBAN के पहले दो अक्षर अकाउंट नंबर का हिस्सा नहीं, बल्कि कंट्री कोड क्यों होते हैं।

QR कोड: पिक्सल के एक चौकोर में लिंक कैसे समा जाता है

बीच में लोगो वाला QR कोड डिज़ाइन का हिस्सा ढका होने के बावजूद अभी भी स्कैन क्यों हो जाता है।

बारकोड: Code 128, EAN-13 से कैसे अलग है

स्टोर की शेल्फ़ पर प्रोडक्ट लगभग हमेशा Code 128 की बजाय EAN-13 क्यों इस्तेमाल करते हैं।