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

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

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

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

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

指定なし

CSSの指定あり

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

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

プロパティ効果
image-rendering: auto; ブラウザに依存。初期値。
image-rendering: crisp-edges;拡大縮小しても滑らかにしたりぼかしたりしない。
image-rendering: pixelated;ドット絵のような処理をする。

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

対処法② 小数点が発生しないようにキッチリ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はシェア率がトップなブラウザでもありますし、コーディングの際には画像のぼやけが発生していないか細かくチェックしていく必要があります。

こちらもおすすめ

この記事をシェアする

関連記事

  • 2022.09.15

    【初心者向け】アクセス解析の用語をまとめて解説!

    ディレクション

    制作

  • 2022.09.13

    Web広告とは?Web広告の基礎知識やメリットを紹介!

    ディレクション

    制作

  • 2022.09.08

    この世界はコードでできている#2

    コーディング

    その他

    制作

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.06.09

    この世界はコードでできている#1

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×