4k/レティナ（Retina）ディスプレイには5つの対応方法がありますが、その1つめの『retina.js』について紹介します。
「Retina.js」の仕組みは？
まず最初に、「Retina.js」がどうやって画像を4Ｋ化させるかを簡単に解説します。
「Retina.js」はＪａｖａスクリプトと言うプログラムの一種です。
この「Retina.js」は、通常の画像とRetina用の縦横がそれぞれ2倍の画像を用意します。
（例：150×150ピクセルと300×300ピクセルなど）
最初は小さい方の画像を読み込みますが、この時に「Retina.js」のプログラムがディスプレイの解像度をチェックします。
この時に、ディスプレイがRetinaディスプレイだった場合、300×300ピクセルの画像を自動的に読み込んでくれるのです。
これで相手のディスプレイに合わせて自動的に画像を表示してくれるんですね。
では、実際に「Retina.js」の設定を始めましょう。
4K/Retina 用の画像ファイルを用意しましょう
「Retina.js」では、画像はサイズ違いで2 種類必要です
4K/Retina ディスプレイは、従来のディスプレイに比べて縦2倍横2倍のサイズ。
そのために、縦2倍×横2倍の画像が必要になります。
「Retina.js」はディスプレイの解像度に合わせて自動的に画像を表示させますが、その為には２枚の画像がどうしても必要になります。
例えば、↓の150 ｘ 150ピクセルの画像を表示させるとすると…
4K/Retina ディスプレイできれいに表示するには倍のサイズが必要になるので…
↑の 300×300ピクセルのサイズが必要になるんですね。
こうして比べてみると、大きく感じます。
逆を言えば、150×150ピクセルの画像を300×300ピクセルに引き伸ばして表示させようとするのですから、ぼやけて見えるのも仕方ないですね。
2 つの画像のファイル名には『決まり』があります
「Retina.js」はユーザーのディスプレイを判断して、2種類の画像から最適な解像度の画像を選んで表示させｒてくれます。
ただし、この2つの画像を表示させる為に、絶対的な決まりがあります。
それはファイル名です。
「Retina.js」では、大きな方の画像の後ろに、必ず @2x をつけます。
具体的に言うと、小さい方のファイル名を plus.jpg とした場合、Retinaディスプレイ用の画像のファイル名は plus@2x.jpg になります。
もう一度書きましょう。
150×150ピクセルのファイル名 … plus.jpg
300x 300ピクセルのファイル名 … plus@2x.jpg
これだけでOKです。
簡単ですが、このルールを守らないと、画像が関連付けられないので表示されません。
逆に、小さいサイズの画像に@2x を付けると動作しませんのでご注意を。
2つの画像は必ず同じフォルダーにアップロードします
「Retina.js」を使う場合、２つの画像は同じフォルダにアップロードして下さい。
違うフォルダにアップロードしてしまうと、表示されません。
ワードプレス の場合、画像の保存先は http://ドメイン名/wp-content/uploads/2014/12として毎月フォルダー名が追加されています。
小さい方の画像（＠2ｘがついていない画像）は、ワードプレスのメディア > 新規追加でアップロードして下さい。
ただし、大きい方の画像（@2x付きの画像）は、FTP ソフトなどを使ってアップロードする必要があります。
別々でアップロードする理由はのちほど紹介します。
html （body/body）を編集します
それでは、実際に「Retina.js」の設定をしていきましょう。
「Retina.js」の最新情報はこちらの公式サイトに掲載されています。
公式サイト Retina.js
まずは「Retina.js」の最新版をダウンロードして下さい。
公式サイトでも設定の仕方が載っていますが、こちらは通常のサイト用です。
ワードプレスではかなり勝手が違いますのでご注意ください（私もハマりました…汗）
ここでは、ワードプレスについての解説をしていきます。
タグをに追記しましょう
まずは、編集する前に必ずバックアップを取ってください。
ワードプレスの場合、左サイドバーの外観 > テーマ編集でフッターを選んでください。
ワードプレスでは、このフッターにタグを記入します。
記入する場所は、フッター（footer.php）の下から2 行目にあるの上です。
公式サイトの説明に従って、下記の一行をの直前に追記します。
※赤字の部分は保存するフォルダ名です。サイトにあわせて書き換えてください。
追記したファイルを更新してブログが表示されていれば完了です。
※参考 プリントスクリーン
サンプルテーマ：Twenty Fourteen
retina.js ファイルをアップロードします
ワードプレスのフッターにタグを記入したら、今度は「Retina.js」をサーバーにアップロードします。
「Retina.js」のスクリプトは、こちらの公式サイトからダウンロードして下さい。
公式サイト Retina.js
ZIP ファイルをダウンロードします
公式サイトRetina.js のDownload zip から最新のスクリプトファイルをダウンロードしてくだ【retina-1.3.0.zip】がダウンロードされます。（2014 年11 月現在）
解凍したjsファイルをアップロードします
解凍した、下記の2つのファイル（ rerina.js とretina.min.js）を、FTPソフトを使ってあなたのサーバーにアップロードします。
アップロード先は、あなたのドメイン名/wp-admin/js フォルダーです。
FFFTP でアップロードすると、こうなります。
これでJS ファイルのアップロードは完了です。
アップロード方法は使い分けが必要です
この「Retina.js」をワードプレスで使う場合、画像のアップロード方法が特殊です。
普通の画像の様に 「メディア →＞新規追加」のみではうまくいきません。
『決まり』が3 つありますので、間違えないように慎重してください。
これは私とパートナーが物凄～く悩みに悩んだポイントです。
上手くいかないけど、どこにも詳しく解説しているサイトがなく、これだけでかなりの時間を費やしました。
今回もサンプルとして
150 ｘ 150ｐｘのファイル名 …pius.jpg ←通常用
300 x 300px のファイル名 …plus@2x.jpg ←Retina用
の2つの画像ファイルで説明します。
セットの画像ファイルは、同じフォルダーにアップロードします
「Retina.js」では、2 つの画像ファイルは同じフォルダーにアップロードする必要があります。
ワードプレス の画像の保存先（ メディア > 新規追加）は、http://ドメイン名/wp-content/uploads/年/月です。
毎月自動的に新しくフォルダーが作成されていきますので、作業をする年/月のフォルダーへアップロードして下さい。
例えばこの記事を書いた2014年12月の時点なら、http://ドメイン名/wp-content/uploads/2014/12のフォルダーへアップロードします。
【plus.jpg】はワードプレス の メディア＞新規追加 でアップロードします
小さい方の画像は、いつも通りワードプレスの メディア＞新規追加でアップロードして下さい。
↑の部分にドラッグするだけでアップロード出来ます。
【plus@2x.jpg】はftpソフトでアップロードします
私達が一番ハマったのが、ファイル名に＠2ｘがついたの画像のアップロードでした。
実は、ワードプレスでファイル名に「＠」がついている画像をアップロードすると、勝手にファイル名を変えてしまうと言う問題が…
どうやらワードプレスはファイル名に＠がついたモノは却下されるらしいです。
これでは、画像をセットで使えず、Retina用画像が表示されません。
その為、面倒ではありますが、ワードプレスの場合は、ＦＴＰソフトを使ってアップロードして下さい。
便利なのはＦＦＦＴＰと言うフリーのソフトです。
窓の社なんかで無料でダウンロードできます。
（参考）FFFTP でアップロードした画面
Mac ユーザーならFireZilla が多いのではないでしょうか？（私は愛用しています）
検証 @2x ファイルをワードプレス のメディア > 新規追加でアップロードすると？
先ほども書きましたが、 ファイル名に@2xがついた画像を、ワードプレスの「メディア＞新規追加でアップロードした場合、どうなったかをご紹介します。
150 ｘ 150ｐｘのファイル名 … retinagazou.jpg
300 x 300px のファイル名 …retinagazou@2x.jpg
をそれぞれアップロードしてみました。
150 ｘ 150ｐｘのファイル名 …retinagazou.jpg
こちらは問題ありません。
では、300 ｘ 300ｐｘのファイル名 retinagazou@2x.jpg の場合は…
お分かりになりましたか？
【retinagazou@2x.jpg】はファイル名が変更されてしまっています。
タイトル名は変更されていないのですが、ファイル名は何だか訳の分からない長ったらしい名前になっています。
これではretina.js のスクリプトが画像を呼び出しても、名前が違うので対応出来ません。
したがって、Retina ディスプレイに対応出来ません。
私が使っている他のワードプレス のテーマ3つで試しても結果は一緒でした。
実は私たち、これのお陰でか～な～り時間をロスしました。
お陰でこうしてここで記事が書けるのですが…
最初は全く理由が分からず、これに気付くまでに１週間くらいかかりました。
参考 WordPress4.0.1 で検証
まとめ
最後に、4K/Retina 対応画像が表示される仕組みと『決まり』の一覧を作成しましたので、ご活用ください。
4K/Retina対応画像が表示される仕組み
いくつかRetina用の切り替え方法はありますが、今回はスクリプト（Retina.js）で説明します。
上段の従来のディスプレイの画像サイズは150x150px
下段のRetina対応ディスプレイ用の画像サイズは300x300pxとします。
例えばあなたがサイトを見に行きます。
表示されるサイズは150x150pxが用意されています。
そのサイトを訪問すると、スクリプト（retina.js）があなたの使っているディスプレイを判別します。
Retina対応ディスプレイと判断されると下段の画像サイズの300x300pxに入れ替えます。
その結果、あなたにディスプレイに合った大きい方の画像サイズを呼び出すので、きれいにくっきりと表示されるワケです。
上段の場合：従来のディスプレイでサイトを訪問。
スクリプト（Retina.js）が従来のディスプレイと判断して、150x150pxを表示してまず（画像の入れ替えは行いません）
下段の場合：Retina対応ディスプレイでサイトを訪問。
スクリプト（Retina.js）がRetina対応ディスプレイ判断して、300x300pxを表示します（画像の入れ替えを行います）
図で簡単に説明すると、下記の様な感じです。
2種類の画像を切り替えて表示
疑問・質問はメールフォームでご連絡ください。
