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

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