WP Retina 2Xプラグインで4k/レティナディスプレイを切り替える

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

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

デメリットはフルサイズ(2280×19998)の対応は有料です。
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の画像を生成します。『無効なサイズ』はスキップされます）

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

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つのサイトで使用できると書いてあります。

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

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

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

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

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

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