Comment empêcher Chrome de brouiller les petites images lors d'un zoom avant?

13

Lorsque j'essaie de voir le pixel art de près, le chrome commence à brouiller l'image. Je veux faire en sorte que même lorsque l'image est agrandie, je puisse toujours voir les pixels avec des détails nets, pas flous.

google-chrome images pixels Hélice
la source
1
Pour le moment, je ne pense pas que vous puissiez désactiver l'algorithme de lissage utilisé par Chrome qui adoucit les bords des images lorsque vous les zoomez. À moins qu'il y ait une extension qui le fasse ou que quelqu'un sache quelque chose que je ne connais pas encore.
DuckDuckGoose
Par zoom, voulez-vous dire ctrl / cmd et +?
booyaa
@booyas, oui, c'est ce que je veux dire.
Hélice
1
Les choses se sont améliorées, il s'agit maintenant d'un doublon possible de stackoverflow.com/questions/7615009/… . En particulier, voir la réponse de namuol et jsfiddle sur jsfiddle.net/namuol/VAXrL/1459 qui démontre ce que je pense que vous voulez. TL; DR pour chrome: "rendu d'image: pixellisé;" sur les éléments img et canvas.
Don Hatch du
Ce n'est pas votre question, mais est-il possible de stocker les images en meilleure qualité au moins, et le zoom utiliserait-il alors les détails supplémentaires?
Xonatron

Réponses:

16

Mise à jour

Selon les commentaires:

c'est désormais possible dans Firefox: rendu d'image: optimiseSpeed; - Arnaud

Original

Ce n'est pas possible directement depuis le navigateur.

Le lissage est appliqué via un algorithme et la plupart des navigateurs modernes font de même et dans IE, Firefox et Chrome, il n'y a aucun moyen de le désactiver.

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

Vous avez d'autres options, voici les 2 points principaux du lien ci-dessus, les deux sont des addons Chrome.

image-resizer
imagezoom

Vous pouvez appliquer le code CSS ci-dessous dans le navigateur , ce qui le désactivera!

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
la source
Malheureusement, cela ne fonctionne pas sur Chrome (sauf sur OSX).
lapo
Comment / où exactement devrais-je «appliquer» cela dans Chrome?
Nyerguds
4
Vous venez de dire que ce n'est pas possible, puis vous avez collé un code de travail pour le faire?
Petr Peller du
Non @petrpeller, j'ai clairement écrit que ce n'est pas possible directement avec le navigateur. Je continue ensuite en expliquant qu'un plugin est nécessaire ... Pourquoi posez-vous cette question quand vous pouvez lire le post?!?
Dave
2
image-rendering: -webkit-optimize-contrast;travailler dans le chrome
étudiant wp
2

J'ai remarqué des problèmes avec Chrome et Firefox lors de l'utilisation du rendu GPU avec des images. Par exemple:

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

Si vous avez des instructions CSS avec les éléments suivants, essayez de les supprimer et voyez si la qualité de votre image augmente.

bashaus
la source
2

J'ai créé ce bookmarklet pour désactiver le lissage. Je garde le lien dans ma barre de favoris et j'appuie dessus lorsque je souhaite désactiver l'anticrénelage sur une page, généralement pour le pixel art ou les jeux classiques :

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 raison pour laquelle un bookmarklet était attrayant est que je n'aime pas donner aux extensions l'autorisation "lire et modifier toutes vos données sur les sites Web que vous visitez".

Stephen Niedzielski
la source
1

Possible en 2019 avec le CSS suivant: image-rendering: pixelated;

Arnaud
la source