Chrome で拡大したときに小さな画像がぼやけないようにするにはどうすればよいですか?

Question

ピクセル アートを間近で見ようとすると、Chrome によって画像がぼやけ始めます。画像を拡大しても、ぼやけた画像ではなく、ピクセルの詳細が鮮明に見えるようにしたいです。

Answer 1

アップデート

コメントによると:

Firefox では image-rendering: optimizeSpeed; が可能になりました – Arnaud

オリジナル

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

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

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

他にも選択肢はありますが、上のリンクから 2 つの主なポイントを紹介します。どちらも Chrome アドオンです。

画像リサイズ
画像拡大

あなたは、ブラウザで以下の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+                */
    }

Answer 2

2019 年には、次の CSS で可能になります。image-rendering: pixelated;

Answer 3

スムージングを無効にするためにこのブックマークレットを作成しました。リンクをブックマークバーに保存しておき、ピクセルアートやクラシックゲーム:

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 サイトのすべてのデータを読み取って変更する」権限を与えるのが好きではないからです。

Answer 4

Chrome と Firefox で GPU レンダリングを使用して画像を表示すると、いくつかの問題が発生することに気付きました。例:

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

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