静岡・浜松のWebマーケティング|株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > WordPressで画像をWebP(ウェッピー)に対応する方法

ホームページ制作 WordPressで画像をWebP(ウェッピー)に対応する方法

  • このエントリーをはてなブックマークに追加

こんにちは、制作部デザイナーの杉浦です。

WebP(ウェッピー)は、PNGやJPEG、GIFの従来のファイル形式のメリットを持ちつつ、
見た目をほぼ変えずにファイルサイズを軽量化できる最新の画像フォーマットです。

サイトの表示スピードが上がるのでSEOにも期待できると言われています。

今回はWordPressでWebP化する設定方法や注意点を説明していくので、サイトスピード改善を検討している方はぜひ参考にしてみてください。
(※2022年3月30日時点)

フォーマット対応状況

JPEG2000 JPG XR WebP
Chrome × ×
Safari ×
IE(Internet Explorer) × ×
Edge ×
Firefox × ×

上記のように、IEではWebP非対応となっています。
そのため、現時点では非対応ブラウザでの画像表示を考慮したHTMLの記述が必要となります。

IEは2022年の6月にサポートの終了が決まっており、将来的にはWebPに対応していないブラウザのサポートは不要になります。

WebPに対応するメリット・デメリット

メリット

  • 画質を保ったまま画像サイズを軽量化できる
  • Webサイトの表示速度の改善につながる
  • SEOに好影響

デメリット

  • 利用できる画像編集ソフトが限られている
  • 画像を変換する手間がかかる

WordPressをWebP化する方法

主に2つの方法があります。

  • FTPでアップロード
  • プラグインを使ってアップロード

1.FTPでアップロード

1.直接WordPressの画像をWebP化してFTPにアップロードする

■XnConvert のダウンロードと使い方 – k本的に無料ソフト・フリーソフト
https://www.gigafree.net/tool/encode/xnconvert.html

■Squoosh
https://squoosh.app/

■PNG・JPEGをWebP画像に一括変換|サルワカ道具箱
https://saruwakakun.com/tools/png-jpeg-to-webp/

2.htaccessでWebPを対応させる

# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
# Rewriteモジュールを有効にする
RewriteEngine On
# WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
# その場合のみ後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp
# 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f
# *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
# Content-Typeはimage/webpにする
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>

2.プラグインを使ってアップロード

WebP対応になるプラグイン

プラグインが対応して入れば投稿した記事が自動的にWebP画像になります。

※WordPressのバージョンが5.8以上必要です。

WebPをサポートしてないケースもあるので注意が必要
https://www.hi-demi.net/13-plesk/103-plesk_webp

WebP確認方法

1.chrome拡張機能ツールで確認

無料のGoogle chromeの拡張機能ツール「WebP Highlighter」を使うと便利です。
https://chrome.google.com/webstore/detail/webp-and-avif-highlighter/aonapkfkfneahhaonjjpmcabpnbdmojl/related

2.デベロッパーツールで確認

デベロッパーツールの「Network」→「img」→「Type」をみます。
WebP変換画像であれば、「webp」と表示され、jpgやpngの場合は「jpeg」「png」となります。

3.ツールで確認

どのくらい軽量化されて表示スピードがどのくらい改善されたか確認できます。
https://sim.lightfile.net/webp/

4.保存画面から確認

画像を選択して「右クリック」→「名前をつけて画像を保存」をクリック。

ファイル名が「.webp」拡張子になっていれば、WebP変換されて保存されます。

まとめ

ここまで、WordPressにおける画像をWebPに対応する方法を紹介してきましたが、いかがでしたでしょうか?
サイトスピードを下げる要因となってる画像データは、なるべくWebP対応していくと良いかと思います。
プラグインを活用すれば、導入ハードルも低いので皆さんもぜひお試しください。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2021/06/16Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2019/02/042019年1月Google for Jobsが日本上陸!Googleしごと検索で上位表示させる構造化マークアップの実装方法とは?

  • posted on 2021/07/08初心者の私にもできた。自作パソコンの組み立てに挑戦してみた!

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

Top