☰

¿Cómo evitar que Chrome borre las imágenes pequeñas al hacer zoom?

tag-icon • tag-icon google-chrome images pixels
¿Cómo evitar que Chrome borre las imágenes pequeñas al hacer zoom?

Cuando intento ver el pixel art de cerca, Chrome comienza a desenfocar la imagen. Quiero hacerlo de modo que incluso cuando la imagen esté ampliada, pueda seguir viendo los píxeles con detalles nítidos, no borrosos.

Respuesta1

Actualizar

Según los comentarios:

ahora es posible en Firefox: renderizado de imágenes: optimizarVelocidad; – Arnaud

Original

Esto no es posible directamente desde el navegador.

El suavizado se aplica mediante un algoritmo y la mayoría de los navegadores modernos hacen lo mismo y en IE, Firefox y Chrome no hay forma de desactivarlo.

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

Tienes otras opciones, aquí están los 2 puntos principales del enlace de arriba, ambos son complementos de Chrome.

cambiar el tamaño de la imagen
zoom de imagen

Podrías aplicar elCódigo CSS a continuación en el navegador., ¡lo que lo apagará!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

Respuesta2

Posible en 2019 con el siguiente CSS:image-rendering: pixelated;

Respuesta3

Hice este bookmarklet para desactivar el suavizado. Mantengo el enlace en mi barra de favoritos y lo toco cuando quiero desactivar el antialiasing en una página, generalmente para pixel art ojuegos clasicos:

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

La razón por la que un bookmarklet era atractivo es que no me gusta darle a las extensiones el permiso de "leer y cambiar todos tus datos en los sitios web que visitas".

Respuesta4

He notado algunos problemas con Chrome y Firefox al usar la renderización GPU con imágenes. P.ej:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Si tiene declaraciones CSS con lo siguiente, intente eliminarlas y vea si la calidad de su imagen aumenta.

información relacionada