特定環境のモニターでイメージ画像をボヤけないように工夫する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は設置したバナーなどの画像が「にじまない工夫」をご紹介いたします。最近はスマートフォンも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環境のモニターで画像を表示した例です。全体がわずかにボヤけていますね。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

画像は1つ追加で準備すれば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などを指定している場合は状況に合わせておきましょう。

少しわかりづらいので横に並べて比較してみました。右側がくっきりしています。

些細な違いですが、バナーがくっきりしたら伝わる印象も異なります。

まとめ

バナー1つとっても「Retinaモニターで出し分けるか?」という選択肢があります。

ウェブはいくらでも簡素化もできますが、こだわれば細部を仕上げることができます。ただし、細かい部分にこだわるとその分料金も少しずつ上がってしまい更新の度に費用が膨らみ更新性は下がってきます。

- 超快速なワードプレスを運営しませんか?【AD】-

個人的にはバナーはどの環境でもくっきりと表示されるのが好きです。余談ですがこういった技術をテーマやプラグイン側の条件分岐に組み込めば「Retina環境で表示させるロゴ」「非Retina環境で表示させるロゴ」などを実装することができます。アップロードされた状況に合わせて出力を振り分ければOKです。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください