WordPressの画像をWebP(ウェッピー)に変換するプラグイン
![Webpに変換](https://popo-design.net/wp/wp-content/uploads/2022/08/webp.webp)
Webサイトの表示速度を上げるため、画像をGoogleが推奨している画像形式「WebP(ウェッピー)」へ変換しました。初めて聞いた時はチャッピーみたいな響きでカワイイ♪(^^)と思ったものです。
平たくいうと、画質を下げずにファイルサイズを小さくしてくれるという画像形式です。
前々から気になっていたのですが、Webp非対応だったInternet Explorerがサポート終了になったのもあり、積極的に導入してます。表示速度は小さな影響ですが、ユーザーの離脱率にも大きく関係して検索エンジンの順位にも影響が出てくるためです。
今回使用したのは「Converter for Media」(旧:WebP Converter for Media)というプラグインです。これを使えば既存のJPGやPNG画像も、これからアップロードする画像もWebPに変換してくれます。
Converter for Mediaプラグインの使い方
WordPress管理画面左メニューの「プラグイン」→「新規追加」→右上の検索窓から「Converter for Media」と入力すると、該当のプラグインが出てくるので「インストール」ボタンを押します。
![WebP Converter for Mediaをインストール](https://popo-design.net/wp/wp-content/uploads/2022/08/webp1-1024x441.webp)
インストールしたら「有効化」をクリック。
![有効化](https://popo-design.net/wp/wp-content/uploads/2022/08/webp2.webp)
「プラグイン」→「Settings」をクリックして設定する。
![Settings](https://popo-design.net/wp/wp-content/uploads/2022/08/webp3.webp)
設定をしていきます。画像は/upload内に入るので、基本的にはほとんどそのままで良いです。/themes内にも画像をたくさん入れているようならチェックを入れます。私は入れませんでした。
![](https://popo-design.net/wp/wp-content/uploads/2022/08/webp4.webp)
「GD」を選択します。
![GD](https://popo-design.net/wp/wp-content/uploads/2022/08/webp5.webp)
画質を選びます。85%のままで良いです。もっと容量を圧縮したければ、パーセントを下げます。下げるほどファイルサイズが小さく軽くなりますが、画像が劣化していきます。
![85パーセント](https://popo-design.net/wp/wp-content/uploads/2022/08/webp6.webp)
設定を変えたら「Save Changes」を押して保存します。
![SaveChanges](https://popo-design.net/wp/wp-content/uploads/2022/08/webp7.webp)
「Force convent all images again」を右へチェックを入れて、「Regenerate All」で画像をWebpに変換します。
![Regenerate All](https://popo-design.net/wp/wp-content/uploads/2022/08/webp8.webp)
しばらく待っていると、表示が100%になれば完了です。
![Webpに変換完了](https://popo-design.net/wp/wp-content/uploads/2022/08/webp9.webp)
ブラウザで表示を確認する
画像がWebpに変換されたかどうか確認します。GoogleChromeブラウザでWebサイトを表示して、右クリックから「検証」を押すとソースコードが色々表示されます。
上部の「Network」を押すと、下のTypeの欄に「Webp」に画像が変換されたのが分かります。
![Webpに変換された](https://popo-design.net/wp/wp-content/uploads/2022/08/webp10.webp)
動きをつけているGif画像はWebpに変換はできないのでそのままです。
実際の表示速度をチェックしてみる
Googleが提供している「PageSpeed Insights」でホームページのアドレスを入力して実際のページの表示速度をチェックしてみます。
以下はWebpに変換する前。
![速度テスト前](https://popo-design.net/wp/wp-content/uploads/2022/08/webp11.webp)
Webp変換後。特にモバイルの表示速度が上がりました!
![速度テスト後](https://popo-design.net/wp/wp-content/uploads/2022/08/webp12.webp)
「次世代フォーマットでの画像の配信」の項目がWebpに変換すると無くなりました。
![次世代フォーマットでの画像の配信](https://popo-design.net/wp/wp-content/uploads/2022/08/webp13.webp)
まとめ
表示速度による影響は微々たるものですが、ページが表示されるのにモタモタしていたらすぐに離脱されそうですし、速いにこしたことはないですね。
この調子で順次他のサイトもWebpに変えていきます。
[公開日] 2022年8月8日 / [最終更新日] 2022年12月14日 / カテゴリー:WEBマーケティング,WordPress
同じカテゴリーの記事
-
ホームページを名刺として使う集客方法【実店舗向け】
ホームページを作ったけれど、本業が忙しくて更新する時間がない、管理する時間もない。かといって制作会社に毎月更新代行費用を [続きを読む]
-
無料から使えるアクセス解析ツール【ヒートマップ User Heat】
サイトの訪問者数を調べるアクセス解析ツールはグーグルアナリティクスが有名ですが、「数値だけ見てもよくわからない」という方 [続きを読む]
-
グローバルメニューは日本語か英語のどちらが良いか
グローバルメニューは、ホームページの上や横に付いているページ一覧のことです。今回はこれが日本語と英語どちらが良いのかを実 [続きを読む]
-
有限会社大市米穀酒販店のIT相談に行ってきました
西宮商工会議所からのご依頼で、門戸厄神駅から徒歩すぐにある「有限会社大市米穀酒販店」のホームページの相談に行ってきました [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)