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

サイトにW500×H500pxのjpg画像を表示させる
①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倍で保存する方法をとってみてはいかがでしょうか。