4K/レティナに対応する5つの方法

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

 
当サイトの管理人とレティナ(Retina)とのきっかけは【@2x.jpg】って何?でした。

管理人はiPhoneユーザーです。
iPhone=レティナ(Retina)ディスプレイオーナーなのですがまったく無知の状態でした。
あるきっかけでRetina用のサイトをつくることになって、真剣に勉強した次第です。

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

iPhoneで画像がボケるのはレティナ(Retina)ディスプレイに対応した方法で画像ファイルが用意されていないためです。
縦横で2倍 X 2倍の合計4倍の解像度の画像ファイルを用意する必要があります。
拡張子の前に@2x【image@2x.jpg】をつけると【retina.js】で対応できると知ったからでした。

私の4K/レティナ(Retina)への挑戦は【retina.js】での切り替えからはじまりました。
調べていくと私で検証できるやり方が5種類あることに気がつきました。

当サイトで【retina.js】を、別のワードプレスで【WP Retina 2X】を、別のHTMLのデモサイトで【retina-images】を検証しました。

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

ひとつずつ紹介していきますので最後までおつきあいください。

 

I. javascript 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 

 

 

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

Retina-imagesを利用して画像を切り替える方法を紹介します。
こちらは慣れない方にはスキル的にかなり厳しい内容です。
phpファイルの作成と設置、.htaccessにリダイレクト設定を書く、
scriptを2種類対応させる。

参考サイト: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と同様にアクセスが一度で済みますのでアクセス効率が下がりません。
当サイトでは150px以下の画像の5枚以上の読み込みで画像落ちが改善しました。

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

デメリットはアップする画像ごとに記述が必要になりますので、タグうちの手間が増加するのと、タグうちが増加すると些細な打ち間違いのミスも増えて効率の低下につながります。

 

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

例えば、ブログの記事が600pxとして差し込みする画像サイズが1280x960pxとします。
4K/Retinaなら2倍以上の解像度があればいいのですからサイズ指定をすればいいわけです。

極端な言い方をすれば、画像を記事に挿入後にサイズを半分以下に指定する。
もしくはタグでwidth=”640″ height=”480″と指定します。
検証しましたが、scriptやプラグインと遜色がない程度の写り具合になりました。

 

疑問・質問はメールフォームでご連絡ください。