ज़्यादा पिक्सल डेंसिटी वाले डिसप्ले, तेज़ी से आम हो रहे हैं. कॉन्टेंट क्रिएटर्स को इस बात को ध्यान में रखना होगा. इस छोटी गाइड में, वेब पर अच्छी क्वालिटी की इमेज दिखाने का तरीका बताया गया है. इसमें, फ़ोलिएपॉल, JavaScript, सीएसएस हैक, और ब्राउज़र की उन सुविधाओं का इस्तेमाल नहीं किया गया है जो अब तक पूरी तरह से लागू नहीं की गई हैं. एक शब्द में: अपने वर्कफ़्लो में काफ़ी बदलाव किए बिना.
फ़िलहाल, रिस्पॉन्सिव इमेज के कई प्रस्ताव हैं. इनमें से कई में वेब डेवलपर के लिए अहम बदलाव शामिल हैं. स्टैंडर्ड-ट्रैक srcset
<img> एट्रिब्यूट को लागू करना मुश्किल है. खास तौर पर, srcset के व्यूपोर्ट पर आधारित अतिरिक्त विकल्प की जटिलता के साथ:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
भले ही, image-set सीएसएस प्रॉपर्टी सिर्फ़ devicePixelRatio का इस्तेमाल करके यह तय करती है कि कौनसी इमेज लोड करनी है, फिर भी यह डेवलपर को हर इमेज के लिए बहुत ज़्यादा मार्कअप लिखने के लिए मजबूर करती है.
<picture> एलिमेंट जैसे अन्य प्रस्तावों में ज़्यादा शब्द होते हैं.
इसके अलावा, ये स्टैंडर्ड-ट्रैक नहीं हैं. इसलिए, इनकी हर जगह उपलब्धता, srcset एट्रिब्यूट से भी ज़्यादा दूर है. JavaScript और सर्वर साइड के समाधान ही एकमात्र विकल्प हैं. हालांकि, इन तरीकों की अपनी कमियां हैं, जिनके बारे में अन्य लेखों में बताया गया है.
इस लेख में, वेब पर आम तौर पर मिलने वाली इमेज के कई इस्तेमाल के बारे में बताया गया है. साथ ही, ऐसे आसान समाधान भी सुझाए गए हैं जो ज़्यादा पिक्सल डेंसिटी वाली स्क्रीन के साथ-साथ सामान्य स्क्रीन पर भी काम करते हैं. इस बातचीत के लिए, किसी भी ऐसे डिवाइस को ज़्यादा डीपीआई माना जा सकता है जिसकी window.devicePixelRatio वैल्यू 1 से ज़्यादा हो. इसकी वजह यह है कि इसका मतलब है कि सीएसएस पिक्सल, डिवाइस पिक्सल के बराबर नहीं हैं और इमेज को स्केल किया जा रहा है.
सारांश यहां दिया गया है:
- अगर हो सके, तो रेस्टर इमेज के बजाय सीएसएस/एसवीजी का इस्तेमाल करें.
- डिफ़ॉल्ट रूप से, हाई डेंसिटी डिसप्ले के लिए ऑप्टिमाइज़ की गई इमेज का इस्तेमाल करें.
- आसान ड्रॉइंग और पिक्सल आर्ट (जैसे, लोगो) के लिए, PNG का इस्तेमाल करें.
- अलग-अलग रंगों वाली इमेज (जैसे, फ़ोटो) के लिए, कंप्रेस किए गए JPEG का इस्तेमाल करें.
- सभी इमेज एलिमेंट पर, सीएसएस या एचटीएमएल का इस्तेमाल करके, हमेशा साइज़ सेट करें.
आसान ड्रॉइंग और पिक्सल आर्ट
सीएसएस सुविधाओं या SVG का इस्तेमाल करके, अक्सर छोटी इमेज का इस्तेमाल पूरी तरह से रोका जा सकता है.
उदाहरण के लिए, border-radius सीएसएस प्रॉपर्टी का इस्तेमाल कई जगहों पर किया जा सकता है. इसलिए, राउंड किए गए कोनों के लिए इमेज का इस्तेमाल करने की ज़रूरत नहीं है. इसी तरह, कस्टम फ़ॉन्ट का इस्तेमाल ज़्यादातर जगहों पर किया जा सकता है. इसलिए, "इमेज" वाले टेक्स्ट का इस्तेमाल करने का सुझाव नहीं दिया जाता.
हालांकि, कुछ मामलों में, जैसे कि लोगो के लिए, इमेज ही एकमात्र विकल्प हो सकता है. उदाहरण के लिए, Chrome के इस लोगो का साइज़ 256 x 256 है. रेटिना डिसप्ले पर, डायगनल और कर्व में लाइन ऐलियसिंग दिख सकती है. यह टेक्स्ट को खराब और बेकार बनाती है. खास तौर पर, जब इसे बेहतर तरीके से रेंडर किए गए टेक्स्ट से तुलना की जाती है, तो यह और भी खराब दिखती है:
नेचुरल डाइमेंशन: 256x256px, एसेट का साइज़: 31 kB, फ़ॉर्मैट: PNG
क्या आपको इस बात पर भरोसा है? बहुत बढ़िया। अब ज़्यादा पिक्सल वाली इमेज का इस्तेमाल करते हैं. हो सकता है कि आप अपने लोगो को JPEG फ़ॉर्मैट में सेव करके, स्टोरेज बचाना चाहें. हालांकि, ऐसा करना अच्छा नहीं होगा. ऐसा इसलिए, क्योंकि लोगो और अन्य ग्राफ़िक को लॉस वाले फ़ॉर्मैट में सेव करने पर, आर्टफ़ैक्ट दिखते हैं. इस मामले में, मैंने बहुत ज़्यादा कंप्रेस करने की सुविधा का इस्तेमाल करके, समस्या को बढ़ा-चढ़ाकर दिखाया है. हालांकि, ग्रेडिएंट पर बैंडिंग, सफ़ेद बैकग्राउंड पर धब्बे, और गड़बड़ लाइनों पर ध्यान दें:
नेचुरल डाइमेंशन: 512x512px, एसेट का साइज़: 13 kB, फ़ॉर्मैट: JPEG
कम साइज़ वाली इमेज के लिए, दो गुना बड़ी PNG इमेज का इस्तेमाल करें. ध्यान रखें कि आम तौर पर, 1x और 2x PNG के साइज़ में काफ़ी अंतर होता है. इस मामले में, यह अंतर 52 केबी है. हालांकि, लोगो आपकी वेबसाइट का चेहरा होता है और वेबसाइट पर आने वाले लोगों को सबसे पहले यह दिखता है. साइट के साइज़ को बढ़ाने के लिए, इमेज की क्वालिटी को कम करने से, आपके वेबसाइट पर आने वाले लोग इमेज को देखना बंद कर देंगे!
यहां Chrome का लोगो दिखाया गया है. इसे 2x डिसप्ले के लिए, उसके सामान्य डाइमेंशन के आधे हिस्से तक छोटा किया गया है:
नेचुरल डाइमेंशन: 512x512px, एसेट का साइज़: 83 kB, फ़ॉर्मैट: PNG
ऊपर दिए गए रेंडर को बनाने के लिए, यह मार्कअप इस्तेमाल किया गया है:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
ध्यान दें कि मैंने इमेज की चौड़ाई और ऊंचाई तय की है. ऐसा करना ज़रूरी है, क्योंकि इमेज का मूल साइज़ 512 पिक्सल है. यह परफ़ॉर्मेंस के लिए भी अच्छा है, क्योंकि रेंडरिंग इंजन को एलिमेंट के साइज़ की अच्छी जानकारी होती है और उसे कैलकुलेट करने के लिए ज़्यादा मेहनत नहीं करनी पड़ती.
24-बिट PNG को पैलेट वाले 8-बिट में बदलने से, ऑप्टिमाइज़ेशन की समस्या हल हो सकती है. यह सुविधा, कम रंगों वाली इमेज के लिए काम करती है. इसमें Chrome का लोगो भी शामिल है. इमेज को ऑप्टिमाइज़ करने के लिए, http://pngquant.org/ जैसे टूल का इस्तेमाल किया जा सकता है. यहां आपको थोड़ी बैंडिंग दिख सकती है, लेकिन यह फ़ाइल सिर्फ़ 13 केबी की है. यह साइज़, 512x512 के ओरिजनल PNG की तुलना में छह गुना कम है.
नेचुरल डाइमेंशन: 512x512px, एसेट का साइज़: 13 kB, फ़ॉर्मैट: PNG,
8-bit palette
अलग-अलग रंगों वाली इमेज
मैंने HTML5Rocks पर एक लेख लिखा है, जिसमें रिस्पॉन्सिव इमेज की कई अलग-अलग तकनीकों के बारे में बताया गया है. साथ ही, मैंने 1x और 2x JPEG को कंप्रेस करने के बारे में कुछ रिसर्च की है और इनके साइज़ और विज़ुअल क्वालिटी की तुलना की है. ऊपर दिए गए लेख में से एक ऐसी टाइल यहां दी गई है:
मैंने इमेज को उनके कंप्रेस करने के लेवल (JPEG क्वालिटी से पता चलता है), उनके साइज़ (बाइट में), और तुलनात्मक विज़ुअल फ़िडेलिटी (संख्याओं के हिसाब से रैंक) के आधार पर लेबल किया है. यहां दिलचस्प बात यह है कि ज़्यादा कंप्रेशन वाली 2x इमेज (लेबल 3), बिना कंप्रेशन वाली 1x इमेज (लेबल 4) की तुलना में छोटी है और बेहतर दिखती है. दूसरे शब्दों में, चौथी और तीसरी इमेज के बीच, हमने हर डाइमेंशन को दोगुना करके और कंप्रेस करने की सुविधा को काफ़ी बढ़ाकर, इमेज की क्वालिटी को बेहतर बनाया है. साथ ही, इमेज का साइज़ 2 केबी तक कम किया है.
कंप्रेस करने की सुविधा, डाइमेंशन, और विज़ुअल क्वालिटी
मुझे कंप्रेसन लेवल, इमेज डाइमेंशन, विज़ुअल क्वालिटी, और इमेज साइज़ के बीच के ट्रेडऑफ़ के बारे में ज़्यादा जानकारी चाहिए. मैंने ऊपर दी गई स्टडी के आधार पर, यह अनुमान लगाने के लिए एक स्टडी की:
हाइपोथीसिस
ज़रूरत के मुताबिक कंप्रेस करने पर, 2x साइज़ की इमेज, किसी दूसरे (कम) कंप्रेस किए गए साइज़ की इमेज के बराबर दिखेगी. हालांकि, इस मामले में, ज़्यादा कंप्रेस की गई 2x इमेज का साइज़, 1x इमेज से छोटा होगा.
प्रोसेस
- 2x इमेज को 1x में बदलें.
- दोनों इमेज को अलग-अलग लेवल पर कंप्रेस करें.
- एक ऐसा टेस्ट पेज बनाएं जो दोनों इमेज सेट को एक साथ दिखाता हो.
- दोनों सेट में ऐसी जगह ढूंढें जहां इमेज एक जैसी हों.
- इमेज के साइज़ और कंप्रेस करने के लेवल पर ध्यान दें.
- इसे 1x और 2x, दोनों डिसप्ले पर आज़माएं.
मैंने Lightroom के तुलना व्यू की तरह, इमेज की अगल-बगल तुलना करने वाला ऐप्लिकेशन बनाया है. इसका मकसद, एक साथ 1x और 2x वाली इमेज दिखाना है. साथ ही, ज़्यादा जानकारी पाने के लिए, इमेज के किसी भी सेक्शन को ज़ूम करने की सुविधा भी देना है. फ़ाइल के साइज़ और इमेज की क्वालिटी की तुलना देखने के लिए, JPEG और WebP फ़ॉर्मैट में से किसी एक को चुना जा सकता है. साथ ही, कंप्रेशन क्वालिटी में बदलाव भी किया जा सकता है. इसका मकसद, कई इमेज की सेटिंग में बदलाव करना है. साथ ही, यह पता लगाना है कि आपको कंप्रेस करने की क्वालिटी, स्केलिंग, और फ़ॉर्मैट बनाम इमेज क्वालिटी में से किस तरह के बदलाव से सहजता महसूस होती है. इसके बाद, अपनी सभी इमेज के लिए उस सेटिंग का इस्तेमाल करें.
यह टूल आपके लिए उपलब्ध है. इमेज में ज़ूम इन करने के लिए, ज़ूम इन करने के लिए कोई सब-एरिया चुनें.
विश्लेषण
हम आपको बता दें कि इमेज क्वालिटी को लेकर लोगों के अलग-अलग विचार हो सकते हैं. साथ ही, आपके इस्तेमाल के उदाहरण से यह तय होगा कि विज़ुअल फ़िडेलिटी बनाम फ़ाइल साइज़ के स्पेक्ट्रम में आपकी प्राथमिकताएं कहां हैं. इसके अलावा, अलग-अलग तरह की इमेज की सुविधाएं, स्केलिंग और कंप्रेस करने की क्वालिटी पर अलग-अलग तरीके से काम करती हैं. इसलिए, यह ज़रूरी नहीं है कि एक ही तरीका सभी के लिए काम करे. इस टूल का मकसद, इमेज क्वालिटी के कंप्रेसन, स्केल, और फ़ॉर्मैट के बारे में जानकारी देना है.
इमेज ज़ूमर का इस्तेमाल करके, मुझे कुछ बातें तुरंत समझ आ गईं. सबसे पहले, मुझे ज़्यादा जानकारी के लिए quality=30 dpr=2x इमेज की तुलना में quality=90
dpr=1x इमेज पसंद हैं. इन इमेज का फ़ाइल साइज़ भी एक जैसा है. प्लेन के मामले में, कंप्रेस की गई 2x इमेज का साइज़ 76 केबी है, जबकि अनकंप्रेस की गई 1x इमेज का साइज़ 80 केबी है.
इस नियम के अपवाद, ग्रेडिएंट वाली बहुत ज़्यादा संपीड़ित (quality<30) इमेज हैं. इनमें कलर बैंडिंग की समस्या होती है. यह समस्या, इमेज के स्केल के बावजूद एक जैसी ही होती है. टूल में मिले पक्षी और कार के सैंपल, इसका उदाहरण हैं.
WebP इमेज, JPEG इमेज के मुकाबले ज़्यादा बेहतर दिखती हैं. खास तौर पर, कम कंप्रेशन लेवल पर. ऐसा लगता है कि कलर बैंडिंग की समस्या काफ़ी कम है. आखिर में, WebP इमेज का साइज़ काफ़ी छोटा होता है.
चेतावनियां और फ़ाइन
हाई डेंसिटी डिसप्ले पर इमेज को अच्छी तरह से दिखाना, इमेज से जुड़ी समस्याओं का आधा हिस्सा है. स्क्रीन में काफ़ी अंतर होने की वजह से, इमेज से जुड़ी समस्याएं आती हैं. कुछ मामलों में, हो सकता है कि आप वेबव्यू के साइज़ के हिसाब से, पूरी तरह से अलग इमेज दिखाना चाहें. उदाहरण के लिए, फ़ोन के साइज़ वाली स्क्रीन के लिए, ओबामा का हेडशॉट सही हो सकता है. हालांकि, उनके सामने मौजूद स्टैंड और पीछे मौजूद फ़्लैग के साथ-साथ कुछ और चीज़ें, लैपटॉप डिसप्ले के लिए बेहतर हो सकती हैं.
मैंने सिर्फ़ हाई डीपीआई वाली इमेज पर फ़ोकस करने के लिए, "आर्ट डायरेक्शन" टॉपिक को जान-बूझकर शामिल नहीं किया है. इस समस्या को कई अलग-अलग तरीकों से हल किया जा सकता है: मीडिया क्वेरी और बैकग्राउंड इमेज का इस्तेमाल करके, JavaScript के ज़रिए, image-set जैसी कुछ नई सुविधाओं के ज़रिए या सर्वर पर. इस विषय के बारे में अलग-अलग पिक्सल डेंसिटी के लिए हाई डीपीआई इमेज में बताया गया है.
आखिर में, कुछ समस्याओं के बारे में बताकर मैं साइन आउट करूंगा:
- ज़्यादा कंप्रेस करने पर परफ़ॉर्मेंस पर पड़ने वाले असर. ज़्यादा कंप्रेस की गई इमेज को डिकोड करने पर क्या दंड मिलता है?
- जब 2x इमेज को 1x डिसप्ले पर लोड किया जाता है, तो इमेज का साइज़ कम करने पर परफ़ॉर्मेंस पर क्या असर पड़ता है?
खास जानकारी के लिए, रेस्टर इमेज इस्तेमाल करने के बजाय, सीएसएस और एसवीजी का इस्तेमाल करें. अगर रेस्टर इमेज ज़रूरी हैं, तो सीमित पैलेट और कई सॉलिड रंगों वाली इमेज के लिए PNG का इस्तेमाल करें. साथ ही, कई रंगों और ग्रेडिएंट वाली इमेज के लिए JPEG का इस्तेमाल करें. इस तरीके की सबसे अच्छी बात यह है कि आपके मार्कअप में कोई बदलाव नहीं होता. वेब डेवलपर को सिर्फ़ दो ऐसेट जनरेट करनी होती हैं और डीओएम में अपनी इमेज का साइज़ सही से तय करना होता है.
इस बारे में ज़्यादा जानने के लिए, मिलते-जुलते विषय पर स्कॉट जेहल का लेख पढ़ें. आपकी इमेज बेहतरीन दिखें और आपका मोबाइल डेटा कम खर्च हो!