ズームインしたときにChromeが小さな画像をぼかすのを防ぐ方法は？

ピクセルアートを間近で見ようとすると、クロムが画像をぼかすようになります。画像を拡大しても、ぼやけたピクセルではなく、鮮明なピクセルを見ることができるようにします。

更新

コメントによると：

Firefoxで可能になりました：image-rendering：optimizeSpeed; –アルノー

元の

これは、ブラウザーから直接実行することはできません。

スムージングは​​アルゴリズムを介して適用され、最新のブラウザのほとんどは同様に動作し、IE、Firefox、Chromeではこれをオフにする方法はありません。

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

他のオプションもあります。上記のリンクからの2つの主なポイントは次のとおりです。どちらもChromeアドオンです。

画像リサイズ
imagezoom

ブラウザで以下のCSSコードを適用すると、それがオフになります！

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+                */
    }

画像でGPUレンダリングを使用すると、ChromeとFirefoxでいくつかの問題に気づきました。例えば：

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

次のCSSステートメントがある場合は、それらを削除して、画質が向上するかどうかを確認してください。

このブックマークレットを作成して、スムージングを無効にしました。ブックマークバーにリンクを保持し、ページでアンチエイリアスを無効にする場合は、通常ピクセルアートまたはクラシックゲームでリンクをタップします。

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

ブックマークレットが魅力的だったのは、拡張機能に「訪問するWebサイト上のすべてのデータを読み取り、変更する」許可を与えるのが好きではないからです。

2019年に次のCSSで可能： image-rendering: pixelated;