Chromeで画像やテキストがぼやけるときの対処法

画像を書き出してcssで縮小するとChromeでぼやけてしまうケースがあります。

今回はChrome固有のこのバグを対処する方法をご紹介します。

対処法①　「image-rendering」を指定する

img {
image-rendering: -webkit-optimize-contrast;
}

指定なし

CSSの指定あり

指定ありの右側のほうが文字がくっきりしました。

image-rendering: -webkit-optimize-contrast;はimage-rendering: crisp-edges;のChrome用のベンダープレフィックスです。

※ただし、文字がギザギザしてしまう場合があるので要注意です。

対処法②　小数点が発生しないようにキッチリ1/2にする

画像を書き出し、cssで縮小させるときに2で割り切った数値から1pxでもズレるとぼやけてしまいます。

例）1600px で書き出した画像を縮小させる

804pxに縮小

800px（1/2）に縮小

この数ピクセルの誤差で画像がぼやけてしまいます。

また、縮小をした際に小数点が入ってしまう大きさに指定をした場合もぼやけてしまいます。

×　横幅1600pxで書き出し→1/3サイズに縮小→533.333…px
○　横幅1600pxで書き出し→1/4サイズに縮小→400px
○　横幅1600pxで書き出し→等倍で使用→1600px

まとめ

Chrome固有のバグなので、今後アップデートの際に解消されるかもしれませんが現状では、「image-rendering」もしくは「画像を1/2サイズに縮小」することでしか対応は難しいです。

また、Chromeはシェア率がトップなブラウザでもありますし、コーディングの際には画像のぼやけが発生していないか細かくチェックしていく必要があります。

こちらもおすすめ

[card url=”https://note.spiqa.design/wp/flex-ie/”]