प्लेसहोल्डर इमेज जनरेटर

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

प्रीव्यू आपकी इमेज की नकल नहीं है, यह असली इमेज है: एक कैनवस एलिमेंट जो आपके सटीक पिक्सेल डायमेंशन में बना है, 2D ड्रॉइंग API से भरा और लेबल किया गया है, फिर canvas.toBlob से सीधे PNG, JPG या WebP में एन्कोड किया गया है। लेबल का फॉन्ट साइज़ छोटे साइड के हिसाब से स्केल होता है (लगभग उसका आठवां हिस्सा, कम से कम 12px), इसलिए चाहे आप 64px की थंबनेल बनाएँ या 4000px का बैनर, टेक्स्ट हमेशा सही अनुपात में रहता है। फोटो मोड में, अपलोड की गई इमेज को "कवर" तरीके से फिट किया जाता है, स्केल करके भरा और बीच से क्रॉप किया जाता है, बिल्कुल CSS के object-fit: cover जैसे, और लेबल को एक हल्का पारदर्शी गहरा बैकग्राउंड मिलता है ताकि व्यस्त इमेज पर भी पढ़ने लायक बना रहे।

हर कीस्ट्रोक पर रीड्रॉ सिंक्रोनस होता है; सिर्फ भारी ब्लॉब एन्कोडिंग को थोड़ा डिबाउंस किया जाता है, इसलिए साइज़ की रीडिंग प्रीव्यू से थोड़ी पीछे रहती है। एक बात ध्यान रखने लायक: फ्लैट-कलर प्लेसहोल्डर हैरतअंगेज़ तरीके से अच्छे से कंप्रेस होते हैं। 4000×4000 का सॉलिड PNG अक्सर 40 KB से भी कम का होता है, क्योंकि DEFLATE एक जैसी पंक्तियों को लगभग कुछ भी नहीं में समेट देता है। यह क्विक मॉकअप के लिए बढ़िया है, लेकिन अगर आप लोड परफॉर्मेंस टेस्ट कर रहे हैं तो यह भ्रामक हो सकता है, क्योंकि उतने ही साइज़ की असली फोटो सौ गुना भारी होगी। ईमानदार वज़न के लिए, फोटो बैकग्राउंड मोड इस्तेमाल करें, या इसे टेस्ट फाइल जनरेटर के साथ मिलाकर एसेट्स को एक वास्तविक बाइट साइज़ तक बढ़ाएँ।

ड्रॉइंग, एन्कोडिंग और डाउनलोड सब कुछ इसी टैब के अंदर होता है, जिसमें आपकी छोड़ी हुई कोई भी फोटो शामिल है, जिसे एक ऑब्जेक्ट URL के ज़रिए पढ़ा जाता है और जो कभी मेमोरी से बाहर नहीं जाती। डेवलपर टूल्स खोलें और जनरेट करते समय नेटवर्क टैब देखें: कोई भी रिक्वेस्ट आपकी इमेज नहीं ले जाती।