【設定必須】TCDテーマでロゴ画像のレティナディスプレイ対策をしよう

この記事ではこのような疑問にお答えします。

• ・レティナディスプレイ用のロゴ画像って何？
• ・TCDの「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れるとどうなるの？

TCDテーマを使用している方なら見たことがあると思うのですが、ロゴ画像の設定に「レティナディスプレイ用のロゴ画像を利用する」という項目があります。

初めて購入したテーマがTCDテーマだった人は、この項目が何か分からないまま放置している方もいるのではないでしょうか？

結論から言うと、この設定は必ずチェックを入れたほうがいいです。その理由を解説します。

レティナディスプレイとは？

レティナディスプレイを簡単に説明すると、Apple社が開発したとってもキレイなディスプレイのことです。

キレイと言っても様々な要因があると思いますが、ここで注目して欲しい特徴は、画面解像度が通常の２倍になることです。

解像度の高さがロゴ画像にどのように影響するの？

と思う方がいますが、実はこの性質が画像の表示に影響するんですよね。

※レティナディスプレイ以外でも、高い解像度のディスプレイであれば表示に影響します。

画像とディスプレイに関係性がある？

解像度が２倍になるということは、表示される画像の大きさも２倍になってしまいます。

しかし、元の画像サイズは変更できないですよね？

ということは、画像が無理やり２倍に引き伸ばされて表示されるため、画像が荒くなってしまうんですね。

画像がボヤけてしまう

様々なサイトを閲覧する中で、たまに画像がボヤケているのをみたことがありませんか？

イメージがわかない方は下記の画像をご覧ください。

150×80のロゴ画像と300×160のロゴ画像を用意して同じサイズで表示してみました。

どちらがキレイに見えますか？当然300×160の方ですよね。

ボヤける理由は何？

この画像がボヤける理由としては、小さい画像を無理やり拡大して表示させているからです。

もちろん150×80の画像は、300×160の画像の半分の大きさですから、当然同じ大きさで表示すると、150×80は拡大されて画像が荒くなりますよね。

これと同じ現象がディスプレイの解像度の違いによって引き起こされます。

それならどんなディスプレイでもキレイに画像を表示させたいですよね？

TCDテーマの「レティナディスプレイ用のロゴ画像を利用する」を活用しよう。

TCDテーマなら、先程のように画像が荒くなるのを「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れるだけで、簡単に防ぐことができるんですね。

使い方と仕組みをみていきましょう。

使わなければどんな違いがでるのか？

まず「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れる前と後で比較してみましょう。

今回は、当サイトでも使用しているTCDテーマの「ROCK」を使用して検証します。

なんと、チェックを入れるとロゴ画像の表示が小さくなってしまいました。

ロゴ画像が縮小して表示される

ロゴ画像が小さく表示されてしまいましたが、これが正解です。

実は、「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れると実際の画像サイズの半分で表示されるんですね。

この設定を行うことで、実際の画像サイズの1/2で表示される画像がレティナディスプレイで2倍で表示されるので、画像がキレイに表示される仕組みとなっています。

• レティナディスプレイ対策をしていないと…
• 実際の画像サイズ×２で表示される→画像が引き伸ばされて表示される
• レティナディスプレイ対策をしていると…
• 実際の画像サイズ÷２×２で表示される→そのままの画像サイズで表示される

設定方法

画像が半分の大きさになって表示されるなら、せっかく用意したロゴ画像が小さくなってしまうじゃないかと思う方がいると思いますが、その点は大丈夫です。

用意するロゴ画像サイズを２倍の大きさにすればいいのです。

150×80サイズの画像とその２倍の大きさの300×160サイズのロゴ画像を用意してレティナディスプレイの表示を比較してみました。

上側が、150×80サイズの画像を「レティナディスプレイ用のロゴ画像を利用する」のチェック無しで表示したもの
下側が、300×160サイズ（２倍）の画像を「レティナディスプレイ用のロゴ画像を利用する」のチェック有りで表示したもの

ですが、若干下側の方が画像がキレイに表示されていることが分かりますね。

TCDテーマでロゴ画像を設定する時は、必ず「レティナディスプレイ用のロゴ画像を利用する」にチェックを入れて本来表示したい画像の２倍のサイズの画像を用意しましょう。

まとめ

ロゴ画像にレティナディスプレイ対策する理由と設定方法について解説しましたが、まだTCDテーマでレティナディスプレイの設定をしていない方は必ず設定するようにしましょう。

また、TCDテーマを使用されていない方もこれを機に画像の表示について見直してみてはいかがでしょうか？

小さな変化かもしれませんが、この地道な配慮がサイト運営をする上でとても大切ですので、気をつけるようにしましょう。