悩む人JPEG（JPG）やPNGの画像をWebPに変換してページの表示速度を上げたいです。そのために「Converter for media」プラグインを導入したいんだけど使い方が分からない。
こういった疑問にお答えします。
本記事で学べること
- WebPの特徴
- Converter for mediaの特徴
- Converter for mediaの使い方
- 画像がWebPで読み込まれているかの確認方法
- ページの読み込み時間を計測するツールが手に入る
是非、最後までご覧ください。
Converter for mediaの使い方を解説する前に「WebP」の特徴を紹介します。
WebPの特徴
- 「Googleが開発した次世代の画像フォーマット」です。
※元の画質を維持したままファイルサイズを軽量化することができます。 - Google（https://developers.google.com/speed/webp）によれば、ファイルサイズがPNG画像よりも26％縮小され、JPEG（JPG）画像よりも25〜34％縮小されます。
※ページの表示速度の高速化が図れます。 - 「非可逆圧縮」と「可逆圧縮」のどちらにも対応しています。
- PNGやGIFのように背景を透過することもできます。
- GIFのようなアニメーションにも対応しています。
WebPと他の画像フォーマットとの比較
| 画像フォーマット | 圧縮方法 | 元の画質 | 圧縮による画質 | 圧縮によるファイルサイズ | 背景透過 | 元の画質に戻せる | アニメーション | 保存 |
|---|---|---|---|---|---|---|---|---|
| WebP ウェッピー | 非可逆圧縮 可逆圧縮 | 1677万色 | 圧縮前と同じ | 超軽い | 繰り返しても画質は劣化しない | |||
| JPEG（JPG） ジェイペグ | 非可逆圧縮 | 1677万色 | 圧縮前との違いが分からないくらい | 軽い | 繰り返す度に画質が劣化する | |||
| PNG ピングまたはピン | 可逆圧縮 | 256色〜1677万色 | 圧縮前と同じ | 重い | 繰り返しても画質は劣化しない | |||
| GIF ジフ | 可逆圧縮 | 256色 | 圧縮前と同じ | 軽い | 繰り返しても画質は劣化しない |
対応ブラウザ
主要ブラウザ（GoogleChrome、Microsoft Edge、Safari、Fire Fox）のほぼ全てでWebPに対応しています。
使い方の解説をする前に「Converter for media」の特徴を紹介します。
- 対応ブラウザではWebPを表示します。
- 非対応ブラウザでは元形式の画像（JPEG/JPG、PNG）を表示します。
- 画像アップロード時に自動でWebPに変換してくれます。
- 既存の画像もWebPに一括変換が可能です。
- テーマ・プラグイン内の画像もWebPに変換が可能です。
※Adsense広告の画像まではWebPには変換されません。 - WebPに変換された画像は別ディレクトリ（/wp-content/uploads-webpc/）に保管されるため、元画像は保持されます。
※すでにアップロードしている画像のリンクが変更されることがないです。 - プラグインを無効化すると元形式（JPEG/JPG、PNG）の画像を表示します。
- 日本語翻訳が使えるため設定に対するストレスが少ないです。
【WebP】Converter for mediaの使い方を解説します。
プラグインを導入します。
管理画面メニューから、「プラグイン」＞「新規追加」を選択します。
「プラグインの検索…」にプラグイン名を入力します。
下記を入力用として置いておきますので必要な方はお使い下さい。
設定を行います。
管理画面メニューから、「設定」＞「Converter for media」を選択します。
「Converter for media」が表示されました。
※日本語に翻訳しています。
「General Settings（一般設定）」から行っていきます。
General Settings（一般設定）
※日本語に翻訳をしています。
デフォルトのままでOKです。
デフォルトのままでOKです。 ※AVIFはプロ仕様にアップグレードすると利用可能になります。
「/アップロード」はデフォルトでチェックが付いています。
ここは好みになってくるかと思いますが、僕はどちらにもチェックを入れました。
WebPに変換された画像の保管場所
| 対象のディレクトリ | 対象のファイル | 画像の保管場所 |
|---|---|---|
| /plugins | プラグイン内画像 | 「サイトドメイン」＞「public_html」＞「wp-content」＞「uploads-webpc」 |
| /themes | テーマ内の画像 | 「サイトドメイン」＞「public_html」＞「wp-content」＞「uploads-webpc」 |
| /uploads | メディアライブラリ内の画像 | 「サイトドメイン」＞「public_html」＞「wp-content」＞「uploads-webpc」 |
プロ仕様にアップグレードすると利用可能になる機能ですので気にしなくてOKです。
ここまでの変更内容を保存します。
「変更内容を保存」すると最適化できるファイルのリストが追加されます。
Advanced Settings（高度な設定）
※日本語に翻訳しています。
デフォルトのままでOKです。
「.gif」は、WebPには変換できますが、静止画になるため、チェックは付けていません。
デフォルトのままでOKです。 ※リモートサーバーはプロ仕様にアップグレードすると利用可能になります。
デフォルトのままでOKです。
デフォルトのままでOKです。
デフォルトのままでOKです。
変更を加えていなければ飛ばしてOKです。
「一括最適化を開始」をクリックしてWebPへの変換を開始します。
WebPで読み込まれているか確認します。
※Google Chromeで検証しています。
⌘+Option+I （WinではCtrl+Shift+I）でディベロッパーツールを開き、「Network」＞「img」を選択後にスパーリロード⌘+Shift+R（WinではCtrl+Shift+R）します。
Type（赤枠）を確認すると、変換されていない画像もありますが、ほとんどがWebPに変換されています。
「PageSpeed Insights」でページの読み込み時間を確認します。
携帯電話
測定後、「次世代フォーマットでの画像の配信」が0.75sから0.15sへと短縮され、パフォーマンスのスコアも向上しています。
デスクトップ
測定後、「次世代フォーマットでの画像の配信」の0.2sが無くなりました。
以上で解説を終わります。
本記事が読者の疑問を解決する役に立つと幸いです。
最後まで読んで頂きありがとうございました。
おわり。