結論 ワードプレスで4k(Retina)ディスプレイの5つの対応でいいのはコレでした

reti1

このサイトを立ち上げてから、4K(Retina)ディスプレイへの対応方法を試行錯誤して早4ヶ月。

この4ヶ月間かけて導き出した、4Kディスプレイへの対応の仕方に一つの結論が出ました。

とは言え、4Kディスプレイへの対応は始まったばかり。
これから先、新しい技術が続々と出てくると思われます。

今回は、2015年3月現在での結論をご紹介します。
この先変更になる可能性は高いですが、今ある5つの対応方法を画像の比較と共にご紹介し、私なりのランキング付けをしてみました。

少々長くなりますが、最後までおつきあいください。
あなたのサイトのお役に立てるよう、出来るだけ簡潔に分かりやすく書いていきます。

※この記事はワードプレスを対象に書いていますが、ワードプレスプラグイン/WP レティナ(Retina) 2Xの対応方法はワードプレス以外のHTMLのサイトもタグやjavaで対応可能ですので、どうぞ参考にしてください。

 

4K(Retina)ディスプレイで検証した5つの対応方法

当サイトの管理人が4K(Retina)の出会った時、「@2x.jpg」って何?と言うレベルでした。

管理人はiPhoneユーザーです。
iPhone=レティナ(Retina)ディスプレイなのですが、全く無知の状態でした。
ある事がきっかけで4K(Retina)用のサイトを作る事になり、それから真剣に勉強した次第です。

まずは、iPhoneで画像がボケるのはなぜ?からスタートしました。

iPhoneで画像がボケるのは4K(Retina)ディスプレイに対応した画像ファイルが用意されていないためです。
4K(Retina)ディスプレイでは、縦2倍 X 横2倍の合計4倍の解像度の画像ファイルを用意する必要があります。
更に、画像を表示する為の仕掛け(スクリプトなど)も必要です。

最初に出会った対処法は「Retina.js」と言うスクリプトでした。
拡張子の前に【@2x】をつけると【retina.js】で表示出来ると知り、そこから4K(Retina)ディスプレイ対応のサイトを作り始めました。

その後、トラブルに遭いながらも何とか安定し出した頃から、今度は別のやり方も気になり始めました。
元々IT関係の仕事に就いていた私。
この手の物は、つい試したくなる性分です。

私の4K(Retina)への更なる挑戦は、【retina.js】の切り替えから始まりました。
色々と調べていくと、私が検証出来そうなやり方が5つあると知りました。

せっかくやるのなら、他の方法も試してみたい。
もしかしたら、「Retina.js」よりも簡単で確実に出来るかもしれない…

そんな想いから、当サイトで【retina.js】を、別のワードプレスサイトで【WP Retina 2X】を、更に別のHTMLのデモサイトで【retina-images】を検証しました。

私が見つけた4K(Retina)ディスプレイの対処方法は、下の5つです。

  1. retina.js
  2. retina-images 
  3. Picturefill.js
  4. srcset
  5. 高解像度の画像をサイズ指定する

これから一つずつ紹介していきますので、最後までおつきあい下さい。

 

I. retina.jsで画像を切り替える

当サイトでは「retina.js」で4K(Retina)画像に対応しています。

ワードプレスをRetinaディスプレイ対応に変更する【9つの決まり事】で紹介しているように、retina.jsとHTMLへの追記と画像ファイルを@2xに変更することで対応します。

メリットは「retina.js」のアップロードとHTMLへのタグの書き込みを一度してしまえば、その後は大きさの異なる2つの画像ファイルを追加するだけで済むところです。
新しいページを追加する度に、一々タグを書きこんだりする手間が要りません。
タグの書き込みも、上級者限定のような難しい設定はありません。

デメリットはサーバーのトラフィック(情報量)が増えること。
「retina.js」が訪問者のディスプレイに対して、既存のディスプレイか4K(Retina)ディスプレイかを見極めて画像を差し替えます。

ココが問題で、既存のディスプレイでは1度のアクセスで済むところが、4K(Retina)ディスプレイだと2度アクセスする事になります。
その為、画像を表示するのに時間がかかるんですね。

※当サイトでは150pxくらいの小さな画像を5枚以上同時読み込む際に、画像が落ちる(抜ける)事が判明しています。そのため、secsetを活用したハイブリット型として動作させています。

その時の対応の仕方は下記の記事に書いています。

レティナ(Retina)ディスプレイで確認すると画像が表示しないトラブルの対応

Retina.js公式サイト → Retina.js 

 また、ワードプレスのメディアの新規追加でファイル名に「@2x」がついている画像をアップロードすると、勝手にファイル名が変更されると言う問題もあります。
これを避ける為にはサーバーに直接画像をアップロードする必要があり、その為のftpソフトが必要になります。

 

Ⅱ.Retina-imagesで画像を切り替える

次は「Retina-images」を利用して画像を切り替える方法を紹介します。

こちらは慣れない方には、かなり厳しい内容です。
それなりのスキルがある人向けと言えるでしょう。
phpファイルの作成と設置、.htaccessにリダイレクト設定を書く、scriptを2種類対応させる、等が必要です。

参考サイト:FLATさんのサイト

↑のFLATさんがこのやり方を紹介されています。
FLATさんが面倒くさい3と表現されていますが、ここのサイトを読めばそれがよくわかります。

メリットはRetina.jsのデメリット(二度画像を読み込みに行くのでトラフィックが増加する)を解決しているので、アクセスが一度で済むからアクセスの効率は下りません。

デメリットは、初心者には設定が難しい事です。
phpファイルも.htaccessもscriptも、ミスをするとサイトのデザインが狂ったり、アクセス出来なくなるので、設定には細心の注意が必要です。
失敗した場合、慣れていない方にはどこが悪いのかを調べるのも一苦労です。作業をする前には必ずバックアップが必須です。

 

Ⅲ.Picturefill.js(WP Retina 2X)で画像を切り替える

「Picturefill.js」はHTML5に未対応のブラウザの為に使用するscriptです。
ここではワードプレスのプラグインのWP Retina 2Xの推奨する設定の「Picturefill.js」について紹介します。

メリットは設定が簡単な事。1分で済みます。
既存の画像ファイルもワンクリックでOK、待つだけで切り替わります。

デメリットはフルサイズ(2280×19998)での対応は有料です。
更に、WP Retina 2Xプラグインは日本語に対応していません(←ここが一番の問題です)

 

Ⅳ.img要素srcset属性で画像を切り替える

このやり方は、HTML5のsrcsetタグを使って2種類の画像を切り替えます。

画像を2種類用意します。
例) gazou1.jpg と gazou2.jpg

srcsetを使用してコードを作成し、タグを書きこみます。

参考:ワードプレスの記述

参考サイト:KIAKINGさんのサイト

メリットは「Retina-images」と同様にアクセスが一度で済むので、アクセス効率が下がりません。
また、「Retina.js」で起きた小さな画像の抜け(画像落ち)も起きません。

当サイトでは150px以下の小さな画像を5枚以上並べると画像落ちしましたが、これで改善しました。

その時の記事がこちら↓
レティナ(Retina)ディスプレイで確認すると画像が表示しないトラブルの対応

デメリットは、アップする画像ごとにタグの記述が必要になりますので、タグ打ちの手間が増えるのと、タグ打ちが増加すると些細な打ち間違いのミスも増える…などの問題が起きる事です。

 

Ⅴ.解像度2倍以上の画像をサイズ指定する

このやり方は、大きな画像を小さく表示する為、タグで直接サイズ指定します。

例えば、ブログの記事が700pxとして、挿入する画像サイズが1280x960pxとします。
この場合、直接画像を挿入するとブログの記事の幅よりも大きい為、画像がはみ出してしまいます。
この時、画像サイズを半分の640×480pxとタグの記述で指定すると、半分のサイズで表示されます。

この手法を、4k(Retina)対応で使います。

4K/Retinaディスプレイでは2倍以上の解像度があればいいので、タグでサイズを半分に指定すればいいわけです。
検証しましたが、scriptやプラグインと遜色がない程度の写り具合になりました。

 デメリットは、このやり方も画像毎にタグ打ちでサイズ指定をしなければいけない事ですね。
画像を追加する度に…となると、タグ打ちに慣れていない人には面倒に感じるかもしれません。

 

3種類の画像の違いを比べてみる

ここまで、5種類の4K(Retina)対応方法を紹介してきました。
次は画像の写り具合を比較します。
今回は画像を3種類用意して検証しました。

  1. 2種類の画像を切り替えて表示
  2. 2倍の解像度の画像を1/2のサイズ指定で表示
  3. 4K/レティナ(Retina)対応をしない
  Ⅰ.Retina.js Ⅱ.Retina-images Ⅲ.Pictuefill.js(ワードプレス) Ⅳ.srcset Ⅴ.画像のサイズ指定
画像1  
画像2        
画像3          

 

 画像1,2種類の画像を切り替えて表示

picturefill1picturefill2

 

画像2,2倍の解像度の画像を1/2のサイズ指定で表示

WP Retina 2x stop1WP Retina 2x stop2

 

画像3, 4K/レティナ(Retina)対応しない

None1None2

 

画像1は解像度が2倍の画像に切り替えて表示していて高精細な表示です。
画像2も解像度が2倍の画像をサイズ指定することで、画像1と同様の表示になっています。
画像3は解像度が半分なので、ぼやけてしまっています。

ここまでの検証結果を踏まえて、使いやすさランキングを作りました。

 

4K(Retina)ディスプレイ対応ランキング(2015年3月現在)

 いろんな角度から4K(Retina)対処法を見て来ましたが、私が決めたランキング結果はこちらです。

  1. Picturefill.js ワードプレスプラグインWP Retina 2X
  2. Retina.js
  3. 高解像度の画像をサイズ指定する
  4. srcset
  5. Retina-images

 

このランキングは、設置・設定と画像追加時の手間を考えた結果です。
あくまでも個人的な見解です。
また、持っているスキルによって難易度もかわります。

ワードプレスプラグインの「WP Retina 2X」は設置も簡単で、画像の更新も簡単です。
このあとで設置手順を紹介しますが、難しい事は何もありません。

以前は動作が安定しない…説明が分かり難い…などの問題もありましたが、最近ではかなり改善されています。
ワードプレスユーザーからすれば、プラグインで管理出来るのならそれが一番ですよね。

 

「Retina.js」は設置に少し手間がかかりますし、ftpソフトが必要など初心者には少し敷居が高い内容です。
画像が増えるとアクセス効率が下がるのもネックになります。
ただ、最初の設定さえクリアできれば後は割と楽ですし、安定しています。
そう言う意味で2番としました。

 

「高解像度の画像をサイズ指定する方法」と、「HTML5のimg要素srcset属性での対応」は、画像を追加する度にタグ打ちが必要です。
タグ打ちに慣れている方はいいでしょうが、そうでない方は面倒に感じるでしょう。
慣れていないと、タグ打ちミスのトラブルも起きやすいですし。
そう言う意味で、3番4番としました。
でも、動作は安定していて確実ではあります。

 

「Retina-images」は設置・設定が無事に終われば、アクセス効率も下がらず良い仕組みです。
ですが、phpファイルも.htaccessもscriptもミスをするとサイトのデザインが狂ったり、アクセスが出来なくなるので注意が必要です。
失敗した場合、慣れていない方には原因の切り分けも難しいでしょう。
バックアップをしないと、最悪すべて白紙…と言う場合も…

この方法は、上級者向けですね。
この理由から5番になりました。

 

最初に書きましたが、今回はワードプレスで使用することを前提にした結果です。
サイトで対応する場合は、個人的には「Retina.js」がおすすめです。

 

ワードプレス Plugin WP Retina 2Xの設定

ワードプレスの4K(Retina)対応用のプラグイン。
ワードプレスユーザーに限定すると、一押しの方法です。

しかし、これを書いている時点(2015年3月)では、解説サイトもtutorialも少ないので、私が知っている範囲内で「WP Retina 2X」の使い方を説明します。

 

 プラグイン > 新規追加 > WP Retina 2Xをインストールして有効化します。

まずは、設定 > Retina > Basicsで生成しないサイズを指定します。

このプラグイン、画像に合わせて最大13種類の大きさの画像を自動的に作ってくれちゃうんですね。
でも、実際にはそんなに何種類も要りません。
その為、先に使わないサイズの画像を生成しないよう、ここでサイズをチェックして、無駄を省きます。
特になければAuto Generateにチェックをいれます。

(Generate retina images automatically when images are uploaded or re-generated.
The ‘Disabled Sizes’ will be skipped.
訳:画像がアップロードまたは再生成されたときに自動的にRetinaの画像を生成します。『無効なサイズ』はスキップされます)

WP Retina 2x basic

 

Advanced では初期値でPicturefill(Recommended)にチェックがはいっています。
WP Retina 2XではPicturefill(Recommended)が推奨となっています。

picturefill0

 

Pro では設定はありません。

With the Pro version, full support for the Full Size Retina will be added. You will also get a new and nice pop-up window with more Details in the Retina dashboard. It is only 5$ a year and works for up to 5 websites.
訳:フルサイズのRetina画像のサポートが年間5ドルで5つのサイトで使用できます。

WP Retina 2x pro

 

これで今後の画像ファイルはアップロードする都度、対応サイズが自動で生成されます。

次に、既存のファイルがある方は次の手順で生成しましょう。

メディア > Retina > 生成したい画像ファイルのGENERATEをクリックします。

WP Retina 2x 10

 

画像が生成されました。
詳しくはProモードでしか表示されません。

WP Retina 2x 11

 これで終了です。

 

 まとめ

 独自にランキング形式でまとめましたが、初心者から中級者向けを想定して考えた結果です。
設置・設定の手間と、今後の画像更新の手間を加味して総合的に判断しました。

ただし、今後は4Kが主流になるでしょうから、それに伴って新しいやり方が出てくるのは間違いないと思います。
この記事の内容は、あくまでも2015年3月時点でのものですので、ご了承ください。

あなたのサイトを4K(Retina化)する際の参考にして頂けると嬉しいです。
まだこの分野は情報が少ないので、ご参考に意見がいただければ幸せです。

管理人の別サイトもWP Retina 2Xで4K/レティナ(Retina)対応にしています。

一方で、ここ4K対応素材「プラス」のサイトは、小さな画像も多数ある為に、Retina.js(retina.min.js)とsrcsetタグの両方で対応していく方針です。
素材サイトであり4Kに関する記事を書いているので、画像落ちさせる訳にもいきませんからね。
面倒ではありますが、両方を使うようになってから動作は安定しています。

 

参考:Retinaを日本語表現にすると<レティナ>となります。
結論として<レティナ>を用いるようにします。

 

 

更新を 続ける糧は コメントだ
あなたからのひとことをお待ちしています。

お探しの画像は見つかりましたか?
他にもこんな画像もございます。

ビジネス素材風景花

空事務用品 お金 その他

コメントを残す

メールアドレスが公開されることはありません。