¿Cómo evitar que Chrome desenfoque imágenes pequeñas cuando se acerca?

13

Cuando intento ver de cerca el arte de píxeles, Chrome comienza a difuminar la imagen. Quiero hacerlo para que, incluso cuando la imagen esté ampliada, todavía pueda ver los píxeles con detalles nítidos, no borrosos.

google-chrome images pixels Hélice
fuente
1
Por el momento, no creo que pueda deshabilitar el algoritmo de suavizado que utiliza Chrome que suaviza los bordes de las imágenes cuando las acerca. A menos que haya una extensión que lo haga o alguien sepa algo que yo todavía no sé.
DuckDuckGoose
Al hacer zoom, ¿te refieres a ctrl / cmd y +?
booyaa
@booyas, sí, a eso me refiero.
Hélice
1
Las cosas han mejorado, ahora este es un posible duplicado de stackoverflow.com/questions/7615009/… . En particular, vea la respuesta de namuol y jsfiddle en jsfiddle.net/namuol/VAXrL/1459 que demuestra lo que creo que quiere. TL; DR para cromo: "representación de imagen: pixelada;" en img y lienzo elementos.
Don Hatch
No es su pregunta, pero ¿es posible almacenar las imágenes al menos con mayor calidad, y luego el zoom usaría los detalles adicionales?
Xonatron

Respuestas:

16

Actualizar

Según los comentarios:

ahora es posible en Firefox: renderizado de imágenes: OptimizeSpeed; - Arnaud

Original

Esto no es posible directamente desde el navegador.

El suavizado se aplica a través de un algoritmo y la mayoría de los navegadores modernos son similares 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.

Image -
Resizer Imagezoom

¡Puede aplicar el código CSS a continuación en el navegador , que lo desactivará!

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+                */
    }
Dave
fuente
Lamentablemente, esto no funciona en Chrome (excepto en OSX).
lapo
¿Cómo / dónde exactamente necesitaría 'aplicar' esto en Chrome?
Nyerguds
44
¿Acabas de decir que no es posible y luego pegaste un código de trabajo para hacerlo realmente?
Petr Peller
No @petrpeller, claramente escribí que no es posible directamente con el navegador. Luego explico que se requiere un complemento ... ¿Por qué haces esta pregunta cuando puedes leer la publicación?
Dave
2
image-rendering: -webkit-optimize-contrast;trabajando en Chrome
estudiante de wp
2

Noté algunos problemas con Chrome y Firefox cuando utilizo el procesamiento de GPU con imágenes. P.ej:

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

Si tiene alguna declaración CSS con lo siguiente, intente eliminarla y vea si aumenta la calidad de su imagen.

bashaus
fuente
2

Hice este bookmarklet para deshabilitar el suavizado. Mantengo el enlace en mi barra de marcadores y lo toco cuando quiero deshabilitar el antialiasing en una página, generalmente para pixel art o juegos clásicos :

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 dar a las extensiones el permiso "leer y cambiar todos sus datos en los sitios web que visita".

Stephen Niedzielski
fuente
1

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

Arnaud
fuente