2024

7/25

WordPressでWebPを使う方法

wordpressで○○実装!!

2024年07月25日

2024年07月25日

SEO

WordPressでWebPを使う方法
「Webp」始めました

今回はWordPress導入サイトでのWebPの使用方法について説明します。
WebPとは??という方はまずこちらの記事をご覧ください!

WordPressサイトの画像指定は2種類

WordPressサイトでは通常のサイト通りにHTMLやCSSで画像を指定する方法と、WordPress管理画面から画像をアップロードする2種類の方法があります。

基本的にはあまり編集する必要のない固定ページなどはHTMLやCSSで指定し、記事のコンテンツで使用する画像などはWordPressの管理画面からアップロードするという使い分けになると思います。

WordPressでのWebPの指定方法

まずHTMLやCSSでのWebP指定方法は以下の記事で解説していますので、ぜひ参考にしてください。

今回はWordPressの画像をWebPにするという目的になりますが、実装するためにはWordPressプラグインを使用します。今回紹介するプラグインを使用することで、過去にWordPress上でアップロードした画像もWebPに置き換わるため、とても便利です。

「Converter for Media」

今回は「Converter for Media」というプラグインを使って、WordPressでWebP画像を使用していきたいと思います。
このプラグインは1プッシュで既存の画像がWebPに変換され、新しくアップロードされる画像についても自動的にWebP形式で保存されるという超便利なプラグインです。早速使い方の解説をしていきます。

1,「Converter for Media」をインストール

まずはプラグインをインストールしましょう。このようなロケットのアイコンです。

「Converter for Media」

次に、設定から「Converter for Media」を選択してください。
こちらで各種設定を行います。

2,「Converter for Media」設定

基本的には初期設定のまま利用すると思いますが、いくつか設定をする項目がありますので説明していきます。

まずは「コンバージョン戦略」です

このように画像の圧縮度(軽さ)は高まるが、劣化する「非可逆圧縮」と、画像が一切劣化しない状態の「可逆圧縮」の2つがあり、その中央で最適化として推奨されている圧縮率が設定できる。

「最適化」値は、ほとんどのWebサイトで最も最適な選択です。と書いてある通り、基本的には余程のこだわりがない限りは「最適化」のままで問題ありません。

続いて「対応する出力フォーマット」です

こちらでは出力フォーマットを「AVIF」と「WebP」で選ぶことができます。

「AVIF」はWebPに比べ圧縮率は高いものの、ブラウザの対応範囲の狭さとエンコードの遅さが課題になっており、総合的に見てバランスがいいのは「WebP」の方だと感じます。
「Converter for Media」ではAVIFを使うためには有料のPROにアップグレードしないといけないので、基本的にはWebPのまま使用してください。

続いて「対応ディレクトリー」です

WordPress管理画面の画像フォルダを変更している場合のみ、こちらのチェックを変える必要があります。基本的に何もしていなければ「uploads」に画像があるので、特に変更しなくて大丈夫です。

続いて「最大画像寸法」です

こちらは、WebPに変換する際に指定のサイズにリサイズしてくれるものです。
こちらも有料版のみで利用可能です。

続いて「新しい画像への変換」です

こちらは新しくアップロードした画像もWebPに変換されるようになる設定です。
初期状態ではチェックは入っていますのでそのまま使いましょう。

3,画像の変換

一番下にいくと「画像の一括最適化」という項目があります。こちらで画像の変換を行います。

「最適化できるファイルの一覧」が今現在WordPress管理画面からアップロードした画像の数です。
最初は必ず「0%をWebPに変換」と出ていると思いますので、下の「一括最適化開始」を押してください。

このように緑の枠になり、WebPに変換されました。

すでにアップロードしていた画像もWebPに変換されています。
サイトの画像がWebP形式かどうかを確認するにはこちらの記事をご覧ください。

まとめ

これでWordPressでWebPが使用できるようになりました。
引き続きSEO評価を上げるために頑張りましょう!