¿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

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