web-dev-qa-db-ja.com

Chrome拡大したときに小さな画像がぼやけるのを防ぐ方法は？

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

google-chromeimagespixels
14
Propeller

更新

コメントの通り：

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

オリジナル

これはブラウザから直接行うことはできません。

平滑化はアルゴリズムを介して適用され、最新のブラウザのほとんどは同様であり、IE、Firefox、およびChrome=これをオフにする方法はありません。

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

他のオプションがあります。ここに上記のリンクの2つの主なポイントがあります。どちらもChromeアドオンです。

image-resizer
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+                */
    }
17
Dave

画像でGPUレンダリングを使用すると、ChromeおよびFirefoxでいくつかの問題が発生します。例：

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

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

2
bashaus

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

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サイト上のすべてのデータの読み取りと変更」権限を付与したくないためです。

2
Stephen Niedzielski

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

1
Arnaud