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

こちらもおすすめ

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2021.09.29

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

    デザイン

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×