Webで使われる一般的な画像フォーマット（拡張子）はJPEG、GIF、PNGの3つです。
ですが、いずれも80年・90年代から長く使われている画像フォーマットであり、昨今ではより軽量化されたフォーマットが使われることが増えました。その代表格がWebPとAVIFです。
WebPやAVIF形式の画像に変換することで、ページの容量は大幅に圧縮できます。ページ容量が小さくなれば、サイトの表示速度も上がります。
ただ、既にJPEG、GIF、PNGなどの既存の拡張子で画像を作ってしまっている方も多いでしょう。私もその一人です。
というわけで、既存の画像フォーマットをWebPやAVIF（PROバージョンのみ可）に変換するWordPressプラグイン「WebP Converter for Media」をご紹介します。
目次
WebP・AVIFの解説
WebPとは？
WebP（ウェッピー）、Googleが開発した画像圧縮フォーマットです。このフォーマットは、JPEGやPNGと比べて画像サイズを大きく削減できるのが特徴です。WebPは、特にウェブサイトで使用される画像に最適化されており、圧縮率が高いにもかかわらず、画質を保つことができます。
Googleが開発している画像フォーマット「.webp」です。下記の特徴があります。
- 非可逆圧縮（jpegと同じ）
- 画像の圧縮率が高い（jpegから30%程度圧縮）
- 背景透過に対応
- アニメーション（gifのような）に対応
- 主要ブラウザは対応済
Google Chrome、Safari、Firefox、Microsoft Edge、Operaなどの比較的新しいバージョンのブラウザでは対応していますが、IEや古いバージョンのブラウザでは対応していません。IEや比較的古いバージョンのブラウザをもサポートしたいなら、「WebP」形式の画像だけを直接使用することは難しい状況にあります。
AVIFとは
AVIF（エーブイアイエフ）とは、より新しい画像フォーマットで、AV1という動画圧縮技術をベースにしています。AVIFは、WebPよりもさらに高い圧縮率と画質を提供できます。
- 高効率のロスレスおよびロス圧縮が可能
- 高い画質を維持しながら、ファイルサイズを大きく削減できる。
- HDRコンテンツ対応
- WebPと同様、透明度やアニメーションもサポート
- 主要ブラウザは対応済
WebPよりも軽量ですが、ブラウザの対応はWebPの方が早いため、どちらを利用するかはブラウザの対応状況次第でしょう。
画像ファイルのフォーマットといえば、JPEGやPNGなどが思い浮かびますが、これらはいずれも90年代に生まれたものです。 そこから20年後の2010年にはWebP、2019年にはAVIFという次世代拡張子が登場しました。軽量かつ高画質な拡張子です。Web上に画像をアップする際は、軽量であること...
Converter for Mediaの機能概要
WordPressサイトの画像のWebPやAVIFに変換してくれるプラグインです。
- 対応ブラウザではWebP・AVIFを表示
- 非対応ブラウザでは元形式（JPEG等）の画像を表示
- 画像アップロード時に自動でWebPに変換
- 既存の画像も一括変換可能
- テーマ・プラグイン内の画像も変換可能
- プラグインを無効化すると元形式の画像を表示
また、変換した画像は、別ディレクトリ（/wp-content/uploads-webpc/）に保管してくれます。
プラグインのインストール
管理画面から「Converter for Media」を検索してインストールするか、下のボタンからもダウンロード可能です。ファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
また、プラグインの基本的なインストール方法は下記をご覧ください。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
使い方
各種設定を済ませて、既存の画像を一括変換するだけです。プラグイン有効化後は、画像をアップロードすると自動で変換してくれるので安心です。
「設定」>「WebP Converter」を選択し、設定画面を開きます。
各種設定を行う
下記の「Setting」で設定を行っていきます。基本的にはデフォルトの設定のままでも大丈夫です。
Image loading mode
画像を読み込む方法を設定します。推奨の「via .htaccess (recommended)」を選択します。
List of supported files extensions
変換する画像のフォーマットを選択します。GIFもWebPに変換できますが、アニメーションが失われ、静止画になりますので、ご注意ください。
List of supported directories
変換対象のディレクトリを選択します。テーマ内の画像もサイト上に表示されることが多いため、「/uploads」に加え、「/themes」にもチェックを入れておくといいですね。
| 対象ファイル | 変換した画像の保管場所 | |
| /plugins | プラグイン内の画像 | /wp-content/uploads-webpc/uploads |
| /themes | テーマ内の画像 | /wp-content/uploads-webpc/plugins |
| /uploads | メディアライブラリ内の画像 | /wp-content/uploads-webpc/themes |
Conversion method
画像の変換方法を選択します。サーバーによってはどちらかしか選択できません。
基本的には、プラグインの推奨設定である「GD」を選択しておきましょう。
Images quality
画質を75%〜100%の間で調整できます。値を小さくすると容量を削減できますが、画像が荒くなります。（75%でも画質に大きな問題はありませんでした。）
Extra features
こちらはデフォルトの設定で特に問題ありません。もし、画像をアップロードしても自動で変換されない場合は、Enable cron to convert 〜 adding imagesのチェックを外して再度動作を確認してください。
設定できたら「Save Changes」を押して、設定を保存します。
既存の画像を一括変換する
既にアップロード済みの画像を全てWebPに変換していきます。「Regenerate All」を押して、100%になったら変換完了です。
再度一括変換する際に、全ての画像（変換済みの画像を含む）を変換する場合は、「Force convert all images again」にチェックを入れてから「Regenerate All」を押してください。
「Images quality」を85%に設定したけど、75%で変換し直したい場合等にチェックを入れます。
一括変換時にエラーが表示された場合
一括変換時に下記のエラー文が表示され、正常に変換できないことがあります。
An error occurred while connecting to REST API. Please try again.
この時、パーマリンク設定で「基本」以外を選択しているかご確認しましょう。「基本」に設定していると上記のエラー文が表示され、正常に動作しないようです。
また、「基本」以外を選択しているにも関わらず、上記のエラー文が表示される場合は、一度別ブラウザ（普段使わない）でWordPressの管理画面にログインして、一括変換を実行してみてください。これで解決されることが多いようです。
WebPで読み込まれているか確認する
変換を行った後に画像がWebPで読み込まれているかどうかは、ディベロッパーツールで確認できます。
ディベロッパーツールの「Network」を開き、「img」を選択して対象を画像に絞ります。その状態のままリロード（再読み込み）すると、読み込んだ画像が一覧で表示されるので、「Type」欄をご確認ください。
下記のように「WebP」になっていたらOKです。
また、PageSpeed Insightsでも確認してみましょう。今回は画質を「75%」に設定しましたが、スコアを15ポイント上げることができました。
変換前
変換後
さらに画像容量を圧縮する
WebPに自動変換してくれるプラグインの使い方について解説しました。こちらを導入することで、かなりの容量削減に繋がりますが、変換前の画像を最適化しておくことも大切です。
下記のツールを使えば、画質を確認しながら画像のリサイズや容量削減を行えます。ぜひ、メディアライブラリにアップロードする前に画像を最適化しましょう。
WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。 当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介して...
以前、WordPressが重くなる理由としてプラグインが原因の一つであると記事を書かせていただきました。 WordPressが重い！！その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」 ただし、他にもWordPressが重くなる理由に画像...
WebP関連記事
「Web上の画像を任意の形式で保存したい」ことってありませんか？ Web上の画像には様々な形式がありますが、例えばWebP形式の画像は圧縮率が高く、サイトの高速化に大きく貢献します。 しかし、WebP形式の画像をダウンロードしても、ローカルで開けなかったり、編集できない場合があります。お...
コメント