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

केटी हेम्पेनियस

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

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

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

• उस कोड के लिए index.html चेकआउट करें जिससे यह काम करता है.

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

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

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

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

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

रंग का सबसे छोटा बिंदु, जिसे डिवाइस पर दिखाया जा सकता है.

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

वह जानकारी जो ग्रिड में किसी खास जगह के रंग के बारे में बताती है. इस प्रकार के पिक्सेल का कोई स्वाभाविक आकार नहीं है.

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

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

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

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

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

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

window.devicePixelRatio

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

devicePixelRatio किसी खास डिवाइस के लिए, डिवाइस के पिक्सल और सीएसएस पिक्सल के बीच के संबंध के बारे में बताता है. किसी 192 ppi डिवाइस का devicePixelRatio (192 ppi/96 ppi = 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 एट्रिब्यूट का इस्तेमाल, सिर्फ़ चौड़ाई के ब्यौरे के साथ किया जाता है.