Come impedire a Chrome di sfocare le immagini di piccole dimensioni quando vengono ingrandite?

13

Quando provo a vedere da vicino la pixel art, Chrome inizia a sfocare l'immagine. Voglio farlo in modo che anche quando si ingrandisce l'immagine, riesco ancora a vedere i pixel con dettagli nitidi, non sfocati.

google-chrome images pixels

— Elica
fonte

1

Al momento non penso che tu possa disabilitare l'algoritmo di smoothing utilizzato da Chrome che uniforma i bordi delle immagini quando ingrandisci. A meno che non ci sia un'estensione che lo faccia o che qualcuno sappia qualcosa che non conosco ancora.

— DuckDuck:

Con lo zoom vuoi dire ctrl / cmd e +?

— Booyaa,

@booyas, sì, questo è ciò che intendo.

— Elica

1

Le cose sono migliorate, ora questo è un possibile duplicato di stackoverflow.com/questions/7615009/… . In particolare, vedi la risposta di namuol e jsfiddle su jsfiddle.net/namuol/VAXrL/1459 che dimostra ciò che penso tu voglia. TL; DR per chrome: "rendering delle immagini: pixelated;" su elementi img e canvas.

— Don Hatch,

Non è una tua domanda, ma è possibile memorizzare le immagini almeno in una qualità superiore, e quindi lo zoom utilizzerà i dettagli extra?

— Xonatron,

16

Aggiornare

Secondo i commenti:

ora è possibile in Firefox: rendering delle immagini: optimisepeed; - Arnaud

Originale

Questo non è possibile direttamente dal browser.

Il livellamento viene applicato tramite un algoritmo e la maggior parte dei browser moderni fa simili e in IE, Firefox e Chrome non c'è modo di disattivarlo.

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

Hai altre opzioni, qui ci sono i 2 punti principali del link sopra, entrambi sono componenti aggiuntivi di Chrome.

imagezoom resizer
immagine

È possibile applicare il codice CSS di seguito nel browser , che lo disattiverà!

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

Purtroppo questo non funziona su Chrome (tranne su OSX).

— lapo,

Come / dove dovrei esattamente "applicare" questo in Chrome?

— Nyerguds,

4

Hai appena detto che non è possibile e poi hai incollato un codice funzionante per farlo davvero?

— Petr Peller,

No @petrpeller, ho chiaramente scritto che non è possibile direttamente con il browser. Poi proseguo spiegando che è richiesto un plug-in ... Perché stai ponendo questa domanda quando puoi leggere il post?!?

— Dave,

2

image-rendering: -webkit-optimize-contrast;lavorando in Chrome

— studente wp

2

Ho notato alcuni problemi con Chrome e Firefox quando si utilizza il rendering GPU con immagini. Per esempio:

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

Se hai dichiarazioni CSS con quanto segue, prova a rimuoverle e vedi se la qualità dell'immagine aumenta.

— bashaus
fonte

2

Ho creato questo bookmarklet per disabilitare il livellamento. Tengo il collegamento nella barra dei segnalibri e lo tocco quando desidero disabilitare l'antialiasing su una pagina, di solito per pixel art o giochi classici :

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

Il motivo per cui un bookmarklet è stato interessante è che non mi piace concedere alle estensioni l'autorizzazione "leggi e modifica tutti i tuoi dati sui siti Web visitati".

— Stephen Niedzielski
fonte

1

Possibile nel 2019 con il seguente CSS: image-rendering: pixelated;

— Arnaud
fonte