Webで使われる一般的な画像フォーマット（拡張子）はJPEG、GIF、PNGの3つです。
ですが、いずれも80年・90年代から長く使われている画像フォーマットであり、昨今ではより軽量化されたフォーマットが使われることが増えました。その代表格がWebPとAVIFです。
WebPやAVIF形式の画像に変換することで、ページの容量は大幅に圧縮できます。ページ容量が小さくなれば、サイトの表示速度も上がります。
ただ、既にJPEG、GIF、PNGなどの既存の拡張子で画像を作ってしまっている方も多いでしょう。私もその一人です。
というわけで、既存の画像フォーマットをWebPやAVIF（PROバージョンのみ可）に変換するWordPressプラグイン「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つになります。基本的には、...
使い方
各種設定を済ませて、既存の画像を一括変換するだけです。プラグイン有効化後は、画像をアップロードすると自動で変換してくれるので安心です。
プラグインの設定画面は、次のようになっています。
各種設定を行う
下記の「一般設定」ですが、基本的には初期状態のままでも大丈夫です。
赤枠3箇所を確認しておけば、他は触らなくて問題はありません。
コンバージョン戦略
ここでは圧縮強度を変更できます。多くの場合「最適化」のままでOKです。
対応ディレクトリー
変換対象のディレクトリを選択します。テーマ内の画像もサイト上に表示されることが多いため、「/uploads」に加え、「/themes」にもチェックを入れておくといいですね。
| 対象ファイル | 変換した画像の保管場所 | |
| /plugins | プラグイン内の画像 | /wp-content/uploads-webpc/uploads |
| /themes | テーマ内の画像 | /wp-content/uploads-webpc/plugins |
| /uploads | メディアライブラリ内の画像 | /wp-content/uploads-webpc/themes |
新しい画像の変換
ここは次回以降メディアにアップした画像が自動変換されるようにする設定ですので、有効（緑色）になっているか確認しておきましょう。
設定できたら「変更を保存」を押して、設定を保存します。
画像の一括最適化
既にアップロード済みの画像を全てWebPに変換していきます。「一括最適化開始」を押して、100%になったら変換完了です。
一度変換したものを再度変換したいときなどに「全画像を強制的に再変換する」をお使いください。
一括変換時にエラーが表示された場合
一括変換時に下記のエラー文が表示され、正常に変換できないことがあります。
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形式の画像をダウンロードしても、ローカルで開けなかったり、編集できない場合があります。お...
コメント