CSS

画像を縮小表示させた時に画像がぼやけてしまう問題

今回起きた事象

写真やイラストよりも、テキストレイヤーを画像として表示する際、画像が荒れて見えるとより目につきます。

今回はXDで3倍書き出ししたにも関わらず、PC(ブラウザはChrom)で画像がぼやけて見えてしまう問題について簡単な解決方法を見つけたので記事に残します。

ちなみに表示したテキストのpngファイルは、%指定でレスポンシブになるように指定しています。

解決方法

単刀直入に、どうやって改善したかを最初に記します。

以下のCSS一行をimgタグに対して指定するだけ!


img {
 image-rendering: crisp-edges;	
  image-rendering: -webkit-optimize-contrast; // Chrome用ベンダープレフィックス
}

デベロッパーツールで上記CSSの記述をON/OFFすると、目に見てわかるくらいテキストがくっきりしてくれました。

すべての画像に指定すると写真によってはくっきりしすぎてしまうと思いますので、こういったテキスト画像の場合などには臨機応変に指定した方が良さそうですね。

image-renderingについて

デフォルト値は「auto」。つまり何も指定してないのと同じです。これは拡大縮小さした際に滑らかな表示になります。

今回指定したのは「crisp-edges」は拡大縮小した際滑らかに表示せず、エッジを保った表示となります。

公式CSSはこちら

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2019/10/27 CSS

レスポンシブで正方形を維持させる

2019/11/01 CSS

divでぐるぐる回転するボタンを作ってみた

2020/03/19 CSS

IEのflex-direction: column;でハマったこと

2020/04/23 CSS

CSSだけでプルダウンメニューを実装する