Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」

Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」

Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」

WP Retina 2xは、Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグインです。

Retinaディスプレイに対応するためには、表示させたいサイズの2倍のサイズの画像を用意する必要があります。WP Retina 2xを使うことで、いつも通り画像をアップすればRetina対応画像を自動生成してくれるようになります。

Retinaディスプレイとは

レティナディスプレイ(英語:Retina Display)は、アップル社製製品のうち、高精細ディスプレイを搭載したモデルに与えられる名称、およびディスプレイそのものを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

引用:Wikipedia

WP Retina 2xのインストール

インストール手順は以下の通りです。

  1. WP Retina 2xをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、WP Retina 2xプラグインを有効化します。

WP Retina 2xの設定

WordPress管理画面の[設定] – [Retina]で設定を行います。

Basic

Disabled Sizes 画像生成を無効化したいサイズを選択します。
Auto Generate チェックを入れると、画像をアップロードした際に自動的にRetina対応の画像を生成してくれるようになります。チェックを入れておきましょう。
Full Size Retina (Pro) 有料版の機能なので、今回は無視します。

Advanced

Method 画像生成のメソッドを選択します。よくわからない場合はデフォルトのままで大丈夫です。
Quality 画像の圧縮率を入力します。
Debug Mode チェックを入れると、デバッグモードが有効になります。
Custom CDN Domain (Pro) 有料版の機能なので、今回は無視します。
Keep IMG SRC (Pro) 有料版の機能なので、今回は無視します。
Use Lazysizes (Pro) 有料版の機能なので、今回は無視します。
No Picturefill Script チェックを入れると、Picturefillスクリプトがロードされなくなります。
Hide ‘Retina’ column チェックを入れると、メディア配下の管理画面を非表示にします。
Hide Retina Dashboard チェックを入れると、ダッシュボードから非表示にします。
Admin in Retina チェックを入れると、管理画面もRetina対応します。
Ignore Mobile チェックを入れると、モバイルは無視されます。

Pro

このタブでは、有料版を購入した場合に、シリアルコードを入力します。

既存の画像をRetina対応する

WP Retina 2xプラグイン導入前にアップロードしていた画像をRetina対応させるには、[メディア] – [Retina]にアクセスします。

[GENERATE]をクリックすると、画像が生成されます。

Retina画像の生成

画像が生成されると、「Media Sizes Retina-ized」の色が青くなります。

Media Sizes Retina-ized

あとがき

いちいち倍のサイズの画像を用意するのは面倒なので、自動生成してくれるのはありがたいですね。サイトをRetina対応させようと検討中の方は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です