その他

2022.07.20

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

こちらもおすすめ

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

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.11.25

    ACFのフィールド出力方法まとめ

    その他

  • 2021.05.21

    【勝手にWEBサイトレビュー#34】FVにインパクトがあるフランスの食品メーカーのサイト

    その他

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    その他

TAG

×