今回起きた事象

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

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

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

解決方法

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

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


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

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

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

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

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

公式CSSはこちら

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