jpegやpng画像を一瞬でWebpに！「Converter for Media」の使い方

Webpとは？

Webpとは、Googleが開発したWebサイトの高速化に対応した画像形式です。

jpegやpng形式の画像をWebpに変換することで容量が軽くなり、Webサイトを表示させる速度が速くなります。

jpegやpng形式の画像をWebpに変換することは、SEO対策に有効な手段の1つとなっています。

Convertion for Mediaの使い方

ここからは、jpegやpng形式の画像を簡単にWebpに変換してくれる「Converter for Media」の使い方について紹介していきます。

①プラグインの新規追加から「Converter for Media」と検索、インストール&有効化

まず、プラグインの追加にて検索窓に「Converter for Media」と打ち、下のようなプラグインが表示されたらインストールし、有効化を押します。

有効化されたら、設定の箇所に「Converter for Media」の欄が追加されます。

②一般設定から対応ディレクトリーを選択

有効化できたら、一般設定から設定をしていきます。

対応する出力フォーマットは、WebpのみでOK。

AVIFというのは、高圧縮率と高画質を両立した画像ファイル形式のことですが、こちらは有料版でないと利用できません。

対応ディレクトリも、基本的に画像が入っているディレクトリを指すuploadsを選択するだけで良いです。

オリジナルテーマを使用していて、phpファイルの中に画像パスを指定している場合は、themeも選択しましょう。

そして、設定をした後に更新される記事内の画像も変換できるように

「新しい画像の変換」にチェックを入れて、変更を保存します。

デフォルトですでになっていますが、下の画像のような設定になっていたら次に進みましょう。

③画像の一括最適化を行う

続いて、画像の一括最適化を行っていきましょう。

先ほどの設定の下に、画像のような項目がありますので

初めて変換する場合は、「全画像を強制的に再変換する」にチェックを入れて、

（2回目以降はチェックを外しましょう。）

そして、「一括最適化開始」を押すと、プラグインがWebp最適化を行ってくれます。

画像の形式の確認方法

これでWebp最適化の設定は完了ですが、本当にWebp形式になって軽量化されているか気になった場合は、以下の方法で確認することができます。

①検証ツールを開く

まずは調べたいページにいき、Controlを押しながらクリックをし、出てきたメニューの中から「検証ツール」を選択して検証ツールを開きましょう。

Windowsの人は、右クリックするとメニューが出てくるかと思います。

また、Macの場合はOption + Command + I、Windowsの場合はOption + Control + I でも開くことができます。

②「NetWork」を表示し、「webp」と記載されていれば無事に変換されている

検証ツールを開いたら、最初は「Element」が選択されていると思いますので、「Network」を選びましょう。

表示されていない人は、右の方にある「>>」のマークを押すとNetworkと書いてある項目が出てきますので、そこを選択。

Networkの中のimgを選択し

画像のように、Type欄でwebpと記載されていれば無事変換されています。

もし、Networkを選択した場合に画面が切り替わらない場合は、「Reload page」の部分をクリックすると表示されます。

Webpに変換されていない場合

検証ツールのNetworkで確認してみても、Webpに変換されておらず、jpegやpngのままになっている画像もあります。

そんな場合は、jpegやpngの画像を別のツールでWebp形式に変換し、その画像がある階層と同じ階層にWebpファイルをアップロードすると解決することが多いです。

まず、下のようなサイトでjpegやpngの画像をWebp形式に変換します。

https://saruwakakun.com/tools/png-jpeg-to-webp

使い方は、変換したい画像を読み込ませて、ダウンロードボタンを押すだけです。

Webp化できたら、元画像があった階層と同じ階層にWebpファイルをアップロードします。

元画像が存在する階層を調べるには、Networkで画像の名称部分をクリックします。

自分が契約しているサーバーのファイルマネージャーで、同じ階層にいきWebp画像をアップロードし、ページをリロードすることで

きちんと、Webpに変換されます。

最後に

ということで、今回はjpegやpng形式の画像を、一瞬でWebpに変換してくれるプラグイン「Converter for Media」について紹介しました！

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ

フォロー数やいいね数が増えるかもしれません！