画像を軽量化するために、Googleが開発した「WebP」形式を利用したいと考える方も多いでしょう。
しかし、WebPは古いブラウザに対応していないため、直接使用するのは難しいのが現実です。
WebPに対応したブラウザにはWebP画像を、未対応のブラウザには従来の形式(JPEG等)の画像を配信するのが理想的です。
とはいえ、こうした振り分けを手動で行うのは開発者でも困難です。
だからこそ、プラグインの利用がおすすめなんですね。
「WebP Converter for Media」の紹介
画像引用元:Webp Converter for Media 公式
この問題を解決するために、「WebP Converter for Media」というプラグインを紹介します。
これにより、画像を自動的にWebPに変換し、ブラウザによって適切な形式で画像を配信することができます。
WebPとは?
WebPは、Googleが開発した画像フォーマットで、以下の特徴があります。
- 非可逆圧縮(JPEGと同様)
- 高い圧縮率(非常に軽量)
- 背景透過対応
- アニメーション対応
高性能で軽量ですが、IEなどの古いブラウザでは対応していないため、WebPだけを使うのは現実的ではありません。
主要なブラウザは現在対応していますが、対応状況については最新情報を確認してください。
「WebP Converter for Media」の機能概要
「WebP Converter for Media」は、WordPressサイトの画像をWebPに対応させる優れたプラグインです。
主な機能は以下の通りです。
- 対応ブラウザにはWebPを表示
- 非対応ブラウザには元形式(JPEG等)を表示
- 画像アップロード時に自動でWebPに変換
- 既存の画像も一括でWebPに変換可能
- テーマやプラグイン内の画像も変換可能
- プラグインを無効化すると元形式の画像を表
変換した画像は、/wp-content/uploads-webpc/ディレクトリに保存されます。
プラグインのインストール
「WebP Converter for Media」をインストールする方法は簡単です。
WordPressの管理画面から検索してインストールするか、直接ダウンロードしてwp-content/pluginsディレクトリにアップロードし、有効化します。
プラグインの使い方
プラグインを有効化した後は、「設定」>「WebP Converter」から設定画面を開きます。
基本的な設定はデフォルトのままで問題ありませんが、必要に応じて以下の設定を行います。
- Image loading mode: 「via .htaccess (recommended)」を選択
- List of supported files extensions: 変換する画像のフォーマットを選択(GIFも変換可能ですが、アニメーションは失われます)
- List of supported directories: 変換対象のディレクトリを選択(/uploads, /themes)
- Conversion method: 「GD」を選択
- Images quality: 画質を75%〜100%の間で調整(75%でも十分な画質)
設定を保存したら、「Regenerate All」で既存の画像を一括変換します。
エラーが発生した場合は、パーマリンク設定を確認し、「基本」以外を選択してみてください。
WebPで読み込まれているか確認
変換後にWebP形式で画像が読み込まれているかどうかは、ディベロッパーツールの「Network」タブで確認できます。
「img」を選択してリロードし、「Type」がWebPになっていれば成功です。
WebP画像で軽量化? まとめ
「WebP Converter for Media」を利用することで、画像をWebPに自動変換し、ブラウザに応じた最適な形式で配信することができます。
これにより、サイトのパフォーマンスが向上し、ユーザー体験も改善されます。
さらに、画像の最適化を行うことで、さらに効率的な軽量化が可能です。
最後までお読みいただきありがとうございました!
