はじめに
WordPressのブログを運営しているあなた。あなたのブログの画像はどのような形式で保存していますか？
JPEGやPNGなどの一般的な画像形式を使っているとしたら、もしかしたらあなたのブログは重くて読み込みが遅いかもしれません。
そんなときにおすすめなのが、WebPという画像形式です。WebPはGoogleが開発した新しい画像形式で、JPEGやPNGよりも高品質で小さなファイルサイズを実現できます。
WebPを使うと、あなたのブログの画像が軽くなり、読み込み速度が速くなります。
それでは、WebPとはどのような画像形式なのか、WebPを使うメリットとデメリットは何なのか、そしてWordPressでWebPを使う方法について、子供でもわかるようにわかりやすく説明していきます。
WebPとは
WebPとは、Googleが2010年に発表した新しい画像形式です。WebPは「ウェッピー」と読み、ファイルの拡張子は「.webp」になります。WebPは、JPEGやPNGと同じように静止画像を保存することができますが、それらと比べて以下の特徴があります。
- JPEGよりも約30%、PNGよりも約80%も小さなファイルサイズで同じ品質の画像を保存できる。
- JPEGと同じように写真やグラデーションなどの連続的な色彩を持つ画像に適している。
- PNGと同じように透過やアルファチャンネル（半透明）をサポートしている。
- アニメーションや動画も保存できる。
WebPは、これらの特徴を持つことで、ウェブ上で高品質で軽量な画像を提供することができるためSEO対策にもなるといわれています。
WebPを使うメリット
WebPを使うメリットは、主に以下の2つです。
- 画像の品質が向上する。
- 画像の読み込み速度が向上する。
画像の品質が向上するということは、あなたのブログの見た目が美しくなるということです。WebPはJPEGやPNGよりも高圧縮率で高品質な画像を保存できるので、同じサイズの画像でも鮮明さや色彩が豊かになります。また、透過やアルファチャンネルもサポートしているので、背景や影などの細かい部分も正確に表現できます。
画像の読み込み速度が向上するということは、あなたのブログのユーザビリティが向上するということです。WebPはJPEGやPNGよりも小さなファイルサイズで同じ品質の画像を保存できるので、同じ容量の画像でも読み込み時間が短くなります。これは、あなたのブログを訪れるユーザーにとって大きなメリットです。ユーザーは待ち時間が少なくなり、快適にあなたのブログを閲覧できます。また、読み込み速度が速くなるということは、SEO（検索エンジン最適化）にも有利に働きます。Googleはページスピード（ページが表示されるまでにかかる時間）を検索順位に影響する要素として考慮しています。つまり、WebPを使うことであなたのブログが検索結果で上位に表示されやすくなる可能性があります。
WordPressを使うデメリット
WebPを使うメリットは多くありますが、デメリットもあります。その一つがWordPressを使っている場合です。WordPressは世界中で最も人気のあるCMS（コンテンツ管理システム）です。CMSとは、ウェブサイトやブログを作成・管理するためのソフトウェアです。WordPressではプラグインやテーマと呼ばれる拡張機能を利用することで、簡単に自分好みのブログを作成することができます。
しかし、WordPressではデフォルトではWebP形式の画像をアップロードすることができません。これはWordPress自体がまだWebPに対応していないからです。WordPressではJPEGやPNG以外の画像形式はセキュリティ上の理由からアップロード制限されています。そのため、WordPressでWebP形式の画像を使う場合は、プラグインやコードを使って設定する必要があります。
WebP、JPEG、PNG比較
WebPは、JPEGやPNGと比べて以下のような特徴があります。
- JPEGは、写真などの連続的な色彩を持つ画像に適していますが、圧縮すると画質が劣化します。WebPは、JPEGよりも約30%小さなファイルサイズで同じ画質を保つことができます。
- PNGは、透過やアルファチャンネルをサポートしており、ロゴやアイコンなどのシンプルな画像に適していますが、WebPと比べるとファイルサイズが大きくなりがちです。WebPは、PNGよりも約26%小さなファイルサイズで同じ透過性能を保つことができます。
- WebPは、JPEGやPNGの両方の利点を兼ね備えた画像形式です。WebPは、静止画だけでなくアニメーションにも対応しており、GIFよりも約64%小さなファイルサイズで同じアニメーション効果を保つことができます。
WordPressでWebPを使う方法
WordPress 5.8以降では、デフォルトでWebPに対応しています。WordPressのメディアライブラリにWebP画像をアップロードすると、自動的に表示されます。ただし、古いブラウザではWebPが表示されない場合がありますので、注意が必要です
それでは、WordPressでWebPを使う方法について見ていきましょう。ここでは、以下の2つの方法を紹介します。
- プラグインを使う方法
- .htaccessファイルを編集する方法
プラグインを使う方法
プラグインを使う方法は、最も簡単でおすすめの方法です。プラグインは、WordPressの機能を拡張するためのツールです。プラグインを使えば、コードの知識がなくても簡単にWebPに対応できます。
プラグインはたくさんありますが、ここでは「WebP Express」というプラグインを例に説明します。「WebP Express」は、無料で使えるプラグインで、以下の機能があります。
- JPEGやPNGの画像を自動的にWebPに変換して保存する
- WebPが表示できるブラウザにはWebPを表示し、できないブラウザには元の画像を表示する
- WebPの品質や圧縮率などを設定する
「WebP Express」の使い方は以下の通りです。
- WordPressの管理画面から「プラグイン」→「新規追加」→「プラグインを検索」に移動し、「WebP Express」と検索します。
- 「WebP Express」が見つかったら、「今すぐインストール」→「有効化」をクリックします。
- 「設定」→「WebP Express」に移動し、「操作モード」を「Varied image responses」に設定します。
- 「保存」ボタンをクリックします。
これで、「WebP Express」が有効になりました。あとは、WordPressで画像をアップロードするだけで、自動的にWebPに変換されます。また、ブラウザによって適切な画像が表示されるようになります。
.htaccessファイルを編集する方法
.htaccessファイルを編集する方法は、少し難易度が高いですが、プラグインを使わずに自分でカスタマイズしたい場合におすすめです。.htaccessファイルとは、サーバーの設定や動作を制御するためのファイルです。.htaccessファイルを編集することで、ブラウザによって適切な画像を表示するように設定できます。
.htaccessファイルを編集する方法は以下の通りです。
- WordPressのルートディレクトリ（通常はpublic_html）にある.htaccessファイルをバックアップします。
- .htaccessファイルをテキストエディタで開きます。
- 以下のコードを.htaccessファイルの末尾に追加します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
```4. .htaccessファイルを保存して閉じます。
これで.htaccessファイルが更新されました。あとは、WordPressでアップロードしたJPEGやPNGの画像と同じ名前でWebP形式の画像を作成し、同じディレクトリにアップロードします。例えば、「example.jpg」という画像がある場合、「example.webp」という画像も作成してアップロードします。このようにすると、ブラウザによって適切な画像が表示されるようになります。
まとめ
この記事では、WordPressでWebPを使う方法についてご紹介しました。WebPは高品質で小さなファイルサイズの画像形式ですが、WordPressではデフォルトでは対応していません。そのため、プラグインや.htaccessファイルの編集などの手順が必要です。そこまで難しい手順ではありませんし、一度設定すれば自動的に効果が発揮されます。ぜひ試してみてください。
コメント