ブログに載せる画像は容量が小さい方がSEOに有利って聞いたけどほんと？
ほんとだよ！今回は画像の容量をとても小さくできるwebpについて解説していくよ！
今回はブログに載せるにあたっておすすめの画像形式であるWebPについて解説してゆきます。
他の画像形式をWebP形式に変換する簡単な方法もご紹介しておりますので是非ご覧ください。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
WebPとは
WebP（ウェッピー）と読みます。Googleが開発した画像形式であり拡張子は「.webp」です。
.jpgや.png等の画像形式の一種ですね。
WebPは名前の一部にもなっている通り、Webで使う時のメリットがたくさんあります。
WebPのメリットは？
３点あります
- ファイルサイズが小さくなる
- 背景透過ができる
- アニメーションに対応
ファイルサイズが小さくなる
こちらは私が思うWebPの最大のメリットです。
WebPの開発元であるGoogleは、ほぼ同等の画質でPNGよりも約26％、 JPGより約25〜34％軽くできると発表しています。
実際に私がWeb制作をする際に使った画像で変換前後の容量を見ていただくとわかるかと思います。
変換前のpngファイルは1.1MBだったのに対し変換後74KBとなっており、約65％も容量が削減されています。
画質については目視では違いがわからないほどです。
ファイルサイズが小さくなると何がメリットになるの？
ファイルサイズが小さいとその分Webページを表示する速度もはやくなる。
表示速度の速いWebページは検索でも上位に上がってきやすいんだ。
Googleが公式に発表しているアナウンスでは、ページ読み込み速度がSEOにおいて重要な評価の1つとして含まれているため、WebPを使ってページの読み込み速度をあげることは非常に有効な方法だと考えられます。
背景透過ができる
WebPの圧縮方式は非可逆圧縮方式と呼ばれるjpgと同じ方式が使われています。
その特徴の一つとして背景透過ができないというのが挙げられます。
逆にpng等の可逆圧縮方式と呼ばれる方式では背景透過が可能です。
しかしWebPの場合、非可逆圧縮方式にもかかわらず背景透過が可能という特徴があります。
jpgとpngのいいとこ取りなイメージですね。
アニメーションに対応
アニメーションはjpgやpngでは対応されておらず、通常は動画ファイルからgif(ジフ・ギフ)と呼ばれる形式に変換する必要がありました。
それに対してWebPは動画から直接アニメーションのWebPに変換することができ、サイズもgifと比べて軽量です。
本ブログでも使用していますが、PC操作をアニメーションで伝えたい場合は画面録画をwebpアニメーションに変換して掲載するようにしています。
対応ブラウザが少ないのがデメリット
これまでWebPは対応するブラウザが少ないのがデメリットでした。
しかし2018年にPCの主要ブラウザであるFirefoxとMicrosoft EdgeがWebPをサポートすることを発表、また2020年にはAppleのios14やAndroidでのサポートも発表されています。
主要なブラウザの中で未対応なのは2021年11月現在でIEのみとなります。
しかしIEは2022年6月16日にMicrosoftのサポートが終了となり、今後使う人がいなくなっていくことが予想できますので問題ないかと思います。
つまり現時点で対応ブラウザに関するデメリットは無くなったと言ってもいいでしょう。
ワードプレスでWebPを使うには
ワードプレスでWebPを使うには後述する方法でjpgなどをwebpに変換して掲載する方法もありますが、プラグインを導入することで自動的にwebpに変換して表示することができます。
WebP Expressを導入する
ワードプレスのプラグインである「WebP Express」を導入するとjpgやpngであげた画像も自動でWebPに変換して表示してくれます。
また、WebPに対応していないブラウザでは変換前のjpgファイルを表示してくれます。
導入方法は簡単です。
プラグインをインストール
プラグインの検索画面で「webp express」を検索し、「今すぐインストール」をクリック。
その後インストール済プラグインからWeb Expressの「有効化」を押してください。
初期設定する
設定は簡単です。プラグインが有効化されるとワードプレスの左メニューの「設定」から「WebP Express」を選択します。
Alter HTML? のチェックをつけると設定完了です！
これでブログを閲覧した方のブラウザがWebPに対応していれば自動でWebPに変換されて表示されます。
ここでは詳細設定は省きますが、圧縮率や変換対象を指定できたりすることが可能です。
WebPへの変換方法
前章ではワードプレスのプラグインをご紹介しましたが、その他のWebP形式への変換方法をご紹介していきます。
ご自身のやりやすい方法を試してみてください。
Webサービスを使う
筆者が使っているのはこちらのezgif.comと呼ばれるWebサービスです。
jpgやpngはもちろん、動画ファイルもwebpに変換することができます。
ソフトをPCにインストールする必要がないのがメリットですが、
一度インターネット上にアップロードする必要がある。という点は認識しておいた方がいいかと思います。
万が一流出しても問題ない画像に使うようにしましょう。
コマンドラインツールを使う
Googleが提供しているコマンドラインツールを使うと、Terminalなどのコマンドラインから画像変換を行うことが可能です。
ある程度コマンドラインの操作に慣れている必要があり上級者向けですが、活用すると大量の写真を一気に変換するといったことも実現可能です。
まとめ
いかがでしたでしょうか。
今回は画像形式の一つであるWebPについてワードプレスでの使い方や変換方法について解説しました。
SEOという観点では必ずメリットになってくるかと思いますので是非ご活用ください！
