takato（@n8takato）です！
WordPressで画像の拡張子をwebpに変更する方法を知りたい
この記事では上記の課題を解決します。
ここ最近、web業界ではwebpという拡張子が流行っています。JPGやPNGと同じ画像の拡張子です。
この記事では、webpという拡張子の基本的な知識と、WordPressで画像の拡張子をwebpに変更する方法を紹介します。
この記事でわかること
- webpに関する基本的な情報
- WordPressで画像をwebpに変換する方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
拡張子webpをブラウザごとに振り分けることが出来ます。詳しい方法は「【HTMLで解決】webpをブラウザごとに振り分ける方法を紹介！」を読んでください。
webpに関する基本的な情報
まずは、webpに関する基本的な情報を説明します。
webpとはどのような拡張子なのか？
webpとは、Googleが2010年に開発した拡張子です。
2010年に開発されているというところに驚きますよね。
最近有名になった理由は、webpが対応出来るブラウザが増えたからです。
ここ数年で話題となり、次世代型の拡張子とも呼ばれています。
webpを使用するメリットとは？
webpを使用するメリットは2つあります。
webpを使用するメリット
- 画像の容量を削減できる
- アルファチャンネル対応
それぞれ説明します。
画像の容量を削減できる
拡張子をwebpに変更すると、画像の容量を削減することが出来ます。
Googleが示したデータによると、拡張子webp画像は同じJPG画像の25~34%削減することが出来ます。
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
出典：Google developers
拡張子をwebpに変更するだけで容量を削減することが出来るのです。
サイトの読み込み速度が向上する？
画像の容量が削減されることで、サイトの読み込み速度が向上します。
サイトの読み込み速度が向上することで、ユーザーにもSEOにも良い影響を与えます。
アルファチャンネル対応
webpはアルファチャンネルに対応しています。
アルファチャンネルとは？
アルファチャンネルとは、画像の背景を透明にすることが出来る機能です。
拡張子JPGのようにアルファチャンネルに対応していない拡張子は、背景を透明にすることが出来ません。
しかし、webpはアルファチャンネルに対応しているので背景を透明にすることが出来ます。
ちなみに、拡張子PNGもアルファチャンネルに対応しています。
WordPressで画像をwebpに変換する方法
WordPressで画像の拡張子をwebpに変更する方法は下記の通りです。
webpに変換する手順
- プラグイン「EWWW Image Optimizer」のインストール
- .htaccessファイルにコードを入力
EWWW Image Optimizerのインストール
WordPressの画像の拡張子をwebpにするには、まずプラグイン「EWWW Image Optimizer」をインストールする必要があります。
- WordPress管理画面
- プラグイン
- 新規追加から「EWWW Image Optimizer」を検索
上記の流れでプラグインをインストールすることが出来ます。インストールが終わったら、有効化してください。
.htaccessファイルにコードを入力
次は、.htaccessファイルにコードを入力する方法を説明します。
先ほどインストールしたプラグインには、画像をwebpにするためのコードが存在しています。
- EWWW Image Optimizerの「基本」を選択
- 下の方にある「webp変換」を選択
「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ファイルの一番上に入力すれば設定は完了です。
.htaccessファイルの編集方法は、サーバーで行うことが出来ます。
さくらのレンタルサーバーで.htaccessを操作
さくらのレンタルサーバー上で.htaccessファイルを操作する方法を説明します。
コントロールパネルに入り、「ファイルマネージャー」を選択します。
ファイルマネージャーの.htaccessファイルをダブルクリックします。.htaccessファイルはWPフォルダのすぐ下に存在しています。
ダブルクリックすると、左下のプレビューにコードが反映されます。
プレビューにあるペンマークの「編集」をクリックしてください。
上記のコードをファイルの1番上にコピペして、保存すれば完了です。
プラグイン「EWWW Image Optimizer」の下部がwebpという緑色に変換されていたら無事に完成です。
WordPressで既存の画像をwebpに変換する方法
先程の作業は、今後アップロードする画像の拡張子がwebpになるという設定でした。
そのため、既にアップロードしてある画像をwebpに変換するものではありません。
既にアップロードされている画像の拡張子をwebpに変換するには、下記の手順を踏む必要があります。
- WordPressの管理画面の「メディア」を選択
- 一括最適化を選択
一括最適化の画面から、既にアップロードされている画像をwebpに変換することが出来ます。
最後に|webpに変換してサイトを軽くしよう
この記事ではWordPressにアップする画像の拡張子をwebpに変換する方法を紹介しました。
webpは画像を軽量化することが出来るので、サイトの読み込み速度を向上することができます。
まだ設定していないという方は、是非やってみてください。