Como impedir o Chrome de desfocar pequenas imagens quando ampliado?

13

Quando estou tentando visualizar pixel art de perto, o chrome começa a desfocar a imagem. Quero fazê-lo de forma que, mesmo quando a imagem é ampliada, ainda consigo ver os pixels com detalhes nítidos, não desfocados.

google-chrome images pixels Hélice
fonte
1
No momento, acho que não é possível desativar o algoritmo de suavização usado pelo chrome, que suaviza as bordas das imagens quando você as amplia. A menos que haja uma extensão que faça isso ou alguém saiba algo que eu ainda não sei.
DuckDuckGoose
Ao aumentar o zoom, você quer dizer ctrl / cmd e +?
Booyaa
@ Booyas, sim, é isso que eu quero dizer.
Propeller
1
As coisas melhoraram, agora essa é uma possível duplicata de stackoverflow.com/questions/7615009/… . Em particular, veja a resposta do namuol e o jsfiddle em jsfiddle.net/namuol/VAXrL/1459, que demonstra o que eu acho que você está querendo. TL; DR para chrome: "renderização de imagem: pixelizada;" em elementos img e canvas.
Don escotilha
Não é sua pergunta, mas é possível armazenar as imagens com qualidade mais alta, pelo menos, e o zoom usaria os detalhes extras?
Xonatron 30/05/19

Respostas:

16

Atualizar

Conforme os comentários:

agora é possível no Firefox: renderização de imagem: optimizeSpeed; - Arnaud

Original

Isso não é possível diretamente no navegador.

A suavização é aplicada por meio de um algoritmo e os navegadores mais modernos fazem o mesmo; no IE, Firefox e Chrome, não há como desativar isso.

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

Você tem outras opções. Aqui estão os 2 pontos principais do link acima, ambos são complementos do Chrome.

image-resizer
imagezoom

Você pode aplicar o código CSS abaixo no navegador , que será desativado!

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
fonte
Infelizmente, isso não funciona no Chrome (exceto no OSX).
Lapo
Como / onde exatamente eu precisaria 'aplicar' isso no Chrome?
Nyerguds
4
Você acabou de dizer que não é possível e colou um código de trabalho para realmente fazer isso?
precisa
No @petrpeller, escrevi claramente que não é possível diretamente com o navegador. Em seguida, explico que é necessário um plug-in ... Por que você está fazendo esta pergunta quando pode ler o post?!?
24416 Dave Dave
2
image-rendering: -webkit-optimize-contrast;trabalhando no chrome
wp student
2

Percebi alguns problemas com o Chrome e o Firefox ao usar a renderização GPU com imagens. Por exemplo:

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

Se você tiver alguma instrução CSS com o seguinte, tente removê-la e verifique se a qualidade da sua imagem aumenta.

bashaus
fonte
2

Eu criei este bookmarklet para desativar a suavização. Eu mantenho o link na minha barra de favoritos e toco nele quando quero desativar o antialiasing em uma página, geralmente para pixel art ou jogos clássicos :

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);
  }
})()

O motivo pelo qual um bookmarklet foi atraente é que eu não gosto de dar às extensões a permissão "ler e alterar todos os seus dados nos sites visitados".

Stephen Niedzielski
fonte
1

Possível em 2019 com o seguinte CSS: image-rendering: pixelated;

Arnaud
fonte