studio mars
クラゲちゃん
レース編みkeecolor
広告募集
studio mars
クラゲちゃん
レース編みkeecolor
広告募集

【Web】文字や画像がぼやける時の対処法

小技
ぼやける画像の試し

サイトにjpgやpng画像をアップした時に文字がぼやけてはっきり見えないことはありませんか?画像がぼやける原因は作成サイズより表示サイズが大きくなってしまっている場合や、macのRetinaディスプレイなどの解像度の高い端末ですとぼやけてしまい、サイト自体もぼんやりした印象になってしまいます。今回はAdobe Illustratorで保存し、WordPressのアップする場合を例にしてぼやけない画像にする方法をご説明させていただきます。

スポンサーリンク

イラレでサイズを変えて保存してみる

ぼやける画像の試し

サイトにW500×H500pxのjpg画像を表示させる

表示させたい画像サイズはW500×H500pxです。
①W500×H500pxのjpg(100%)
②W750×H750pxのjpg(150%)
③W1,000×H1,000pxのjpg(200%)
を表示させてみます。
アップロードした画像は、width=”500″ height=”auto”でサイズを指定してW500×H500pxに表示させています。ぼやけ具合をご確認ください。

①W500×H500pxのjpg画像

ぼやける画像の試し
【作成サイズW500×H500px(100%)jpg画像】

文字周りがにじんだようにぼやけています。

②W750×H750pxのjpg画像

ぼやける画像の試し
【作成サイズW750×H750px(150%)jpg画像】

①W500×H500pxのjpgの画像より文字周りのぼやけが改善されています。

③W1,000×H1,000pxのjpg画像

ぼやける画像の試し
【作成サイズW1,000×H1,000px(200%)jpg画像】

表示サイズのW500×H500pxの2倍で保存したW1,000×H1,000pxの画像はくっきり見えています。つまり、表示させたい画像サイズの2倍の画像を作って、cssで50%の倍率に指定するとくっきり表示されることがわかりました。

サイトにW500×H500pxのpng画像を表示させる

❶W500×H500pxのpng画像

ぼやける画像の試し
【作成サイズW500×H500px(100%)png画像】

❷W750×H750pxのpng画像

ぼやける画像の試し
【作成サイズW750×H750px(150%)png画像】

❸W1,000×H1,000pxのpng画像

ぼやける画像の試し
【作成サイズW1,000×H1,000px(200%)png画像】

png画像でも表示サイズのW500×H500pxの2倍で保存したW1,000×H1,000pxの画像はくっきり見えています。つまり、jpgでもpngでも表示させたい画像サイズの2倍の画像を作って、cssで50%の倍率に指定するとくっきり表示されることがわかりました。

まとめ

いかがでしょうか?Photoshopで画像を保存する時も、あらかじめ表示させたい画像の倍のサイズで保存するとサイトで表示させた場合にくっきりと表示されます。ただ、注意したいのは、画像サイズが倍になるということはファイルサイズが大きくなってしまうことです。画像サイズが大きくなってしまうとSEOの観点でサイトの表示が遅いと不利になってしまいます。なるべくテキストで表示できる箇所はテキストで対応し、どうしてもくっきり表示させたい箇所は今回の記事の2倍で保存する方法をとってみてはいかがでしょうか。