貴方のブログの画像はボヤけていませんか？

こんにちは！小林です。

突然ですが、

貴方のブログの画像はボヤけていませんか？

最近目が悪くなって視界がボヤけてたり、

私の人生設計も同じくらいボヤけていたり。

iPhoneで画像を見たときボヤけて見える事ありませんか？

ありますよね？私はあります。



PCやandroid端末ではクッキリ表示されているのに、

iPhoneやiPadだとボヤけて見える、、、

これはiPhone のRetinaディスプレイのせいなんです。

Retinaディスプレイって？
Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜200dpi程度であった従来の倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。wikipediaより

例として二つの画像を用意しました。

↑こちらは500×300ピクセルの画像

↑こちらは1000×600ピクセルの画像

PCでご覧になっている方はどちらも綺麗に見えているはずです。

ところがどっこいiPhoneで見てみると、、、

　　

どうですか？上の画像はぼやけて見えますよね？

特に文字の部分がボケボケです。

では下の画像は なぜ綺麗に見えているか と言うと、




iPhoneのRetinaディスプレイは解像度が通常の２倍。
なので２倍の大きさの画像を用意しておかないとボケるんです。





でも上の写真みたいに2倍の画像でハミ出て

ルーラー（PCのみ）が表示されちゃうのは嫌だよ！っていう方、

私もそうですけども、



imgタグでサイズ指定してあげると良いです。

ではどうやるかというと、、、

デザインモードの方はhtml編集モードに入って下さい。



＜img src="画像URL">　
↑大きなサイズの元の画像があるとします。

　　　↓

＜img src="画像URL" width="500" height="300">
↑縮小表示したいサイズをタグ付けで指定。




たったのこれだけです。

ひだっちユーザーの方はメモ帳に　
" width="●●●" height="●●●" />
この部分だけコピーして記憶しておくと良いでしょう。

すると↓こんな感じにクッキリiPhoneでも表示されるんです。


1000×600picの元画像をタグ付けで500×300pic表示に変更したもの

どうですか～♪　iPhoneでみておられる貴方。

綺麗に見えているでしょう？

まとめ

要は2倍の写真を用意して2分の1に表示させれば綺麗にみえる！

というだけなんです。




日本では、68.7%の人が「iPhone」ユーザーです。

なので綺麗な写真をiPhoneユーザーにも見せたい！

と言うこだわりの方は、

Retina ディスプレイに対応した画像を用意しないとだめなんですね♪


簡単にできるので皆さんもやって見て下さい♪


↑ちなみにひだっちのリサイズ機能を使うと

これくらいの画質で表示されるので

気にならない方はこちらをオススメします。

あっ！大きなサイズは容量に注意して下さいね。

小林でした。