WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
本日は設置したバナーなどの画像が「にじまない工夫」をご紹介いたします。最近はスマートフォンもRetina対応モニターなのでくっきり画像が見えますが、Windowsのモニターや数年前に発売されたMacモニターではRetina非対応だったりで設置した画像がボヤけて表示されることがあります。
特定環境のモニターでイメージ画像をボヤけないように工夫する方法
対策はカンタンです。htmlの書き方でRetina非対応と対応の処理を分けてあげればOK。特にむずかしい技術ではありませんがサイト内に設置したすべての画像を指定するとしたら少し手間がかかりますね。
以下が一般的な指定方法です。たとえばバナー画像を「600×500px」で作っている場合はCSSの横幅指定を300pxにしておけばRetinaのモニターは自動で300pxにしてぴったり表示されます。
<a href="#"><img src="banner-retina.png" /></a>ただ、上記の指定方法では非RetinaモニターではCSSが300pxにリサイズ処理する際に画像がにじみます。ちなみに以下が非Retina環境のモニターで画像を表示した例です。全体がわずかにボヤけていますね。
画像は１つ追加で準備すればOKです。横幅は表示させるサイズに合わせてください。もしCSSで横幅を290pxに指定しているなら横幅290pxの同じ画像も追加すればいいという意味です。コードは以下です。
<a href="#"><img src="banner-none-retina.png" srcset="banner-none-retina.png 1x,banner-retina.png 2x" /></a>解説すると「通常は非Retina用の画像を指定」して、同時に「Retina環境用の画像も指定」しています。パス環境などは状況に合わせる必要がありますが上記のように書けば基本的に自動で読み込まれます。
以下が実際に読み込んだ画像の例です。全体が少しくっきりしていますよね。元の画像をそのままリサイズソフトでサイズダウンしたので少し画質が悪くなりましたがにじみ自体は改善しています。
本来はバナーのオリジナルデータ（psdファイルなど）から書き出すので画質は劣化しません。今回は解説用として急遽準備したのでリサイズソフトで大きさを変更したのが原因で少し荒くなっているだけです。
Photoshopで書き出す際にRetina用に600×500、非Retina用に300×250などを出力すればOK。ただ、上記でも解説した通り設置するサイトが横幅290pxなどを指定している場合は状況に合わせておきましょう。
少しわかりづらいので横に並べて比較してみました。右側がくっきりしています。
些細な違いですが、バナーがくっきりしたら伝わる印象も異なります。
まとめ
バナー１つとっても「Retinaモニターで出し分けるか？」という選択肢があります。
ウェブはいくらでも簡素化もできますが、こだわれば細部を仕上げることができます。ただし、細かい部分にこだわるとその分料金も少しずつ上がってしまい更新の度に費用が膨らみ更新性は下がってきます。
個人的にはバナーはどの環境でもくっきりと表示されるのが好きです。余談ですがこういった技術をテーマやプラグイン側の条件分岐に組み込めば「Retina環境で表示させるロゴ」「非Retina環境で表示させるロゴ」などを実装することができます。アップロードされた状況に合わせて出力を振り分ければOKです。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
