いつも何かとお世話になっている ”塗装職人” の方が只今WEBページを更新中との事で、私も人事でない．．．．という自覚のもと、いろいろ勉強させて頂きました。（来年公開予定．．．との情報をどこかで目にしたのでまだリンクは貼らないでおきます）

ちょっと驚いたのはそのページに使われている写真のクオリティが素晴らしかった事。当サイトと同じWordpressを使っているのですが記事に埋め込まれた画像が凄く綺麗．．．。そう、Mac Book ProのRetinaディスプレイモデルを使っている方ならピンとくるかもしれませんが、Retinaで一般的なWEBサイトを閲覧すると写真が汚く見えるのです。

簡単に原理を説明すると、一般的なディスプレイの1ドットをRetinaでは4つのドットで表示（4倍高密度ディスプレイ）しています。例えば上の写真の表示サイズは800×533ピクセルですから、一般的なディスプレイに表示させるなら貼り付けサイズと同じ800×533ピクセルの画像を準備すれば良いですが、それをそのままRetinaにドットバイドットで映そうとすると1/4の小さな画像になってしまうわけです。ですからディスプレイに映す前段階で内部的に画像を4倍に拡大してつじつまを合わせてくれているわけですが、そのせいで画像がぼやけた感じになるというわけです。オリジナルを4倍に引き伸ばしたらそりゃボケて当然ですね。

で、今回不思議だったのは特にRetina対策をしていないとおっしゃっているそのWEBページの画像が綺麗に見えた事。不思議でした。色々考えました。話のやり取りを何度も読み返しました。答えが出ました！私とは画像の掲載方法が違うのです。

WordPressをお使いの方ならご存知かと思いますが、ダッシュボードから新規投稿をする際、「サムネイル」「中」「大」みたいな感じで記事に挿入する画像サイズを選ぶと思うのですが、これを使うと選択されたサイズの縮小画像が生成されます。縮小版ですからサイトを訪れてくださる方はデータ量が小さくなり快適にブラウジングできます。でもその縮小画像に注目してみると先の条件で言うところの 「表示サイズ = 画像サイズ」になってしまいますからRetinaではボケるわけです。

でも、参考にさせて頂いたサイトはボケていない．．．。そう、サムネイルではなく、全てオリジナルサイズのまま貼り付けて、それ自体をパラメーター的に目的のサイズに変更するのですね。確かにそうすれば埋め込まれた画像は大きなままですからRetinaでも綺麗に見えます。

いえ、言われてみれば確かにちょっと考えれば思いつきそうなものですし、「オマエ偉そうに説明してんのにそんな事も試していなかったのか？」と言われると何も反論出来ませんが、アラフォーを迎えたカチンカチンの頭では先入観が邪魔をして、思うように出来ない事も多くなるのです．．．。

というわけで、本日の画像はその方法で掲載しています。Retinaディスプレイの方は ”多少” 綺麗になったと思います（その他のディスプレイの方はもともと綺麗に見えているはずです）。あえて ”多少” と書いたのは、正確に綺麗な画像を表示させるには先ほど書いた通り表示サイズの4倍の画像が必要ですから800×533サイズの4倍、1600×1066．．．。そんなの貼られてもスマホで見ようと思ったらどれだけ待たされるか．．．。という次なる問題が発生するのです。ですから今回はオリジナル画像は今まで通り1200×800としてそれを800×533として表示させています。数値的に割り切れませんから ”多少” しか綺麗になっていないのです。それでもRetinaユーザーにとってはだいぶ改善されていると思います。

それからこの方法ではまだ、写真をクリックしてオリジナル画像が表示された時のRetina対応にはなっていません。オリジナルが表示されちゃうわけですからそちらも表示を1/4にしないといけないはずですよね。

という事でRetina対応は生半可な気持ちでは対応出来ないという事を今も思い知らされています。本格的に対応するにはJava Script等でディスプレイに合わせて自動調整するような工夫が不可欠になるようですからハードル高いですね。Wordpress用のRetina対応プラグイン等も出回っていますから色々試してはいますが、今のところどれも正常に動作した試しがありません。

どなたか頭の良い方がお手軽ツールを作ってくれる日を首を長くして待っております．．．。