वेब डेवलपर के तौर पर, हम हमेशा इमेज का इस्तेमाल करते रहते हैं. ज़्यादातर मामलों में, ब्राउज़र इमेज को सुंदर बनाए रखने के साथ-साथ हमारी साइट के डिज़ाइन की सीमाओं में फ़िट होने के लिए, इमेज को स्केल करने में भी माहिर होते हैं. हालांकि, अगर आपको यह कंट्रोल करना है कि ब्राउज़र आपके पेज पर मौजूद इमेज को कैसे स्केल करे, तो क्या होगा?
Chrome 41 (जनवरी 2015 में बीटा वर्शन) में एक नई सीएसएस प्रॉपर्टी image-rendering: pixelated (स्पेसिफ़िकेशन) जोड़ी गई है. इससे आपको ब्राउज़र में स्केल की गई इमेज को रेंडर करने के तरीके पर थोड़ा ज़्यादा कंट्रोल मिलता है.
सीएसएस प्रॉपर्टी image-rendering और वैल्यू pixelated दिलचस्प हैं, क्योंकि वे ब्राउज़र की स्टैंडर्ड स्मूद स्केलिंग (आम तौर पर बाय-लीनियर इंटरपोलेशन) बंद कर देते हैं. इमेज का साइज़ बदलते समय, इसे किसी दूसरे स्केलिंग एल्गोरिदम (ज़्यादातर मामलों में सबसे नज़दीकी पड़ोसी) से बदल दिया जाता है.
मान लें कि आपके पास 2×2 पिक्सल की इमेज है और आपने उसे 100×100 पिक्सल तक बढ़ा दिया है. ऐसे में, ब्राउज़र उसे इस तरह रेंडर करेगा कि वह ब्लॉकी न दिखे. कुछ इस तरह:
ऐसे कई मामले हैं जहां आप इमेज को बेहतर बनाना नहीं चाहेंगे. इसके बजाय, कोई ऐसा तरीका अपनाएं जिससे इमेज को ज़्यादा सटीक तरीके से दिखाया जा सके.
यह इफ़ेक्ट पाने के लिए, अपनी इमेज पर image-rendering: pixelated; को इस तरह लागू करें.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
डेमो आज़माएं. जैसा कि आप देख सकते हैं कि प्रॉपर्टी के इस्तेमाल से, इमेज को रेंडर करने के तरीके पर काफ़ी असर पड़ता है.
इस प्रॉपर्टी को कई जगहों पर लागू किया जा सकता है:
<img>तत्व<canvas style="image-rendering: pixelated">तत्वbackground-imageप्रॉपर्टी वाला कोई भी एलिमेंट
मुझे अब भी समझ नहीं आया. इसका इस्तेमाल कहां करना चाहिए?
अगर आपकी साइट पर सिर्फ़ फ़ोटो दिखाई जा रही हैं, तो शायद आपको यह सुविधा न चाहिए.
गेम के लिए, कैनवस को अक्सर स्क्रीन के साइज़ के हिसाब से स्केल करना पड़ता है. इस सीएसएस प्रॉपर्टी से पहले, ब्राउज़र कैनवस को इस तरह इंटरपोल करता था कि वह धुंधला दिखता था (नीचे देखें [sic]).
अगर आपको एयरलाइन टिकट बुक करने वाला टूल या क्यूआर कोड दिखाने वाला ऐप्लिकेशन बनाना है, तो अक्सर उपयोगकर्ता चाहेगा कि वह फ़ुल स्क्रीन पर दिखे, ताकि उसे आसानी से स्कैन किया जा सके. इसलिए, इमेज रेंडरिंग को कंट्रोल करना ज़रूरी है.
अगर आपको यह सुविधा लागू होने के बारे में जानना है, तो समस्या 317991 देखें. यह समस्या, क्रिस्प-एज वैल्यू को लागू करने के लिए खुली है. लागू करने की प्रोसेस को ट्रैक करने के लिए, समस्या पर स्टार लगाएं).