छवि स्केलिंग में एंटी-अलियासिंग को अक्षम करना

छवि स्केलिंग के दौरान एंटी-अलियासिंग को अक्षम करने की चुनौती तब उत्पन्न होती है जब छवियां धुंधली दिखाई देती हैं या स्केलिंग पर प्रक्षेपित होती हैं . ऐसा ब्राउज़र द्वारा छवियों के किनारों को चिकना करने के लिए एंटी-अलियासिंग तकनीकों को लागू करने के कारण होता है, जिसके परिणामस्वरूप नरम उपस्थिति होती है।

शुक्र है, सीएसएस झंडे की एक श्रृंखला प्रदान करता है जो एंटी-अलियासिंग को प्रभावी ढंग से अक्षम कर सकता है। हालाँकि, इमेज-रेंडरिंग: -मोज़-क्रिस्प-एज जैसे सुझाए गए झंडों के बावजूद, वे पृष्ठभूमि छवियों के लिए अप्रभावी होते हैं।

इस सीमा को पार करने के लिए, निम्नलिखित कोड स्निपेट एक व्यापक समाधान प्रदान करता है जो काम करता है सभी प्रमुख ब्राउज़रों में:

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8                            */

}

यह कोड स्निपेट कई ब्राउज़र-विशिष्ट फ़्लैग का उपयोग करता है, जिसमें फ़ायरफ़ॉक्स के लिए -moz-crisp-edges, ओपेरा के लिए -o-crisp-edges, और Chrome और Safari के लिए -webkit-optimize-contrast शामिल हैं। इसके अतिरिक्त, यह 2021 से सार्वभौमिक समर्थन के लिए पिक्सेलेटेड मान और CSS3 संगतता के लिए ऑप्टिमाइज़-कंट्रास्ट को नियोजित करता है। अंत में, इसमें इंटरनेट एक्सप्लोरर 8 और उससे ऊपर के लिए -ms-इंटरपोलेशन-मोड: निकटतम-पड़ोसी शामिल है।

इस कोड को शामिल करके, आप प्रभावी ढंग से तेज किनारों को संरक्षित कर सकते हैं और स्केलिंग के दौरान छवि इंटरपोलेशन को रोक सकते हैं, जिसके परिणामस्वरूप एक कुरकुरा और इच्छानुसार पिक्सेलयुक्त स्वरूप।