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