ワードプレスで画像をWebPに変換する方法を紹介します!

WebPに変換する方法の紹介coding

みなさんこんにちは。takato@enjoying_freeです!

WebPという言葉を聞いたことがありますでしょうか?

最近web業界で話題になっている言葉で、画像ファイルの拡張子のことを意味します。

画像の拡張子で有名なのはJPEGやPNGなどありますが、WebPに移行する人が増えています。

今回はWebPとはどういった拡張子なのかと、ワードプレスにアップロードしている画像の拡張子をWebPに変換する方法を紹介します!

WebPとはどういう拡張子なのか

WebPとは、Googleが開発した画像の拡張子です。

サイト速度を向上させるために開発された拡張子で、最近では「次世代フォーマット」と呼ばれています。

しかしWebP自体は2010年から存在していたみたいです。

当時はまだWebPが対応されているブラウザが少なかったため、あまり浸透されなかったそうです!

WebPはサイト運営者にとってメリットのある拡張子となります。

メリット1 画像ファイルを軽量化出来る

一つ目のメリットは画像ファイルを軽量化することが出来ます。

WebPは、JPEGやPNGの画質を保ちつつ画像ファイルを軽量化することができます。

WebPにする事で、JPEGを25〜34%軽減する事が出来ます。(参照)

これがwebPを使用する最大のメリットです。

メリット2 アルファチャンネル対応

2つ目のメリットは、アルファチャンネルに対応しているという点です。

アルファチャンネルとは、画像背景を透明にすることで、WebPはその機能に対応しているのです。

アルファチャンネルに対応していない画像の場合、画像(要素)の背景は白色になり、透明にすることが出来ません。

アルファチャンネルに対応していない拡張子はJPEGが有名です。

反対にアルファチャンネルに対応している拡張子は、PNGが有名です。しかしPNGは容量を多く使用するため、web制作ではなるべく使用しないように言われております。

ですがWebPを使用すれば少ない容量で画像背景を透明にすることが出来ます。

デメリット 対応ブラウザが少ない

2010年に比べれば多くのブラウザが対応されましたが、IEとsafarisは現在も対応されておりません。
※2021年4月現在 ※参照 https://caniuse.com/webp

特にSafariは多くのスマホユーザーに使用されているため、この点がデメリットとあげられます。

現在はwebサイトの高速化が重要視されておりますので、WebPは今後も注目されると思います。

ワードプレスの画像をWebPに変換する方法

ワードプレスで画像の拡張子をWebPにする方法を紹介します。

EWWW Image Optimizer」というプラグインを使用します。もしEWWW Image Optimizerを使用していない場合はプラグインをインストール&有効化してください。

EWWW Image Optimizerの「基本」の下に、「WebP 変換」という項目があるので、選択してください。

項目を選択すると、下記のコードが現れます。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webpz

このコードを、ワードプレスの「.htaccess」ファイルの1番上に記入すれば完成です。

.htaccessファイルの編集方法は、サーバーで行うことが出来ます。

今回はさくらのレンタルサーバー上で.htaccessファイルを編集する方法を紹介します。

コントロールパネルに入り、ファイルマネージャーを選択します。

ファイルマネージャーの.htaccessファイルをダブルクリックします。.htaccessファイルはWPフォルダのすぐ下に存在しています。

ダブルクリックすると、左下のプレビューにコードが反映されます。そしたらペンマークの「編集」をクリックしてください。

上記のコードをファイルの1番上にコピペして、保存すれば完了です。

上記コードを.htaccessファイルに記入することが出来たら、EWWW Image Optimizerの下部がWebPと緑色に変わっていると思います。

このようになれば画像がWebPに変換完了です。

既存の画像をWebPに変換する方法

先程の作業では、今後アップロードする画像がWebPになるという設定でした。

しかしほとんどの方が既に画像をアップロードしているかと思います。

そのため既存の画像をWebPに変換する必要があります。

やり方は、「メディア」の「一括最適化」で全ての画像をWebPに変換することが出来ます。

画像数が多い場合は、変換作業に時間がかかるので注意ください。

最後に

以上がワードプレスの画像をWebPに変換する方法の紹介でした。

最近ではサイトの軽量化がSEOにおいて重要視されています。

画像の軽量化はサイトの軽量化に直結するので、まだ拡張子をWebPに変換していない方は是非変換してらみてください!