Retina対応の綺麗なサムネイルリンクを作成する方法

以前サムネイル付きリンクを素早く作成するブックマークレットについて書きました。

画像付きリンクを作成する方法としては上記の方法で十分便利だし何も問題はないんですがiPhoneでなんとなくブログを見ている時に気づいてしまいました。

なんかサムネイル画像ぼやけてね？

ということに。

iPhoneだと画像がぼやけて見える

パソコンで見ると何とも思わなかったんですがなぜかiPhoneで見た時だけ画像がぼやけて見えます。

そう、やつの仕業です。

Retinaディスプレイです。

ヘタに画像をくっきりハッキリ表示しちゃうもんだから解像度が十分じゃない画像が逆にぼやけて見えてしまうんですよね。

ということでRetinaディスプレイやその他の解像度が高い画面でも綺麗に見えるサムネイルリンクを作る方法を紹介します。

Retinaディスプレイとは

知っての通りMacやiPhone・iPadのRetinaディスプレイは画像をものすごい高精細に表示してくっきりはっきり見れてしまうすごいモニタです。

なんで画像が綺麗に見えるのか

簡単に言うと100pxの画面に200pxの画像をギュッと詰め込んで高精細に表示している状態です。

画面上では100pxの表示領域だけど画素数の「つぶつぶ」が200個ある状態です。そりゃぁ綺麗に見えますよね。

ギュッと詰め込んでいる分、画面の近くで見るほど違いが顕著になるのでiPhoneで見ている時に違いが気になったんだと思います。

どうやって高精細なサムネイル画像を作るのか

まず今までぼやけていた原因を説明すると100pxの領域に100pxの画像を置いてたわけです。

100pxの画像を100pxでそのまま表示しているからRetinaディスプレイ本来の性能を発揮できていない状態ですね。

これをRetinaディスプレイを最大限に活用するためには以下のような画像のサイズを指定します。

200pxの画像を100pxにギュッと詰め込んで綺麗に表示してるイメージですね。

基本的にRetinaディスプレイ対応の画像を貼りたい場合は上記のように表示したい大きさの倍の大きさの画像を用意すればOKということになります。

サムネイル画像を作るブックマークレットの設定

ここまで説明したらすでに答えを言っているようなもんですがブックマークレットから出力されたHTMLは以下のようになります。ブックマークレットを作る手順は前回の記事「ShareHtmlより速く簡単に画像付きリンクを作成する方法」に丸投げするので割愛します。

300x260 というのが画像の大きさでそれを width="150" と height="130"で半分の大きさにギュッと詰めて表示していることになります。

こうすればiPhoneなどのRetinaディスプレイでより綺麗なサムネイル付きキャプチャを貼ることができます。

Retina対応のデメリット

デメリットというか単純な話ですが画像を大きくする分、容量が大きくなるのでページの表示速度に若干影響が出る可能性があります。

100×100の画像と200×200の画像を比べると単純計算で面積およびファイル容量は4倍になります。

100pxや200pxのサムネイル画像くらいなら容量が4倍になってもそんなに影響は無いと思いますが横幅いっぱいの600pxや700pxの画像をRetina対応にするとかなり重たくなる可能性がありそうです。

Retina対応と非対応のサムネイル画像比較

それでは実際にサムネイル付きリンクを作成してRetina対応の綺麗なものと非対応のぼやけたものを見比べてみます。

Retina対応

こちらは300×260の画像を150×130にギュッとしたサムネイル

目を凝らして見ると文字・写真ともに綺麗に表示されていることがわかります。

Retina非対応

こちらは150×130の画像をそのまま150×130で表示したサムネイル。

iPhoneやiPadなどのRetinaディスプレイで見ると違いが一目瞭然ですね。

え？気にならない？そ、そうですか（汗）

MacBook Proとかだと確かにRetinaディスプレイなんですが目と画面の距離が遠いので違いはそんなに感じません。

スマフォファーストと言われる昨今、自分の目的と合致しているようなら導入してみてはどうでしょうか。

画面キャプチャのサムネイル付きリンクを作成する方法はこちらです。ブックマークレットを使うので起動も速くて便利です。

＜関連＞
⇒ShareHtmlより速く簡単に画像付きリンクを作成する方法