Deshabilitar el suavizado durante el escalado de imágenes

El desafío de deshabilitar el suavizado durante el escalado de imágenes surge cuando las imágenes aparecen borrosas o interpoladas al escalar . Esto ocurre debido a que los navegadores aplican técnicas de suavizado para suavizar los bordes de las imágenes, lo que da como resultado una apariencia suavizada.

Afortunadamente, CSS proporciona una variedad de indicadores que pueden desactivar eficazmente el suavizado. Sin embargo, a pesar de las marcas sugeridas, como image-rendering: -moz-crisp-edges, tienden a ser ineficaces para las imágenes de fondo.

Para superar esta limitación, el siguiente fragmento de código ofrece una solución integral que funciona en todos los principales navegadores:

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

}

Este fragmento de código utiliza múltiples indicadores específicos del navegador, incluidos -moz-crisp-edges para Firefox, -o-crisp-edges para Opera y -webkit-optimize-contrast para Chrome y Safari. Además, emplea el valor pixelado para soporte universal desde 2021 y optimiza el contraste para compatibilidad con CSS3. Por último, incluye -ms-interpolation-mode: vecino-más cercano para Internet Explorer 8 y superior.

Al incorporar este código, puede preservar eficazmente los bordes nítidos y evitar la interpolación de la imagen durante el escalado, lo que da como resultado una imagen nítida y apariencia pixelada como se desee.