参考:ドット絵やQRコードをボケさせたくないときに使えるCSS – Qiitaブラウザ依存が強く、2021年現在ではベンダープレフィックスで対応する必要があります。 今回使用した「image-rendering: -webkit-optimize-contrast;」は「image-rendering: crisp-edges;」のChrome用ベンダープレフィックスになります。 効果の確認方法当ページでChromeデベロッパーツールを開いて以下の画像を選択し、以下の画像のように「image-rendering: -webkit-optimize-contrast;」をオンオフ切り替えてみてください。 劇的な変化はしませんが、よく見ると画像が少しハッキリと表示されるのが見れるかと思います。 その他の対処法以前にも複数の解決法が提案されていましたが、どれも何かしらの問題がありました。 bac
![【2022年】Chromeで画像がぼやける場合のCSS対処法](https://cdn-ak-scissors.b.st-hatena.com/image/square/21c7cf6b7e5add3a019853e71ab7fd1d98a1687d/height=288;version=1;width=512/https%3A%2F%2Fsho-log.com%2Fwp-content%2Fuploads%2F2021%2F01%2Fec-chrome-image-blurred.png)