वेब डेवलपर के तौर पर, हम हमेशा इमेज के साथ काम करते हैं. ज़्यादातर मामलों में, ब्राउज़र इमेज को स्केल करने में बहुत अच्छे होते हैं, ताकि वे हमारी साइट के डिज़ाइन में फ़िट हो सकें. साथ ही, इमेज की क्वालिटी भी अच्छी बनी रहे. हालांकि, अगर आपको यह कंट्रोल करना है कि ब्राउज़र आपके पेज पर मौजूद इमेज को कैसे स्केल करे, तो क्या होगा?
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 देखें. यह समस्या, क्रिस्प-एज वैल्यू को लागू करने के लिए खुली है. लागू करने की प्रोसेस को ट्रैक करने के लिए, समस्या पर स्टार लगाएं).