डेंसिटी डिस्क्रिप्टर का इस्तेमाल करें

Katie Hempenius

यह डेमो एक्सप्लोर करें

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
• ब्राउज़र पर अलग-अलग इमेज लोड होने के लिए, अलग-अलग डिवाइसों का इस्तेमाल करके पेज को फिर से लोड करें.

इसके लिए, डिवाइस एम्युलेटर का इस्तेमाल किया जा सकता है. अगर आप खास डिसप्ले डेंसिटी के बारे में खोज रहे हैं, तो यहां कुछ ऐसे डिवाइस दिए गए हैं जिन्हें आप आज़मा सकते हैं:

• इस सुविधा को चालू करने के लिए, index.html पर जाएं.

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

हो सकता है कि ज़्यादातर लोगों को डेंसिटी डिस्क्रिप्टर का कॉन्सेप्ट न पता हो. इन्हें बेहतर तरीके से समझने के लिए, यह जानना ज़रूरी है कि ब्राउज़र पिक्सल के साथ कैसे काम करता है.

पिक्सल क्या होते हैं

चलिए, पिक्सल के बारे में बताकर शुरुआत करते हैं. यह आसान लगता है, लेकिन असल में "पिक्सल" के कई मतलब हो सकते हैं:

डिवाइस पिक्सल (यानी "फ़िज़िकल पिक्सल")

किसी डिवाइस पर दिखाया जा सकने वाला सबसे छोटा रंग का बिंदु.

लॉजिकल पिक्सल

ऐसी जानकारी जो ग्रिड पर किसी खास जगह का रंग बताता है. इस तरह के पिक्सल का कोई तय साइज़ नहीं होता.

सीएसएस पिक्सल

सीएसएस स्पेसिफ़िकेशन में, पिक्सल को फ़िज़िकल मेज़रमेंट की इकाई के तौर पर बताया गया है. 1 पिक्सल = एक इंच का 1/96 हिस्सा.

पिक्सल की सघनता

पिक्सल डेंसिटी (इसे "स्क्रीन डेंसिटी" या "डिसप्ले डेंसिटी" भी कहा जाता है) से, किसी फ़िज़िकल एरिया में डिवाइस के पिक्सल की सघनता का पता चलता है. आम तौर पर, इसे पिक्सल प्रति इंच (पीपीआई) का इस्तेमाल करके मेज़र किया जाता है.

कई सालों तक, 96 पीपीआई डिसप्ले डेंसिटी का इस्तेमाल काफ़ी आम था. इसलिए, सीएसएस में पिक्सल को इंच के 1/96 के तौर पर तय किया गया है. 1980 के दशक से, यह Windows का डिफ़ॉल्ट रिज़ॉल्यूशन था. इसके अलावा, यह सीआरटी मॉनिटर का रिज़ॉल्यूशन भी था.

साल 2000 में एलईडी मॉनिटर के आम तौर पर इस्तेमाल होने से, यह स्थिति बदलने लगी. खास तौर पर, ऐपल ने साल 2010 में Retina डिसप्ले लॉन्च करके काफ़ी सुर्खियां बटोरी थीं. इन डिसप्ले का रिज़ॉल्यूशन कम से कम 192 पीपीआई था. यह "सामान्य" डिसप्ले (192 पीपीआई/96 पीपीआई = 2) के रिज़ॉल्यूशन से दोगुना था.

window.devicePixelRatio

नई डिसप्ले टेक्नोलॉजी के आने के बाद, "डिवाइस पिक्सल" के फ़िज़िकल साइज़ और आकार में अंतर दिखने लगा. साथ ही, ये "सीएसएस पिक्सल" के साइज़ के बराबर नहीं रहे. "डिवाइस पिक्सल" और "सीएसएस पिक्सल" के साइज़ के बीच के संबंध को तय करने की ज़रूरत के चलते, devicePixelRatio (इसे कभी-कभी "सीएसएस पिक्सल रेशियो" भी कहा जाता है) को पेश किया गया.

devicePixelRatio किसी डिवाइस के लिए, डिवाइस पिक्सल और सीएसएस पिक्सल के बीच के संबंध को तय करता है. 192 पीपीआई वाले डिवाइस का devicePixelRatio 2 (192 पीपीआई/96 पीपीआई = 2) है, क्योंकि "इसके डिसप्ले पिक्सल का साइज़, 1 सीएसएस पिक्सल के बराबर है".

फ़िलहाल, ज़्यादातर डिवाइसों का डिवाइस-पिक्सल-रेशियो 1.0 से 4.0 के बीच होता है.

• कंसोल में window.devicePixelRatio लिखकर, किसी डिवाइस की पिक्सल डेंसिटी का पता लगाएं.

• आम तौर पर इस्तेमाल होने वाले डिवाइसों के पिक्सल रेशियो देखने के लिए, यह टेबल देखें. अधिकांश 1.0 और 4.0 के बीच होते हैं.

असल में, इस जानकारी को कैसे लागू किया जा सकता है?

डिवाइस-पिक्सल-अनुपात के आधार पर इमेज का साइज़ तय करना

हाई रिज़ॉल्यूशन वाली स्क्रीन पर इमेज बेहतरीन दिखें, इसके लिए ज़रूरी है कि अलग-अलग devicePixelRatios के लिए इमेज के अलग-अलग वर्शन उपलब्ध कराए जाएं.

इन बातों का ध्यान रखें:

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

एक से ज़्यादा
इमेज दिखाने के लिए, डेंसिटी डिस्क्रिप्टर का इस्तेमाल करना

"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 एट्रिब्यूट का इस्तेमाल सिर्फ़ चौड़ाई के ब्यौरे के साथ किया जाता है.