Placeholder Image Generator

यह किसके लिए है?

पेज design करते समय, आपको अक्सर real image तैयार होने से पहले एक विशिष्ट size की image चाहिए होती है — एक hero banner, एक card thumbnail, एक avatar, एक OG card। via.placeholder.com या placehold.co load करना काम करता है पर एक external request और third-party dependency जोड़ता है। यह tool एक self-contained inline SVG बनाता है जिसमें आप जो size और label चाहते हैं वह हो, आपके HTML, CSS background-image, या React component में data URI के रूप में drop करने के लिए तैयार। कुछ भी आपके browser से बाहर नहीं जाता।

कब इस्तेमाल करें

• एक layout का wireframe बनाते समय जहाँ आपको असली assets तैयार होने से पहले shaped placeholders चाहिए।
• एक Storybook या Figma export बनाते समय जहाँ per-component placeholder graphics चाहिए।
• image-loading कोड, lazy-loading thresholds, या aspect-ratio CSS को test करना।
• एक third-party placeholder service को ऐसे project में बदलना जिसे offline या कठोर CSP के तहत काम करना है।

आम गलतियाँ

• SVG ≠ raster। data URI एक SVG string है; यह bina blur के अनंत scale करता है पर PNG की उम्मीद रखने वाला designer नहीं। raster image के लिए, preview का screenshot लें या SVG को SVG-to-PNG converter के माध्यम से चलाएं।
• लंबे data URIs img src में अजीब होते हैं। Browsers इन्हें संभालते हैं, पर tools (linters, search-and-replace, diff tools) अक्सर multi-KB attribute values पर अटक जाते हैं। बड़े mockups के लिए, SVG file download को प्राथमिकता दें।
• Label text localize नहीं है। auto-label "WxH" है गुणन chinha के साथ; यदि आपको अनुवाद चाहिए, एक custom label टाइप करें।
• रंग केवल HTML hex हैं। color pickers #rrggbb बनाते हैं। यदि आपको rgba() चाहिए, copy करने के बाद सीधे SVG markup को edit करें।
• Width/height intrinsic हैं, display नहीं। CSS को अलग size पर set करने से SVG scale होगा — दृष्टिगत रूप से ठीक, पर embedded text aspect ratio बदलने पर खिंचा हुआ दिख सकता है; हम predictable scaling के लिए preserveAspectRatio="none" का इस्तेमाल करते हैं।
• placeholder को ship न करें। भूलना आसान है — live जाने से पहले real asset से बदलें।