WordPressのRetina対応まとめ

WordPressでRetinaディスプレイに対応するためのメモまとめ。

Retina対応の方法

HTML5のレスポンシブイメージを利用する方法

HTML5のレスポンシブイメージには、次の2種類がある。

  • srcset属性 (現行のHTML5で定義済み)
  • picture要素とsource要素 (HTML5.1のNightlyで定義)

JavaScriptなど組み込む必要がなく、画像も環境に応じたものを1枚読み込むだけで良いが、対応しているブラウザが現状では非常に限られている。

ブラウザ srcset属性 picture要素
Internet Explorer × ×
Firefox △ △
Chrome ○ ○
Safari ○ ×
Opera ○ ○

srcset属性はChrome、Safari、Operaが対応済み、picture要素はChromeとOperaが対応済み。Firefoxでは一応srcsetとpictureともに実装しているが、利用するには次の設定変更が必要。

  • dom.image.picture.enabled
  • dom.image.srcset.enabled

デフォルト状態では使えないので、事実上Firefoxでは未対応と思って良い。

Retina.jsを利用する方法

JavaScriptライブラリのRetina.jsを読み込むと、自動的にディスプレイのタイプを判別して適切な画像を読み込んでくれる。ただし、HTMLで読み込んだ後にJavaScriptで再度読み込むことになるので、閲覧側の通信量は増える。

Picturefillを利用する方法

JavaScriptライブラリのPicturefillを利用すると、HTMLを動的に書き換えてpicture要素やsrcset属性を埋め込んで、適切な画像を読み込んでくれる。ブラウザがレスポンシブイメージに対応していない場合には、Retina.jsと同様にJavaScriptで画像を上書きして読み込む。

Retina Imagesを利用する方法

PHPライブラリの「Retina Images」を利用し、画像読み込み時にretinaimages.phpをかぶせて適切な解像度の画像を選択して表示することができる。

ただし設定がやや面倒。

WP Retina 2xを利用する方法

WordPressプラグインの「WP Retina 2x」を使えば、自分でJavaScriptを組み込まなくても手軽にRetina対応ができる。

上記のPicturefill、Retina.js、Retina Imagesを内蔵していて、設定で選択して使用する。アップロード時に自動的にRetina用画像を生成することも可能。

Retina用の画像作成

Retina Images for WordPressを利用する方法

「Retina Images for WordPress」プラグインを使うと、アップロード時にサムネイルを含めてRetina用の画像を作成してくれる。

functions.phpにコードを追加する方法

プラグインを使わず、functions.phpに直接コードを記述する方法でも、Retina用画像の自動生成は可能。

cf. 「WordPress マルチサイトでのRetina対応を考える」 (Eternity Design)

既存の画像にRetina用画像を生成する方法

プラグイン「Force Regenerate Thumbnails」を使うと、既存のファイルのサムネイルをまとめて再作成可能。

参考URL

タイトルとURLをコピーしました