Désactivation de l'anti-crénelage dans la mise à l'échelle de l'image

Le défi de la désactivation de l'anti-crénelage pendant la mise à l'échelle de l'image se pose lorsque les images apparaissent floues ou interpolées lors de la mise à l'échelle . Cela est dû au fait que les navigateurs appliquent des techniques d'anti-aliasing pour lisser les bords des images, ce qui donne une apparence adoucie.

Heureusement, CSS fournit une gamme d'indicateurs qui peuvent désactiver efficacement l'anti-aliasing. Cependant, malgré les options suggérées, telles que le rendu d'image : -moz-crisp-edges, elles ont tendance à être inefficaces pour les images d'arrière-plan.

Pour surmonter cette limitation, l'extrait de code suivant propose une solution complète qui fonctionne sur tous les principaux navigateurs :

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                            */

}

Cet extrait de code utilise plusieurs indicateurs spécifiques au navigateur, notamment -moz-crisp-edges pour Firefox, -o-crisp-edges pour Opera et -webkit-optimize-contrast pour Chrome et Safari. De plus, il utilise la valeur pixellisée pour une prise en charge universelle depuis 2021 et optimise le contraste pour la compatibilité CSS3. Enfin, il inclut -ms-interpolation-mode : plus proche voisin pour Internet Explorer 8 et supérieur.

En incorporant ce code, vous pouvez efficacement préserver les bords nets et empêcher l'interpolation de l'image pendant la mise à l'échelle, ce qui donne un résultat net et net. aspect pixélisé selon vos souhaits.