आसान हाई डीपीआई इमेज

बोरिस स्मस

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

आज-कल ऐसे कई रिस्पॉन्सिव इमेज प्रपोज़ल मौजूद हैं. इनमें से कई प्रपोज़ल में वेब डेवलपर के लिए अहम बदलाव करने की ज़रूरत है. स्टैंडर्ड-ट्रैक srcset <img> एट्रिब्यूट को लागू करना मुश्किल है. ऐसा खास तौर पर तब होता है, जब srcset का व्यूपोर्ट आधारित होता है और इसे चुनना मुश्किल होता है:

banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x

image-set सीएसएस प्रॉपर्टी सिर्फ़ devicePixelRatio का इस्तेमाल करके, यह तय करती है कि कौनसी इमेज लोड करनी है. इसके बावजूद, डेवलपर को हर इमेज के लिए बहुत ज़्यादा मार्कअप लिखना पड़ता है.

<picture> जैसे अन्य प्रस्तावों में, ज़्यादा शब्दों में जानकारी दी जाती है. इसके अलावा, वे स्टैंडर्ड ट्रैक नहीं हैं, इसलिए उन्हें सभी के लिए उपलब्ध कराना, srcset एट्रिब्यूट से कहीं ज़्यादा है. इसके अलावा, JavaScript और सर्वर साइड समाधान ही इसका दूसरा विकल्प है. हालांकि, इन तरीकों के अपने कुछ नुकसान भी हैं, जिनके बारे में अन्य लेखों में बताया गया है.

इस लेख में वेब पर आम तौर पर पाई जाने वाली इमेज के अलग-अलग इस्तेमाल के बारे में बताया गया है. साथ ही, ऐसे आसान समाधान सुझाए गए हैं जो ज़्यादा पिक्सल डेंसिटी वाली स्क्रीन के साथ-साथ सामान्य स्क्रीन पर भी काम करते हैं. इस चर्चा के लिए, 1 से ज़्यादा window.devicePixelRatio रिपोर्ट करने वाले डिवाइस को हाई डीपीआई माना जा सकता है. इसका मतलब है कि सीएसएस पिक्सल और डिवाइस पिक्सल अलग-अलग होते हैं और इमेज का साइज़ बढ़ाया जाता है.

यहां इन अपडेट की खास जानकारी दी गई है:

• अगर हो सके, तो रास्टर इमेज के बजाय सीएसएस/SVG का इस्तेमाल करें.
• ज़्यादा सघनता वाले डिसप्ले के लिए ऑप्टिमाइज़ की गई इमेज का इस्तेमाल डिफ़ॉल्ट रूप से करें.
• आसान ड्रॉइंग और पिक्सल आर्ट (जैसे, लोगो) के लिए PNG का इस्तेमाल करें.
• अलग-अलग रंगों (जैसे, फ़ोटो) वाली इमेज के लिए, कंप्रेस किए गए JPEG फ़ॉर्मैट का इस्तेमाल करें.
• सभी इमेज एलिमेंट पर हमेशा अश्लील साइज़ (सीएसएस या एचटीएमएल का इस्तेमाल करके) सेट करें.

सामान्य ड्रॉइंग और पिक्सल आर्ट

सीएसएस सुविधाओं या SVG का इस्तेमाल करके, छोटी इमेज से अक्सर बचा जा सकता है. गोल कोनों के लिए किसी इमेज का इस्तेमाल करने की ज़रूरत नहीं है, क्योंकि border-radius सीएसएस प्रॉपर्टी बड़े पैमाने पर काम करती है. इसी तरह, कस्टम फ़ॉन्ट भी ज़्यादा संख्या में काम करते हैं. इसलिए, "इमेज वाले" टेक्स्ट का इस्तेमाल करने की सलाह नहीं दी जाती है.

हालांकि, कुछ मामलों में, जैसे लोगो में सिर्फ़ इमेज का इस्तेमाल किया जा सकता है. उदाहरण के लिए, Chrome के इस लोगो का साइज़ 256x256 है. रेटिना डिसप्ले पर, आपको तिरछों और वक्रों पर लाइन एलियास दिख सकती है, जो भारी और खराब दिखती है. खास तौर पर साफ़ तौर पर रेंडर किए गए टेक्स्ट की तुलना में:

प्राकृतिक डाइमेंशन: 256x256px, एसेट का साइज़: 31 kB, फ़ॉर्मैट: PNG

क्या आप सहमत हैं? बढ़िया. चलिए, अब हाई डेंसिटी वाली इमेज का इस्तेमाल करते हैं. अपने लोगो को JPEG के तौर पर सेव करके, आप जगह बचाने के लिए प्रेरित हो सकते हैं. लेकिन यह अच्छा आइडिया नहीं हो सकता, क्योंकि लोगो और दूसरे ग्राफ़िक्स को नुकसान पहुंचाने वाले फ़ॉर्मैट में सेव करने से आर्टफ़ैक्ट दिखने शुरू हो जाते हैं. इस मामले में, मैंने एक बहुत ज़्यादा कंप्रेशन का इस्तेमाल करके इस समस्या को बढ़ा दिया है, लेकिन मुझे ग्रेडिएंट पर बैंडिंग, सफ़ेद बैकग्राउंड पर मौजूद धब्बों, और खराब लाइनों पर ध्यान दिया है:

प्राकृतिक डाइमेंशन: 512x512px, एसेट का साइज़: 13 kB, फ़ॉर्मैट: JPEG

छोटी इमेज के लिए, 2x PNG फ़ॉर्मैट का इस्तेमाल करना होता है. ध्यान रखें कि 1x और 2x PNG के बीच साइज़ का अंतर आम तौर पर काफ़ी ज़्यादा होता है (इस मामले में 52 kB). हालांकि, लोगो के मामले में यह आपकी वेबसाइट का चेहरा होता है और यह आपकी वेबसाइट पर आने वाले लोगों को सबसे पहले दिखेगा. साइज़ के बदले क्वालिटी की तुलना में बहुत ही ज़्यादा बचत करने पर भी, आपकी साइट पर आने वाले लोगों को यही आखिरी चीज़ दिखेगी!

यहां Chrome लोगो की पूरी भव्यता के बारे में बताया गया है, जिसका साइज़ 2x डिसप्ले के लिए अपने प्राकृतिक डाइमेंशन से आधा है:

प्राकृतिक डाइमेंशन: 512x512px, एसेट का साइज़: 83 kB, फ़ॉर्मैट: PNG

ऊपर दी गई इमेज को रेंडर करने के लिए मार्कअप इस तरह का होगा:

<img src="chrome2x.png" style="width: 256px; height: 256px;"/>

ध्यान दें कि मैंने इमेज पर चौड़ाई और ऊंचाई तय की है. ऐसा इसलिए ज़रूरी है, क्योंकि इमेज का साइज़ 512 पिक्सल है. परफ़ॉर्मेंस के लिए भी यह अच्छा होता है, क्योंकि रेंडरिंग इंजन की अच्छी समझ होती है कि एलिमेंट के साइज़ क्या होंगे. इसे कैलकुलेट करने में ज़्यादा मेहनत नहीं करनी पड़ेगी.

एक संभावित ऑप्टिमाइज़ेशन जो काम कर सकता है, वह है 24-बिट PNG को कम करके 8-बिट वाले पैलेट करना. यह कुछ कम रंगों वाली इमेज के लिए काम करता है, जिनमें Chrome का लोगो शामिल है. यह ऑप्टिमाइज़ेशन करने के लिए, http://pngquant.org/ जैसे टूल का इस्तेमाल किया जा सकता है. यहां आपको थोड़ी-बहुत बैंडिंग दिखेगी, लेकिन यह फ़ाइल सिर्फ़ 13 kB की है, जिसका साइज़ 512x512 PNG के मुकाबले 6x साइज़ का है.

प्राकृतिक डाइमेंशन: 512x512px, एसेट का साइज़: 13 kB, फ़ॉर्मैट: PNG, 8-bit palette

अलग-अलग रंगों वाली इमेज

मैंने HTML5Rocks का एक लेख लिखा. इसमें कई रिस्पॉन्सिव इमेज की तकनीकों का सर्वे किया गया. साथ ही, 1x और 2x JPEG इमेज के कंप्रेस किए जाने और उनसे मिलने वाले साइज़ और विज़ुअल क्वालिटी की तुलना करने के बारे में कुछ रिसर्च की गई. ऊपर दिए गए लेख में से एक ऐसी टाइल यहां दी गई है:

मैंने इमेज को कंप्रेशन लेवल (जिसे JPEG क्वालिटी से दिखाया गया है), उनका साइज़ (बाइट में), और उनकी तुलना करने वाली विज़ुअल फ़िडेलिटी (संख्या के हिसाब से रैंक) पर अपनी राय दी है. दिलचस्प बात यह है कि ज़्यादा कंप्रेस की गई 2x इमेज (जिसका लेबल 3 है) साइज़ में छोटी होती है और बिना कंप्रेस की गई 1x इमेज (जिसे 4 लेबल किया गया है) से बेहतर दिखती है. दूसरे शब्दों में, इमेज 4 और 3 के बीच, हमने हर डाइमेंशन को दोगुना करके इमेज का कम्प्रेशन बढ़ाया है. साथ ही, इमेज का साइज़ 2 केबी कम किया है.

कंप्रेशन, डाइमेंशन, और विज़ुअल क्वालिटी

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

हाइपोथीसिस

ज़रूरत के मुताबिक कंप्रेस करने पर, 2x इमेज, कुछ दूसरे (लोअर) कंप्रेस करने पर उसी इमेज की तरह, 1x साइज़ में दिखेगी. हालांकि, इस मामले में बहुत ज़्यादा कंप्रेस की गई 2x इमेज का साइज़, 1x इमेज से छोटा होगा.

प्रोसेस

• अगर 2x इमेज दी गई है, तो 1x वाली इमेज जनरेट करें.
• दोनों इमेज को अलग-अलग लेवल पर कंप्रेस करें.
• ऐसा टेस्ट पेज बनाएं जो दोनों इमेज सेट को एक साथ दिखाता हो.
• दो सेट में वह जगह ढूंढें जहां इमेज एक जैसी हैं.
• इमेज के मिलते-जुलते साइज़ और कंप्रेस करने के लेवल का ध्यान रखें.
• इसे 1x और 2x डिसप्ले, दोनों पर आज़माएं.

मैंने Lightroom के तुलना करने वाले व्यू से मिलता-जुलता इमेज तुलना ऐप्लिकेशन बनाया है. इसका मकसद 1x और 2x इमेज को एक साथ दिखाना है. साथ ही, आपको ज़्यादा जानकारी के लिए इमेज के किसी भी सेक्शन को ज़ूम करने की सुविधा भी देनी है. फ़ाइल के साइज़ और इमेज की क्वालिटी की तुलना देखने के लिए, JPEG और WebP फ़ॉर्मैट में से किसी एक को भी चुना जा सकता है. साथ ही, कंप्रेस की गई क्वालिटी भी बदली जा सकती है. इसके लिए, कई इमेज में सेटिंग में बदलाव करना है. यह पता करना है कि आपको किस तरह की कंप्रेशन क्वालिटी, स्केलिंग, और फ़ॉर्मैट की तुलना करनी है. इसके बाद, अपनी सभी इमेज के लिए इस सेटिंग का इस्तेमाल करें.

यह टूल आपके साथ खेलने के लिए उपलब्ध है. ज़ूम करने के लिए कोई सब-एरिया चुनकर, इमेज में ज़ूम इन किया जा सकता है.

विश्लेषण

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

इमेज ज़ूमर के साथ चलाने से, मुझे कुछ चीज़ें जल्दी ही साफ़ तौर पर दिखने लगीं. सबसे पहले, ज़्यादा जानकारी देने के लिए मैंने quality=90 dpr=1x इमेज के बजाय, quality=30 dpr=2x इमेज को चुना. इन इमेज की तुलना, फ़ाइल के साइज़ में भी की जा सकती है. प्लेन के केस में, कंप्रेस की गई 2x इमेज 76 केबी की होती है, जबकि बिना कंप्रेस की गई 1x इमेज 80 केबी की होती है.

इस नियम के अपवाद, ग्रेडिएंट वाली ज़्यादा कंप्रेस की गई (quality<30) इमेज हैं. इन पर कलर बैंडिंग की समस्या ज़्यादा होती है, जो इमेज स्केल पर ध्यान दिए बिना भी उतनी ही खराब होती है. टूल में मिले पक्षी और कार के नमूने इसके उदाहरण हैं.

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

सावधानियां और फ़िन

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

मैंने जान-बूझकर इस "कला दिशानिर्देश" विषय से बचता है, ताकि ज़्यादा डीपीआई इमेज पर फ़ोकस न किया जा सके. इस समस्या को कई तरीकों से हल किया जा सकता है: मीडिया क्वेरी और बैकग्राउंड इमेज का इस्तेमाल करके, JavaScript, और image-set जैसी कुछ नई सुविधाओं या सर्वर का इस्तेमाल करके. इस विषय के बारे में Pixel डेंसिटी के लिए हाई डीपीआई इमेज में बताया गया है.

मैं कुछ समस्याओं के साथ साइन ऑफ़ करूंगा/करूंगी:

• परफ़ॉर्मेंस पर ज़्यादा कंप्रेशन का असर. बहुत ज़्यादा कंप्रेस की गई इमेज को डिकोड करने पर क्या लगता है?
• अगर 1x डिसप्ले पर 2x इमेज को लोड किया जाता है, तो इमेज का साइज़ कम करने पर परफ़ॉर्मेंस की कितनी पाबंदियां लगती हैं?

खास जानकारी देने के लिए, रास्टर इमेज के बजाय सीएसएस और SVG का इस्तेमाल करें. अगर रास्टर इमेज का इस्तेमाल करना ज़रूरी है, तो सीमित पैलेट और कई गहरे रंगों वाली इमेज के लिए PNG का इस्तेमाल करें. साथ ही, कई रंगों और ग्रेडिएंट वाली इमेज के लिए JPEG का इस्तेमाल करें. इस तरीके की सबसे अच्छी बात यह है कि आपके मार्कअप में करीब-करीब कोई बदलाव नहीं हुआ है. वेब डेवलपर के लिए ज़रूरी है कि आप दो गुना एसेट जनरेट करें और डीओएम में अपनी इमेज का साइज़ सही तरीके से सेट करें.

आगे पढ़ने के लिए, इसी तरह के विषय पर स्कॉट जेल का लेख देखें. इससे आपकी इमेज साफ़ नज़र आएंगी और मोबाइल डेटा का इस्तेमाल कम होगा!