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.04.28

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

    その他

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.05.27

    【第2回】Illustratorの「画像トレース」って何ができるの?加工方法もご紹介!<初心者向け>

    デザイン

    制作

おすすめ記事

  • 2021.09.29

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

    その他

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

WPサービス

×