ज़्यादा पिक्सल सघनता वाले डिसप्ले आम तौर पर इस्तेमाल किए जाते हैं. कॉन्टेंट क्रिएटर्स को इस तथ्य के हिसाब से ढलना होगा. इस छोटी गाइड में, वेब पर अच्छी क्वालिटी की इमेज दिखाने का तरीका बताया गया है. इसमें, फ़ोलिएपॉल, 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 से ज़्यादा हो. इसकी वजह यह है कि इसका मतलब है कि सीएसएस पिक्सल, डिवाइस पिक्सल के बराबर नहीं हैं और इमेज को स्केल किया जा रहा है.
सारांश यहां दिया गया है:
- अगर हो सके, तो रास्टर तस्वीरों की जगह सीएसएस/SVG का इस्तेमाल करें.
- डिफ़ॉल्ट रूप से, हाई डेंसिटी डिसप्ले के लिए ऑप्टिमाइज़ की गई इमेज का इस्तेमाल करें.
- सामान्य ड्रॉइंग और पिक्सल आर्ट (जैसे, लोगो) के लिए PNG का इस्तेमाल करें.
- अलग-अलग रंगों वाली इमेज के लिए, कंप्रेस किए गए JPEG फ़ॉर्मैट का इस्तेमाल करें. जैसे, फ़ोटो.
- सभी इमेज एलिमेंट पर, सीएसएस या एचटीएमएल का इस्तेमाल करके, हमेशा साफ़ तौर पर साइज़ सेट करें.
सामान्य ड्रॉइंग और पिक्सल आर्ट
सीएसएस सुविधाओं या SVG का इस्तेमाल करके, अक्सर छोटी इमेज का इस्तेमाल पूरी तरह से रोका जा सकता है.
उदाहरण के लिए, गोल किनारों के लिए इमेज इस्तेमाल करने की ज़रूरत नहीं है, क्योंकि border-radius सीएसएस प्रॉपर्टी बड़े पैमाने पर काम करती है. इसी तरह, कस्टम फ़ॉन्ट का इस्तेमाल ज़्यादातर जगहों पर किया जा सकता है. इसलिए, "इमेज वाले" टेक्स्ट का इस्तेमाल करने का सुझाव नहीं दिया जाता.
हालांकि, कुछ मामलों में, जैसे कि लोगो को सिर्फ़ इमेज से आगे बढ़ाया जा सकता है. उदाहरण के लिए, Chrome के इस लोगो का साइज़ 256 x 256 है. रेटिना डिसप्ले पर, डायगनल और कर्व में लाइन ऐलियसिंग दिख सकती है. यह टेक्स्ट को खराब और बेकार बनाती है. खास तौर पर, जब इसे बेहतर तरीके से रेंडर किए गए टेक्स्ट से तुलना की जाती है, तो यह और भी खराब दिखती है:
नेचुरल डाइमेंशन: 256x256px, एसेट का साइज़: 31 kB, फ़ॉर्मैट: PNG
क्या आपको इस बात पर भरोसा है? बहुत बढ़िया। अब हम बड़ी सघनता वाली इमेज का इस्तेमाल करते हैं. आप लोगो को JPEG फ़ॉर्मैट में सेव करके स्टोरेज खाली करना चाहते हैं, लेकिन यह एक अच्छा आइडिया नहीं हो सकता. इसकी वजह यह है कि लोगो और दूसरे ग्राफ़िक को खराब फ़ॉर्मैट में सेव करने से आर्टफ़ैक्ट दिखने लगते हैं. इस मामले में, मैंने बहुत ज़्यादा कंप्रेशन का इस्तेमाल करके समस्या को बढ़ा दिया है, लेकिन ग्रेडिएंट, सफ़ेद बैकग्राउंड पर स्पंकल, और बिखरी हुई लाइनें दिख रही हैं:
नैचुरल डाइमेंशन: 512x512px, ऐसेट का साइज़: 13 kB, फ़ॉर्मैट: JPEG
हालांकि, छोटी इमेज के लिए 2x 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 लेबल से लेबल किया गया है) का साइज़ छोटी होती है और यह बिना कंप्रेस की गई एक इमेज (जिसे 4 लेबल किया गया है) से बेहतर दिखती है. दूसरे शब्दों में, चौथी और तीसरी इमेज के बीच, हमने हर डाइमेंशन को दोगुना करके और कम्प्रेशन को काफ़ी बढ़ाकर, इमेज की क्वालिटी को बेहतर बनाया है. साथ ही, इमेज का साइज़ 2 केबी तक कम किया है.
कंप्रेस करने की सुविधा, डाइमेंशन, और विज़ुअल क्वालिटी
मुझे कंप्रेस करने के लेवल, इमेज के डाइमेंशन, विज़ुअल क्वालिटी, और इमेज के साइज़ के बीच के ट्रेडऑफ़ के बारे में ज़्यादा जानकारी चाहिए. मैंने ऊपर दी गई स्टडी के आधार पर, यह अनुमान लगाने के लिए एक स्टडी की:
हाइपोथीसिस
ज़रूरत के मुताबिक कंप्रेस होने पर, 2x इमेज उसी इमेज को 1x साइज़ की इमेज जैसी ही दिखेगी. हालांकि, कम कंप्रेस करने पर यह इमेज 1x साइज़ की होगी. हालांकि, इस मामले में, बहुत ज़्यादा कंप्रेस की गई 2x इमेज का साइज़, 1x इमेज के साइज़ से छोटा होगा.
प्रोसेस
- 2x इमेज को 1x में बदलें.
- दोनों इमेज को अलग-अलग लेवल पर कंप्रेस करें.
- एक टेस्ट पेज बनाएं, जो दोनों इमेज सेट को एक साथ दिखाता हो.
- दोनों सेट में ऐसी जगह ढूंढें जहां इमेज एक जैसी हों.
- इमेज के साइज़ और कंप्रेस करने के लेवल पर ध्यान दें.
- इसे 1x और 2x, दोनों डिसप्ले पर आज़माएं.
मैंने Lightroom's के तुलना व्यू से मिलता-जुलता एक इमेज तुलना ऐप्लिकेशन बनाया है. इसका मकसद, एक और दो गुना वाली इमेज को एक साथ दिखाना है. साथ ही, ज़्यादा जानकारी पाने के लिए, इमेज के किसी भी सेक्शन को ज़ूम करने की सुविधा भी देना है. फ़ाइल के साइज़ और इमेज क्वालिटी की तुलना करने के लिए, JPEG और WebP फ़ॉर्मैट में से कोई भी फ़ॉर्मैट चुना जा सकता है. साथ ही, कंप्रेस करने की क्वालिटी भी बदली जा सकती है. इसका मकसद, कई इमेज की सेटिंग में बदलाव करना है. साथ ही, यह पता लगाना है कि आपको कंप्रेस करने की क्वालिटी, स्केलिंग, और फ़ॉर्मैट बनाम इमेज क्वालिटी के बीच किस तरह के समझौते पर सहमत होना है. इसके बाद, अपनी सभी इमेज के लिए उस सेटिंग का इस्तेमाल करें.
यह टूल आपके लिए उपलब्ध है. इमेज में ज़ूम इन करने के लिए, इलाके के किसी इलाके को चुनकर ज़ूम इन करें.
विश्लेषण
मैं साफ़ तौर पर बताऊंगा कि इमेज क्वालिटी एक विषय के हिसाब से अलग-अलग होती है. साथ ही, आपके इस्तेमाल के उदाहरण से यह तय होगा कि विज़ुअल फ़िडेलिटी बनाम फ़ाइल साइज़ के स्पेक्ट्रम में आपकी प्राथमिकताएं कहां हैं. इसके अलावा, अलग-अलग तरह की इमेज की सुविधाएं, स्केलिंग और कंप्रेस करने की क्वालिटी पर अलग-अलग तरीके से काम करती हैं. इसलिए, यह ज़रूरी नहीं है कि एक ही तरीका सभी के लिए काम करे. इस टूल का मकसद आपको इमेज क्वालिटी के कंप्रेस करने, स्केल, और फ़ॉर्मैट के बारे में जानकारी देने में मदद करना है.
इमेज ज़ूमर का इस्तेमाल करके, मुझे कुछ बातें तुरंत समझ आ गईं. सबसे पहले, मुझे ज़्यादा जानकारी के लिए quality=30 dpr=2x इमेज की तुलना में quality=90
dpr=1x इमेज पसंद हैं. इन इमेज का फ़ाइल साइज़ भी एक जैसा है. प्लेन के मामले में, कंप्रेस की गई 2x इमेज का साइज़ 76 केबी है, जबकि अनकंप्रेस की गई 1x इमेज का साइज़ 80 केबी है.
इस नियम के अपवाद, ग्रेडिएंट वाली बहुत ज़्यादा संपीड़ित (quality<30) इमेज हैं. इनमें कलर बैंडिंग की समस्या होती है. यह समस्या, इमेज के स्केल के बावजूद एक जैसी ही होती है. टूल में मिले पक्षियों और कार के सैंपल
इसके उदाहरण हैं.
WebP इमेज, JPEG इमेज के मुकाबले ज़्यादा बेहतर दिखती हैं. खास तौर पर, कम कंप्रेशन लेवल पर. ऐसा लगता है कि इस कलर बैंडिंग में कोई समस्या नहीं है. आखिर में, WebP इमेज का साइज़ काफ़ी छोटा होता है.
सीमाएं और फ़िन
स्क्रीन में काफ़ी अंतर होने की वजह से, इमेज से जुड़ी समस्याओं का आधा हिस्सा, ज़्यादा डेंसिटी वाले डिसप्ले पर इमेज को अच्छी तरह से दिखाने से जुड़ा है. कुछ मामलों में, हो सकता है कि आप व्यूपोर्ट के साइज़ के आधार पर पूरी तरह से अलग इमेज दिखाना चाहें. उदाहरण के लिए, ओबामा का हेडशॉट किसी फ़ोन के आकार की स्क्रीन के लिए सही हो सकता है, लेकिन उनके सामने रखा गया स्टैंड और उनके पीछे का झंडे का डिज़ाइन लैपटॉप डिसप्ले के लिए बेहतर हो सकता है.
मैंने जान-बूझकर इस "आर्ट डायरेक्शन" विषय से बचने की कोशिश की, ताकि सिर्फ़ हाई डीपीआई इमेज पर फ़ोकस किया जा सके. इस समस्या को कई तरीकों से हल किया जा सकता है: मीडिया क्वेरी और बैकग्राउंड की इमेज का इस्तेमाल, JavaScript के ज़रिए, image-set जैसी कुछ नई सुविधाओं के ज़रिए या फिर सर्वर पर. इस विषय की जानकारी वैरिएबल पिक्सल डेंसिटी के लिए हाई डीपीआई इमेज में दी गई है.
आखिर में, कुछ समस्याओं के बारे में बताना चाहूंगा:
- परफ़ॉर्मेंस पर ज़्यादा कंप्रेस करने के असर. ज़्यादा कंप्रेस की गई इमेज को डिकोड करने पर क्या दंड मिलता है?
- जब 1x डिसप्ले पर 2x इमेज लोड हो जाती है, तब इमेज का साइज़ नीचे रखने पर परफ़ॉर्मेंस पर क्या असर पड़ता है?
खास जानकारी देने के लिए, रास्टर इमेज का इस्तेमाल करने के बजाय सीएसएस और SVG को चुनें. अगर रास्टर इमेज बहुत ज़रूरी हैं, तो सीमित पैलेट और कई गहरे रंगों वाली इमेज के लिए PNG का इस्तेमाल करें. साथ ही, कई रंगों और ग्रेडिएंट वाली इमेज के लिए JPEG फ़ॉर्मैट का इस्तेमाल करें. इस तरीके की सबसे अच्छी बात यह है कि आपके मार्कअप में कोई बदलाव नहीं होता है. वेब डेवलपर के लिए सिर्फ़ दो गुना ऐसेट जनरेट करना और डीओएम में इमेज का साइज़ सही तरीके से तय करना है.
आगे पढ़ने के लिए, ऐसे ही विषय पर स्कॉट जेएल का लेख पढ़ें. आपकी इमेज बेहतरीन दिखें और आपका मोबाइल डेटा कम खर्च हो!