2024
7/25
WordPressでWebPを使う方法
目次
WordPressで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」を選択してください。
こちらで各種設定を行います。
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評価を上げるために頑張りましょう!