Flying Images：画像をCDN経由でWebPに変換＆配信できる
画像を無料の CDN 経由で WebP に変換＆配信できる WordPress 用プラグインの紹介です。
それは「Flying Images by WP Speed Matters」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Flying Images by WP Speed Matters
Flying Images は、画像ファイルを CDN 経由で WebP に変換＆配信できます。
Flying Images の主な特徴は、以下の通りです。
- 無料の CDN を静的に使用し動作します。
- CDN は Cloudflare（プレミアムネットワーク）、BunnyCDN、Fastly、CDN77 を搭載。
- 画像ファイルを CDN 経由で WebP に変換＆配信。
- CDN を介して画像を圧縮します。圧縮時の品質レベルを設定可。
- Web ブラウザがサポートしている場合、画像を CDN 経由で WebP に変換して配信。
- レスポンシブ／アダプティブイメージのサポート。デバイスに応じてサイズ変更された画像を配信する srcset を作成可。外部画像もサポート。
- Web ブラウザーのネイティブ遅延ロードを使用しての画像遅延読み込みが可能。
- JavaScript 経由での画像遅延読み込みも可能。
- インライン化された背景画像の遅延読み込みもサポート。
ページを開くたびに、Flying Images によってページが解析されるので、
キャッシュプラグインを使用することを強くお勧めします。
Flying Images の作者は、以下のプラグインも公開しています。
Flying Pages:ページをプリロードできます。
Flying Scripts:JavaScript の実行を遅らせる事ができます。
Flying Analytics:Google Analytics をローカルサーバーでキャッシュできます。
記事を作成もしくは更新時点でのバージョン：2.4.7
インストール手順
Flying Images をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Flying Images – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Flying Images」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Flying Images を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
管理画面の「設定」メニューの中に追加されています。
使い方
有効化するだけで Flying Images の全ての機能が動作します。
特に画像は、Web ブラウザがサポートしている場合、その場で WebP に変換されます。
遅延ロードや画像圧縮等で必要があれば、設定を変更しましょう。
設定
Lazy load
- Enable lazy loading
遅延ロードを有効にするかどうか。 - Lazy load method
遅延ロードの方式を選択します。 - Bottom margin
ビューポートの下部からのピクセル数（高いほど良い）を選択します。画面に入る前に画像をロードしたい場合に使用します。 - Exclude Keywords
遅延読み込みから除外する必要があるもののクラス名、画像 URL、データ属性などを指定できます。1 行に 1 個のキーワードを追加します。
CDN
- Enable CDN
静的に CDN https://statically.io/ を使用して画像を配信するかどうか。 - Exclude Keywords
CDN の配信から除外する必要があるもののクラス名、画像 URL、データ属性などを指定できます。1 行に 1 個のキーワードを追加します。
Purge files from CDN:
CDN からファイルをパージできます。
Responsiveness
- Enable responsive images
srcset を使用してレスポンシブ（アダプティブ）画像を配信するかどうか。
Compression
- Enable Compression
CDN を経由して画像を圧縮するかどうか。 他のプラグイン等を使用して画像を既に圧縮している場合には、オフにできます。 - Compression Quality
圧縮品質レベルを選択します。
WebP
Images are converted to WebP on the fly if the browser supports it. You don’t have to do anything：
ブラウザがサポートしている場合、画像はその場で WebP に変換されます。 何もする必要はありません
代替プラグイン
Flying Images にほしい機能が無かった場合には、
Flying Images 以外にも画像を WebP 形式に置換できるプラグインを記事にしています。
以下では、Flying Images を含めて 2 個を簡単に紹介しています。
画像をWebP形式に置換できるWordPressプラグイン一覧
Flying Images 以外にも遅延ロード（遅延読込）できるプラグインを記事にしています。
以下では、Flying Images を含めて 9 個を簡単に紹介しています。
遅延ロード（遅延読込）できるWordPressプラグイン一覧