इस डेमो को एक्सप्लोर करें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें को दबाएं. इसके बाद, फ़ुलस्क्रीन
को दबाएं. - अलग-अलग डिवाइसों का इस्तेमाल करके पेज को फिर से लोड करें, ताकि यह देखा जा सके कि ब्राउज़र अलग-अलग इमेज लोड करता है या नहीं.
इसके लिए, डिवाइस एम्युलेटर का इस्तेमाल किया जा सकता है. अगर आपको खास डिसप्ले डेंसिटी वाले डिवाइसों पर ऐप्लिकेशन को टेस्ट करना है, तो यहां दिए गए कुछ डिवाइसों को आज़माएं:
| 1x डेंसिटी | Blackberry Playbook, कई बाहरी मॉनिटर |
| 2x डेंसिटी | iPad या iPhone 5/6 |
| तीन गुना डेंसिटी | Galaxy S5 या iPhone X |
- इस सुविधा को काम करने लायक बनाने वाले कोड के लिए,
index.htmlदेखें.
यह कैसे काम करता है?
ऐसा हो सकता है कि ज़्यादातर लोगों को डेंसिटी डिस्क्रिप्टर के बारे में जानकारी न हो. इन्हें बेहतर तरीके से समझने के लिए, यह जानना ज़रूरी है कि ब्राउज़र, पिक्सल के साथ कैसे काम करता है.
पिक्सल क्या होते हैं
आइए, सबसे पहले पिक्सल की परिभाषा से शुरुआत करते हैं. यह सुनने में आसान लगता है, लेकिन "पिक्सल" के कई मतलब हो सकते हैं:
- डिवाइस पिक्सल (इसे "फ़िज़िकल पिक्सल" भी कहा जाता है)
- रंग का सबसे छोटा बिंदु, जिसे किसी डिवाइस पर दिखाया जा सकता है.
- लॉजिकल पिक्सल
- यह जानकारी, ग्रिड पर किसी खास जगह के रंग के बारे में बताती है. इस तरह के पिक्सल का कोई साइज़ नहीं होता.
- सीएसएस पिक्सल
- सीएसएस की खास जानकारी में, पिक्सल को फ़िज़िकल मेज़रमेंट की एक इकाई के तौर पर बताया गया है. 1 पिक्सल = एक इंच का 1/96वां हिस्सा.
पिक्सल डेंसिटी
पिक्सल डेंसिटी (इसे "स्क्रीन डेंसिटी" या "डिसप्ले डेंसिटी" भी कहा जाता है) से, किसी फ़िज़िकल एरिया में डिवाइस के पिक्सल की डेंसिटी का पता चलता है. इसे आम तौर पर, पिक्सल प्रति इंच (पीपीआई) का इस्तेमाल करके मापा जाता है.
कई सालों तक, 96 पीपीआई एक बहुत ही सामान्य डिसप्ले डेंसिटी थी. इसलिए, सीएसएस ने पिक्सल को एक इंच के 1/96वें हिस्से के तौर पर तय किया. 1980 के दशक से, यह Windows का डिफ़ॉल्ट रिज़ॉल्यूशन था. इसके अलावा, यह सीआरटी मॉनिटर का रिज़ॉल्यूशन था.
साल 2000 के दशक में एलईडी मॉनिटर के आम होने के बाद, इसमें बदलाव होने लगा. खास तौर पर, Apple ने 2010 में Retina डिसप्ले लॉन्च करके, काफ़ी सुर्खियां बटोरी थीं. इन डिसप्ले का रिज़ॉल्यूशन कम से कम 192 पीपीआई था. यह "सामान्य" डिसप्ले के रिज़ॉल्यूशन (192 पीपीआई/96 पीपीआई = 2) से दोगुना था.
window.devicePixelRatio
डिसप्ले की नई टेक्नोलॉजी आने के बाद, "डिवाइस पिक्सल" के फ़िज़िकल साइज़ और शेप में अंतर आने लगा. साथ ही, इनका साइज़ "सीएसएस पिक्सल" के साइज़ से अलग हो गया. "डिवाइस पिक्सल" और "सीएसएस पिक्सल" के साइज़ के बीच के संबंध को तय करने की ज़रूरत की वजह से, devicePixelRatio को पेश किया गया. इसे कभी-कभी "सीएसएस पिक्सल रेशियो" भी कहा जाता है.
devicePixelRatio किसी डिवाइस के लिए, डिवाइस पिक्सल और सीएसएस पिक्सल के बीच के संबंध को तय करता है. 192 पीपीआई वाले डिवाइस का devicePixelRatio 2 (192 पीपीआई/96 पीपीआई = 2) होता है, क्योंकि "इसके डिसप्ले के दो पिक्सल का साइज़, एक सीएसएस पिक्सल के बराबर होता है".
आजकल ज़्यादातर डिवाइसों में, डिवाइस के पिक्सल का अनुपात 1.0 से 4.0 के बीच होता है.
कंसोल में
window.devicePixelRatioटाइप करके, किसी डिवाइस की पिक्सल डेंसिटी का पता लगाएं.सामान्य डिवाइसों के पिक्सल अनुपात देखने के लिए, यह टेबल देखें. ज़्यादातर वैल्यू 1.0 और 4.0 के बीच होती हैं.
इस जानकारी का इस्तेमाल कैसे किया जा सकता है?
डिवाइस-पिक्सल-अनुपात के आधार पर इमेज का साइज़ तय करें
हाई रिज़ॉल्यूशन वाली स्क्रीन पर इमेज को सबसे अच्छी क्वालिटी में दिखाने के लिए, अलग-अलग devicePixelRatios के लिए इमेज के अलग-अलग वर्शन उपलब्ध कराना ज़रूरी है.
| डिवाइस पिक्सल का अनुपात | इससे पता चलता है कि: | इस डिवाइस पर, 250 पिक्सल की सीएसएस चौड़ाई वाला <img> टैग तब सबसे अच्छा दिखेगा, जब सोर्स इमेज... |
|---|---|---|
| 1 | 1 डिवाइस पिक्सल = 1 सीएसएस पिक्सल | 250 पिक्सल चौड़ी |
| 2 | 2 डिवाइस पिक्सल = 1 सीएसएस पिक्सल | 500 पिक्सल चौड़ी |
| 3 | 3 डिवाइस पिक्सल = 1 सीएसएस पिक्सल | 750 पिक्सल चौड़ी |
इन बातों का ध्यान रखें:
- इमेज एडिटर, फ़ाइल डायरेक्ट्री, और अन्य जगहों पर दिए गए पिक्सल डाइमेंशन, लॉजिकल पिक्सल का मेज़रमेंट होते हैं.
- ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन और बड़े डिसप्ले के लिए, आपको बड़े डाइमेंशन वाली इमेज की ज़रूरत होगी. सिर्फ़ छोटी इमेज को बड़ा करने से, इमेज के कई वर्शन दिखाने का मकसद पूरा नहीं होता. अगर हाई रिज़ॉल्यूशन वाली इमेज नहीं दी जाती, तो ब्राउज़र ऐसा ही करता.
एक से ज़्यादा
इमेज दिखाने के लिए, डेंसिटी डिस्क्रिप्टर का इस्तेमाल करना
डेंसिटी डिस्क्रिप्टर का इस्तेमाल, "srcset " एट्रिब्यूट के साथ किया जा सकता है. इससे अलग-अलग devicePixelRatios के लिए अलग-अलग इमेज दिखाई जा सकती हैं.
index.htmlफ़ाइल देखें और<img>एलिमेंट को नोट करें.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
इस उदाहरण को शब्दों में इस तरह समझा जा सकता है:
1x,2x, और3x, डेंसिटी डिस्क्रिप्टर हैं. इनसे ब्राउज़र को पता चलता है कि किसी इमेज के लिए पिक्सल डेंसिटी क्या है. इससे ब्राउज़र को यह जानकारी पाने के लिए, इमेज डाउनलोड करने की ज़रूरत नहीं पड़ती.- ब्राउज़र, तीन इमेज में से कोई एक चुन सकता है:
flower-1x.jpg(1.0पिक्सल डेंसिटी वाले ब्राउज़र के लिए),flower-2x.jpg(2.0पिक्सल डेंसिटी वाले ब्राउज़र के लिए), औरflower-3x.jpg(3.0पिक्सल डेंसिटी वाले ब्राउज़र के लिए). flower.jpg, उन ब्राउज़र के लिए फ़ॉलबैक इमेज है जोsrcsetके साथ काम नहीं करते.
इसे इस्तेमाल करने का तरीका:
- डेंसिटी डिस्क्रिप्टर लिखने के लिए, devicePixelRatio और
xयूनिट का इस्तेमाल करें. उदाहरण के लिए, कई रेटिना स्क्रीन (window.devicePixelRatio = 2) के लिए डेंसिटी डिस्क्रिप्टर को2xके तौर पर लिखा जाएगा. - अगर डेंसिटी डिस्क्रिप्टर नहीं दिया गया है, तो इसे
1xमाना जाता है. - फ़ाइल के नामों में डेंसिटी डिस्क्रिप्टर शामिल करना एक सामान्य तरीका है. इससे आपको फ़ाइलों को ट्रैक करने में मदद मिलेगी. हालांकि, ऐसा करना ज़रूरी नहीं है. इमेज का कोई भी फ़ाइल नाम हो सकता है.
sizesएट्रिब्यूट को शामिल करने की ज़रूरत नहीं है.sizesएट्रिब्यूट का इस्तेमाल, सिर्फ़ चौड़ाई की जानकारी देने वाले डिस्क्रिप्टर के साथ किया जाता है.