प्लेसहोल्डर छवि जनरेटर

यह कैसे काम करता है

1. आयाम सेट करें: अपनी प्लेसहोल्डर छवि की चौड़ाई और ऊँचाई पिक्सेल में दर्ज करें।
2. उपस्थिति अनुकूलित करें: पृष्ठभूमि रंग, टेक्स्ट रंग और प्रदर्शित करने के लिए लेबल चुनें।
3. उपयोग या डाउनलोड करें: HTML/CSS उपयोग के लिए छवि URL कॉपी करें, या अपने मॉकअप के लिए सीधे PNG डाउनलोड करें।

प्लेसहोल्डर छवि जनरेटर क्यों इस्तेमाल करें?

वेब विकास और मॉकअप के दौरान, अक्सर वास्तविक सामग्री तैयार होने से पहले छवियों की आवश्यकता होती है।

विशेषताएँ

• कस्टम आयाम: पिक्सेल में कोई भी चौड़ाई और ऊँचाई, वर्ग, पोर्ट्रेट, भूदृश्य या बैनर प्रारूप।
• रंग अनुकूलन: हेक्स कोड या रंग पिकर के माध्यम से पृष्ठभूमि और टेक्स्ट रंग सेट करें।
• कस्टम लेबल टेक्स्ट: छवि पर कोई भी टेक्स्ट प्रदर्शित करें, या आयाम लेबल (जैसे 800×600) डिफ़ॉल्ट छोड़ें।
• तत्काल URL: परीक्षण के लिए src एट्रिब्यूट में सीधे पेस्ट करने के लिए डेटा URI प्राप्त करें।
• PNG डाउनलोड: अपने डिज़ाइन टूल में उपयोग के लिए प्लेसहोल्डर छवि को PNG फ़ाइल में डाउनलोड करें।

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

क्या मैं इसे HTML src एट्रिब्यूट में उपयोग कर सकता हूँ?

हाँ। जनरेट की गई छवि डेटा URI के रूप में उपलब्ध है जिसे आप HTML के <img src=""> एट्रिब्यूट में सीधे पेस्ट कर सकते हैं।

प्लेसहोल्डर छवियों के लिए कौन से आकार सामान्य हैं?

सामान्य आकार: हीरो छवियाँ (1200×630), आर्टिकल थंबनेल (400×300), अवतार (100×100), Open Graph छवियाँ (1200×628) और बैनर।

CSS में प्लेसहोल्डर छवियों का उपयोग कैसे करें?

डेटा URI कॉपी करें और CSS पृष्ठभूमि में उपयोग करें: background-image: url("data:image/png;base64,…")। सभी ब्राउज़रों में काम करता है।

प्लेसहोल्डर इमेज सेवाओं का संक्षिप्त इतिहास

प्लेसहोल्डर इमेज सेवाएँ 2010 में उभरीं जब वेब डिज़ाइनरों को अंतिम एसेट्स पहुँचने से पहले मॉकअप भरने का त्वरित तरीका चाहिए था। placehold.it, जिसे डेव रीली ने 2010 में लॉन्च किया, पहली व्यापक रूप से उपयोग की जाने वाली सेवा थी: किसी भी <img> टैग में placehold.it/300x200 जैसा URL पेस्ट करें और एक ग्रे आयत प्राप्त करें। placekitten.com उसी साल आया, आयतों के स्थान पर यादृच्छिक बिल्ली के बच्चों को रखते हुए, और dummyimage.com (रसेल हेमलिच, 2010) ने रंग अनुकूलन जोड़ा। मनमौजी संस्करण फैले: fillmurray.com (बिल मरे की तस्वीरें, 2013), placebeard.it (दाढ़ी, 2014), placecage.com (निकोलस केज)। गंभीर उत्तराधिकारी बाद में आए: Lorem Pixel (लगभग 2017 के आसपास बंद) और डेविड मार्बी का Lorem Picsum (2018), जो किसी भी आकार में Unsplash से यादृच्छिक तस्वीरें परोसता है। लगभग 2014 में, फेसबुक ने «स्केलेटन स्क्रीन» पैटर्न को लोकप्रिय बनाया: जहाँ सामग्री लोड होगी वहाँ ग्रे आकृतियाँ दिखाना। 2019 तक, वोल्ट ने BlurHash जारी किया, एक 20-बाइट स्ट्रिंग जो वास्तविक छवि के कम-रिज़ॉल्यूशन धुंधले प्लेसहोल्डर में डिकोड होती है। आज, ThumbHash (इवान वालेस, 2023) और मूल CSS प्रॉपर्टी aspect-ratio (Chrome 88, जनवरी 2021) आपको बिल्कुल भी बाहरी सेवाओं के बिना छवि स्थान आरक्षित करने देते हैं।

याद रखने योग्य मानक छवि आकार

• Open Graph (1200×630)। फेसबुक के Open Graph प्रोटोकॉल द्वारा परिभाषित मानक लिंक-पूर्वावलोकन आकार। LinkedIn, Slack, Discord, Twitter (जब Twitter Card सेट नहीं है) सभी इस पर वापस जाते हैं। पहलू अनुपात 1.91:1।
• Twitter Card summary_large_image (1200×675)। इन-फीड पूर्वावलोकन के लिए 16:9 अनुपात। आप जो 1200×628 उद्धृत देखते हैं वह पुराना मानक है, 2023 में 1200×675 से बदल दिया गया।
• Instagram (1080×1080 वर्ग, 1080×1350 पोर्ट्रेट, 1080×1920 स्टोरी)। 1080 चौड़ाई से अधिक कुछ भी डाउनसैंपल हो जाता है। स्टोरी पहलू अनुपात 9:16 है।
• YouTube थंबनेल (1280×720)। 16:9। YouTube वीडियो फ़्रेम से इन्हें स्वतः उत्पन्न करता है; अपलोड किए गए कस्टम थंबनेल 2 MB से कम होने चाहिए।
• IAB विज्ञापन आकार। इंटरैक्टिव एडवरटाइज़िंग ब्यूरो ने बैनर आयामों को मानकीकृत किया: 728×90 (लीडरबोर्ड), 300×250 (मध्यम आयत, विश्व स्तर पर सबसे अधिक खरीदा गया आकार), 300×600 (आधा पृष्ठ), 160×600 (चौड़ा स्काईस्क्रेपर), 320×50 और 320×100 (मोबाइल)।
• Favicons। ब्राउज़र टैब के लिए 16×16 और 32×32, Apple टच आइकनों के लिए 180×180, Android manifest.json के लिए 192×192 और 512×512, PWA इंस्टॉल प्रॉम्प्ट के लिए न्यूनतम 512×512।
• ईमेल हेडर (600×200)। अधिकांश ईमेल क्लाइंट प्रदर्शित चौड़ाई को 600 px पर सीमित करते हैं। चौड़े जाने से Outlook डेस्कटॉप में कुचला जाता है या स्क्रॉलबार दिखाई देते हैं।

प्लेसहोल्डर और Core Web Vitals

Google के Core Web Vitals (मई 2020 में लॉन्च) उपयोगकर्ता अनुभव को मापते हैं और खोज रैंकिंग में योगदान करते हैं। तीन मेट्रिक्स में से दो सीधे इस बात पर निर्भर करते हैं कि आप छवियों को कैसे संभालते हैं। CLS (संचयी लेआउट शिफ्ट) पृष्ठ लोड होने पर कूदने वाली सामग्री को दंडित करता है। सबसे आम कारण: स्पष्ट width और height विशेषताओं के बिना एक <img>, जो छवि के डाउनलोड होने तक ब्राउज़र को आरक्षित करने के लिए कोई स्थान नहीं देता है। 0.1 से ऊपर का स्कोर मेट्रिक में विफल होता है। समाधान सरल है: हमेशा width और height सेट करें, यहां तक कि उत्तरदायी छवियों पर भी, ताकि ब्राउज़र पहलू अनुपात की गणना कर सके। LCP (सबसे बड़ा सामग्री पेंट) मापता है कि सबसे बड़ा दृश्यमान तत्व कब लोड होता है। अधिकांश पृष्ठों के लिए वह तत्व हीरो छवि है। 2.5 सेकंड से अधिक कुछ भी विफल हो जाता है। रणनीतियाँ: आधुनिक प्रारूप (WebP, AVIF) परोसें, फोल्ड के नीचे की छवियों पर loading="lazy" का उपयोग करें (Chrome 76, अगस्त 2019), और हीरो पर fetchpriority="high" का उपयोग करें। प्लेसहोल्डर दृश्य रूप से अंतर को पाटते हैं: लेआउट के लिए स्केलेटन स्क्रीन, वास्तविक छवि रंग पैलेट के तत्काल पूर्वावलोकन के लिए BlurHash या ThumbHash।

छवि प्रारूप निर्णय गाइड

• PNG (1996)। हानिरहित, पारदर्शिता का समर्थन करता है, पेटेंट समस्या नहीं। लोगो, आइकन, स्क्रीनशॉट, तेज किनारों वाले ग्राफिक्स के लिए सर्वोत्तम। अनुक्रमित-रंग PNG-8 (256 रंग) RGB PNG-24 की तुलना में नाटकीय रूप से छोटा है और अक्सर UI आइकनों के लिए अदृश्य है।
• JPEG (1992)। हानिकारक, पारदर्शिता नहीं, फोटोग्राफ़ी के लिए अनुकूलित। गुणवत्ता 75-85 वेब के लिए स्वीट स्पॉट है; आधे आकार पर गुणवत्ता 95 से दृष्टिगत रूप से अप्रभेद्य। तेज किनारों (पाठ, लोगो) वाली किसी भी चीज़ के लिए JPEG से बचें: आपको दृश्यमान रिंगिंग आर्टिफ़ैक्ट मिलते हैं।
• WebP (Google, 2010)। समान दृश्य गुणवत्ता पर JPEG से 25-35% छोटा, हानिरहित के लिए PNG से भी छोटा। पारदर्शिता, एनिमेशन, हानिकारक और हानिरहित दोनों मोड का समर्थन करता है। ब्राउज़र समर्थन: 2024 तक 97%। नए साइटों के लिए डिफ़ॉल्ट विकल्प।
• AVIF (Alliance for Open Media, 2019)। AV1 वीडियो कोडेक पर आधारित। JPEG से लगभग 50% छोटा, WebP से 20% छोटा। एन्कोड करने के लिए उच्च CPU लागत। ब्राउज़र समर्थन: 2024 तक ~93%, पुराने Safari पर अनुपलब्ध। <picture> फॉलबैक के पीछे उपयोग करें।
• SVG। वेक्टर। गुणवत्ता हानि के बिना अनंत रूप से स्केल करता है। SVG में एक लोगो अक्सर 512×512 PNG के 10 KB बनाम 500 बाइट होता है। HTML में इनलाइन SVG एक अतिरिक्त HTTP अनुरोध से पूरी तरह बचता है। फोटोग्राफ़ी के लिए उपयोग न करें।
• Data URI। data:image/png;base64,... HTML या CSS में सीधे छवि बाइट्स एम्बेड करता है। आसपास की फ़ाइल को ~33% (base64 ओवरहेड) फुलाने की कीमत पर एक HTTP अनुरोध बचाता है। छोटे प्लेसहोल्डर थंबनेल के लिए सार्थक, हीरो छवियों के लिए कभी नहीं।

प्लेसहोल्डर छवियाँ वास्तव में कहाँ उपयोग की जाती हैं

• वायरफ्रेम और मॉकअप। Figma, Sketch, Adobe XD, Penpot सभी ड्रैग-एंड-ड्रॉप प्लेसहोल्डर छवियों का समर्थन करते हैं। डिज़ाइनर कला निर्देशन आने से पहले लेआउट का स्केच बनाते हैं, ग्रे आयतों या आयाम पाठ का दृश्य प्लेसहोल्डर के रूप में उपयोग करते हैं।
• स्केलेटन स्क्रीन। Twitter, Facebook, YouTube, LinkedIn सभी सामग्री लोड होने के दौरान ग्रे ब्लॉक प्लेसहोल्डर दिखाते हैं। ल्यूक रॉब्लेव्स्की (2013) के अनुसंधान से पता चलता है कि स्केलेटन स्क्रीन कथित लोड समय को स्पिनर की तुलना में 20% तक तेज़ महसूस कराते हैं।
• डिज़ाइन सिस्टम कहानियाँ। Storybook, Histoire और Ladle घटक पूर्वावलोकन प्रस्तुत करते हैं जिनमें स्टैंड-इन छवियों की आवश्यकता होती है। एक सुसंगत प्लेसहोल्डर सेट CI बिल्ड में स्क्रीनशॉट को पुनरुत्पादित करने योग्य बनाता है।
• ईमेल मॉकअप। Litmus, Email on Acid, Mailchimp टेम्पलेट बिल्डर्स। ईमेल क्लाइंट छवि समर्थन में काफी भिन्न होते हैं (Outlook डेस्कटॉप, Gmail वेब, iOS Mail), इसलिए डिज़ाइनर उत्पादन एसेट्स में बदलने से पहले प्लेसहोल्डर के साथ परीक्षण करते हैं।
• प्रिंट प्रूफ। पुस्तक लेआउट, पत्रिका पृष्ठ और पैकेजिंग डिज़ाइन टाइपसेटिंग के दौरान FPO («for position only») प्लेसहोल्डर का उपयोग करते हैं। आयाम फोटोग्राफर द्वारा वितरित किए जाने से बहुत पहले लेआउट में रहते हैं।
• ट्यूटोरियल और दस्तावेज़ीकरण। «कार्ड घटक कैसे बनाएँ» लिखते समय, आपको ऐसी छवि स्टैंड-इन की आवश्यकता होती है जो स्रोत बदलने पर न टूटे। बाहरी सेवाएँ बंद होने पर (जैसे Lorem Pixel ने किया) स्वयं-होस्ट किए गए प्लेसहोल्डर जीवित रहते हैं।
• A/B परीक्षण और प्रोटोटाइप। तीन अलग-अलग छवि आकारों के साथ लेआउट का त्वरित परीक्षण वास्तविक एसेट्स को फिर से रेंडर करने की तुलना में जनरेट किए गए प्लेसहोल्डर के साथ तेज़ है।

गलतियाँ जो पृष्ठ प्रदर्शन को नुकसान पहुँचाती हैं

• width और height विशेषताओं को भूलना। खराब CLS स्कोर का सबसे आम कारण। CSS-संचालित प्रतिक्रियाशील छवियों के साथ भी, आंतरिक width और height सेट करें ताकि ब्राउज़र सही पहलू अनुपात आरक्षित करे। आधुनिक ब्राउज़र 2020 से इन विशेषताओं से aspect-ratio: width/height स्वचालित रूप से गणना करते हैं।
• 200×200 डिस्प्ले के लिए 4096×4096 प्लेसहोल्डर परोसना। बीस गुना बाइट्स बिना किसी दृश्य लाभ के। प्लेसहोल्डर आयामों को वास्तविक रेंडर किए गए आकार से मिलाएँ, या कई वेरिएंट के साथ srcset का उपयोग करें।
• खाली या अनुपस्थित alt पाठ। स्क्रीन रीडर बिना संदर्भ के «छवि» की घोषणा करते हैं। विशुद्ध रूप से सजावटी प्लेसहोल्डर के लिए, «इसे छोड़ें» का संकेत देने के लिए स्पष्ट रूप से alt="" का उपयोग करें। सामग्री छवियों के लिए, प्लेसहोल्डर पर भी विवरण लिखें ताकि QA गुम कॉपी पकड़ ले।
• विशाल data URIs इनलाइन करना। base64 के रूप में एक 100 KB छवि आपके HTML के अंदर ~133 KB बन जाती है, पार्सिंग को अवरुद्ध करती है, और कैशिंग को बर्बाद करती है (HTML को आमतौर पर आक्रामक रूप से कैश नहीं किया जाता, छवियाँ की जाती हैं)। केवल ~2-4 KB से कम पर data URIs का उपयोग करें।
• उत्पादन में placehold.it / lorempixel / बाहरी सेवाओं पर निर्भरता। वे डाउन हो जाती हैं। Lorem Pixel लगभग 2017 में गायब हो गया और हजारों डेमो साइटों को तोड़ दिया। ट्यूटोरियल, डेमो और कहानियों के लिए, प्लेसहोल्डर स्वयं उत्पन्न करें या स्वयं-होस्ट करें।
• फोटोग्राफ़ के लिए PNG, लोगो के लिए JPEG। PNG के रूप में एक फोटो उसी छवि के JPEG से 3-5 गुना बड़ी है। JPEG के रूप में एक लोगो किनारों के चारों ओर बदसूरत संपीड़न रिंग प्राप्त करता है। आदत से नहीं, सामग्री प्रकार से प्रारूप चुनें।
• loading="lazy" को छोड़ना। फोल्ड के नीचे की छवियाँ जो उत्सुकता से लोड होती हैं हीरो के साथ बैंडविड्थ के लिए प्रतिस्पर्धा करती हैं। व्यूपोर्ट के नीचे की हर चीज़ में loading="lazy" जोड़ें। मूल, कोई लाइब्रेरी की आवश्यकता नहीं, Chrome 76 (अगस्त 2019) और Safari 15.4 (2022) से समर्थित।

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

एक प्लेसहोल्डर पर आयाम लेबल इतना उपयोगी क्यों है?

जब आपके पास एक लेआउट में विभिन्न आकारों में एक दर्जन प्लेसहोल्डर होते हैं, तो लेबल आपको तुरंत बताता है कि कौन सा स्लॉट कौन सा है। एक ग्रे आयत पर «400×300» यह अनुमान लगाने से अधिक जानकारीपूर्ण है कि कार्ड 4:3 है या 16:9। मॉकअप की समीक्षा करने वाले डिज़ाइनर और डेवलपर्स कमरे के दूसरी छोर से गलत आकार के तत्वों को देख सकते हैं।

BlurHash, ThumbHash और LQIP में क्या अंतर है?

तीनों एक छवि का छोटा पूर्वावलोकन एनकोड करते हैं जो एक धुंधले प्लेसहोल्डर में डिकोड होता है। LQIP («निम्न-गुणवत्ता छवि प्लेसहोल्डर») केवल एक छोटा JPEG है (~100 बाइट्स से 2 KB)। BlurHash (Wolt, 2019) किसी भी छवि को 20-30 वर्ण ASCII स्ट्रिंग में एनकोड करता है जिसे आप अपने डेटाबेस में संग्रहीत करते हैं; डिकोड समय माइक्रोसेकंड है। ThumbHash (इवान वालेस, 2023) समान है लेकिन समान गुणवत्ता के लिए 30-50% छोटा, और तेज़ किनारों को रेंडर करता है। आधुनिक फ्रेमवर्क (Next.js, Astro, Hugo) सभी BlurHash का समर्थन डिफ़ॉल्ट रूप से करते हैं।

क्या मुझे प्लेसहोल्डर थंबनेल के लिए SVG या PNG का उपयोग करना चाहिए?

SVG यदि प्लेसहोल्डर एक सरल आकार (आयत, आइकन, ज्यामितीय पैटर्न) है। 50-बाइट इनलाइन SVG हर बार 2 KB PNG को हराता है। PNG यदि आपको पिक्सेल-सटीक टेक्स्ट रेंडरिंग या विशिष्ट फ़ॉन्ट फॉलबैक की आवश्यकता है: SVG टेक्स्ट रेंडरिंग ब्राउज़र और प्लेटफ़ॉर्म के बीच भिन्न होती है। क्लाइंट-साइड जनरेट किए गए गतिशील प्लेसहोल्डर के लिए, यह टूल PNG बनाता है क्योंकि कैनवास टेक्स्ट रेंडरिंग ब्राउज़र में पूर्वानुमेय है।

क्या उत्पन्न PNG में EXIF या छिपा मेटाडेटा शामिल है?

नहीं। HTML कैनवास toBlob() या toDataURL() APIs द्वारा उत्पन्न PNG में केवल IHDR, IDAT, और IEND खंड हैं, साथ ही कुछ ब्राउज़र में एक न्यूनतम tEXt खंड। कोई GPS नहीं, कोई कैमरा जानकारी नहीं, कोई संपादन इतिहास नहीं, कोई उपयोगकर्ता पहचानकर्ता नहीं। फोन-कैमरा JPEG के साथ तुलना करें जो GPS निर्देशांक और डिवाइस सीरियल नंबर लीक करते हैं।

जब मैं यहाँ एक छवि उत्पन्न करता हूँ तो क्या कुछ सर्वर पर भेजा जाता है?

नहीं। छवि आपके ब्राउज़र में HTML5 Canvas 2D API के माध्यम से स्थानीय रूप से खींची जाती है। उत्पन्न करते समय DevTools में नेटवर्क टैब खोलें: छवि के लिए शून्य आउटबाउंड अनुरोध। गोपनीय मॉकअप, NDA, क्लाइंट कार्य और अप्रकाशित उत्पाद डिज़ाइन के लिए सुरक्षित।