WordPress

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

投稿日:2015年3月4日 更新日:

私にはもう一つのサイトがあります。

それが4Kに対応した素材サイト「プラス」です。

4K対応素材 プラス(PLUS)

このサイトを立ち上げてから、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を日本語表現にすると<レティナ>となります。
結論として<レティナ>を用いるようにします。

 

 

楽天セレクトギフト
楽天セレクトギフト

-WordPress
-, ,

執筆者:


  1. よね より:

    WordPressでサイト運用をしておりまして、
    Retina対応方法を調べていてもやり方がいくつもあり迷っていたところでした。
    こちらのページがとても分かりやすく整理もできました、ありがとうございます。
    自分は、WP Retina 2Xで対応進めてみます。

    • ビジネス慶 より:

      よねさん
      コメントありがとうございます。
      今後もよろしくお願いします。

      質問などいつでも受け付けています(^^)

  2. ちょこぽてこーら より:

    はじめまして。
    WordPressでサイトを運営している者です。
    サイト上の画像がスマートフォンで劣化してしまう理由が分からず、ネットで検索している間にこちらのサイトにたどり着きました。
    初心者の私にとって、WP Retina 2Xに関する記事はとても参考になりました。
    記事に沿ってプラグインを導入したところ、スマホ上で画像の劣化も発生しなくなったようです。
    ありがとうございました。

    • ビジネス慶 より:

      ちょこぽてこーらさん
      コメントありがとうございます。

      お役にたてて幸いです。
      無料画像もいっぱいありますのでお使いくださいね。

comment

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

関連記事

初心者向けWordPress講座、始めました

今まで色々な方にWordPressやネットビジネスの事で アドバイスをしてきましたが、余りにもWordPressで 困っている人が多い事を知ったので、初心者向けの WordPressの講座を始めました …

Googleについて考えてみる第3回(6つの教訓)

Google6つの教訓   1.何よりも製品が大事 製品こそが会社の顔であり、 すべてはまずいい製品をつくってから かんがえるべき。 サイトを例にとってみます。 成功しているサイトをよく観察 …

FFFTPソフトの初期設定の仕方

FFFTPと言うアップロードソフト。 無料ながら非常に便利なソフトで、もう何年もお世話に なっています。 WordPressを使う上ではあった方が楽なので、簡単では ありますが、初期設定の仕方について …

WordPress Schoolのマニュアルを一新

発売中の「個別指導のWordPress School」ですが、 モニターや受講生の方から色々とご指摘を頂いたので、 マニュアルの内容を一新しました。 と言うか、多くが画像の追記です。 文章だけではわか …

Googleについて考えてみる第4回(6つの教訓/後半)

Google6つの教訓 後半   4.明確な目標と集点の絞り込みが大事 Googleにはミッションステートメント (起業理念)がはっきりしている。 【僕たちの第一の使命は、世界の情報を整理し …

プロフィール

料理人慶(ビジネス慶)と申します。
Windows3.1にはじまりWin95と続きMacOSXに至ります。パソコンを仕事につかってお客様のサポートまで仕事になりました。現在はフリーで仕事をしています。今はソーシャルメディアに没頭中。このブログを訪問してくれる読者さんが困っていることを探して紹介していきます。現在はMacが左でWin7が右で仕事して、IT情報をいかにわかりやすくするかにこだわって記事を書いています。料理は30年の誰にも習わない我流。週末料理当番で作った料理をメインにのせていきます。ツッコミ、ご意見いつでも連絡ください。

詳しいプロフィール

慶チャンネル