この記事では、Googleが推奨しているWebPという画像の形式について解説しているとん
ブログビジネスでは、文字情報だけでなく画像データも頻繁に扱います。
日常でも写真を撮ったり、画像をダウンロードしたりと、現代人は多くの画像のやりとりをしているでしょう。
その中で画像の形式について意識したことはありますか？
ほとんどの方は画像の形式についてあまり意識したことがないと思いますが、実は形式にはいくつか種類がありそれぞれ特徴があります。
代表的なのはpngとjpgで、見たことある方がほとんどでしょう。
この二つは、世界中で使われている画像の拡張子として普及しています。
ネットに上がっている画像のほとんどは、このどちらかの画像形式です。
むしろ、この二つ以外はアップロード出来ないというシステムも非常に多いです。
ここ数年は、この二つの画像形式がメジャーでしたが、最近になって密かに注目を浴びている新しい画像の拡張子があります。
それがwebpです。
新世代の画像形式として話題になっていて、今後ネット上の画像がどんどんwebpに変わっていく可能性も十分あります。
この記事では、新世代の画像形式であるwebpについて解説していきます。
ブログアフィリエイトを行っている方であれば必ず必要になる知識ですので、参考にしてください。
Googleが開発したWebPとは？
WebPってなんだぷう？
WebPとは、Googleが開発した新しい画像の拡張子です。
WebPは既存のjpgやpngよりも画像の容量を抑えつつ、画質を落とさないための圧縮技術になります。
呼び方は「ウェッピー」です。
画像ファイル上では
.webp
として使用されます。
この技術はすでに実用化されており、現在一部のサイトで普通に使用されています。
特に、画像の点数が多いショッピングサイトで積極的にWebPが採用されている印象です。
ブログで記事を書いていると、他のサイトから画像をダウンロードして使うといったシチュエーションもあるでしょう。
その際にダウンロードした画像がいつもと違う形式で戸惑った方もいると思います。
ダウンロードした画像を他の場所にアップロードしようとして、そのシステムが対応していないことでWebPをダウンロードしたと気づくパターンもあります。
この拡張子はまだまだ広く普及しているというわけではありませんので、多少の不便はありますが、間違いなく今後の社会で浸透していくと思います。
一度使ったら、そのメリットに病みつきになってしまうかもしれませんよ。
メリット
まず、WebPのメリットについて解説していこうと思います。
メリットは主に以下の５点が挙げられます。
- 画像の容量が軽くなる
- 透過を使える
- アニメーションも使える
- どのブラウザでも表示出来る
- サイトの表示時間が短くなる
画像の容量が軽くなる
まず、WebPの最大のメリットは、画像の容量が圧倒的に少なくなるという点です。
Googleはサイトの表示時間をかなり気にしていますので、そこに深く関わる画像の容量の圧縮に力を入れ、この拡張子を開発したというわけです。
今までのpngやjpgも画像を圧縮するツールがあり、ある程度は圧縮することが出来ました。
しかし、それでも画像を落とさずに容量を圧縮するには限界があります。
しかし、WebPの場合は今までのpngよりも約25%程度容量を圧縮することが可能になりますので、圧縮率はかなり高いです。
画像の容量が軽くなるだけでパソコンの負担も少なくなりますし、サイトへの負担も軽くなります。
透過を使える
pngでは背景透過を使って対象物だけを表示することが出来ます。
jpgの場合だと背景がどうしても映ってしまいますので、それがデメリットでした。
WebPでは、pngの良いところをとって、背景を透過することが出来るようになっています。
なので、より多くの利用シーンがあり、便利に使用できます。
透過がないというだけで使い物にならないシーンもありますので、このメリットもかなり大きいです。
アニメーションも使える
WebPでは、GIFのようなアニメーションを使用することも可能です。
特にGIFは複数の画像を使用しますので、普通の画像よりも容量が多くなる傾向にありました。
その欠点もWebPによって補うことが可能ですので、この点もかなりのメリットになるでしょう。
どのブラウザでも表示出来る
続いて、どのブラウザでも使用できるという点もかなり大きなメリットになると思います。
実はつい最近まで「SafariブラウザではWebPが表示されない」という大きなデメリットがありました。
しかし、Safariのバージョン１４からWebPが表示できるようになりましたので、このデメリットもなくなったのです。
WebPを表示できるブラウザはこちらになります。
- Google Chrome
- Firefox
- Microsoft edge
- Opera
- Safari
ほとんどのブラウザで表示できるとんね
IEでは未対応ですが、ほとんど使っている人がいませんので、特に問題にはなりません。
これらのブラウザで使用できるだけで、95%のユーザーが表示出来ますので問題ないでしょう。
以前までは、Safariで表示される時だけpng画像を表示するといった工夫が必要だったのですが、それがなくなったのはかなり大きいです。
サイトの表示時間が短くなる
画像のサイズが圧縮されることによって、サイトの表示時間が短縮されます。
当然テキスト情報よりも画像の情報の方が重いので、画像の容量が下がると表示にかかる時間が少なくなります。
ユーザーにとってもSEOにとっても良いことですので、非常に大きなメリットですね。
デメリット
続いては、デメリットについても解説したいと思います。
主なデメリットは以下の２点です。
- 変換が手間
- 対応していないシステムがある
変換が手間
既存の画像を全てWebPに変換するのは若干面倒でしょう。
ワードプレスのプラグインを使えば一気に変換できますが、それ以外の画像をいちいち変換するのは手間です。
最初から画像を作る場合はWebPで書き出せば良いだけなのですが、既存の画像に手を加える場合は、その手間が増えてしまいます。
しかしWebPがもっと世間に浸透すれば使うのが当たり前になるので、その手間もどんどんなくなっていくでしょう。
対応していないシステムがある
そしてもう一つのデメリットとして、WebPに対応していないシステムがまだ世の中には多数あります。
ファイルをアップロードするシーンがよくありますが、そこでWebPに対応されていないと今度は逆にpngなどに戻す必要が出てきてしまいます。
世間に浸透していないという理由でそのような弊害も出てしまいますので、その点は覚えておきましょう。
AMPとの併用でさらにサイトを高速化へ
今後のSEOにおいて、サイトの表示時間の短縮はかなり重要な対策になります。
その上で以前記事で紹介したAMP化も行えば、WebPとの相乗効果でさらにサイトの表示速度が早くなるでしょう。
こちらもそれなりに手間はかかってしまいますが、今後のSEO対策を考えるといつかは行うことになる対策ですので、覚えておきましょう。
WebPと他の画像形式を比較
WebPは他の画像フォーマットと何が違うんだぷう
WebPのメリットはわかっていただけたと思います。
ただ、既存の画像と何が違うのか、いまいちわかっていない方もいると思いますので、ここで他の画像と比較してみようと思います。
| 拡張子 | 圧縮方法 | 透過 | アニメーション |
|---|---|---|---|
| JPEG | 非可逆圧縮 | × | × |
| PNG | 可逆圧縮 | ○ | × |
| GIF | 可逆圧縮 | △ | ○ |
| WebP | 非可逆圧縮 | ○ | ○ |
比較すると図のようになっています。
これを見ると、WebPがいかに優秀かわかりますね。
ちなみに、可逆圧縮と非可逆圧縮とはなんなのかというと、一度圧縮したりサイズを変えたものを元に戻せるのかどうかという意味です。
非可逆圧縮は元に戻せず、可逆圧縮は元に戻せます。
予備知識として知っておきましょう。
WebPはSEOに影響があるのか？
WebPを使ってSEO的に良いことはあるのかぷう？
ブログを運営する上で最重要なのはSEO対策です。
なので、ブログに手を加える際はなるべくSEOに効果的なことをした方が望ましいでしょう。
そうでないと時間の無駄になってしまうことがありますからね。
では、WebPは有効なSEO対策に入るのでしょうか？
なぜ画像圧縮が必要なのか？
まず、なぜ画像の圧縮が必要なのでしょうか？
それは先ほども記載したように、サイトの表示時間を削るためです。
テキストよりも画像データの方が圧倒的に重いので、画像データはサイトの表示時間に大きな影響を与えます。
なので、画像の容量を圧縮するだけでもサイトの表示時間が大きく変わります。
同じ画像を表示するのであれば、なるべく少ない容量の画像を選ぶ方が当然良いです。
コアウェブバイタルとの関係性
以前の記事でコアウェブバイタルというGoogleが発表している最新の指標について解説しました。
コアウェブバイタルは、Googleが検索エンジンの最適化のために出している指標ですので、とても重要です。
WebPを使用することによって、コアウェブバイタルで目指しているサイトの表示速度アップの達成に貢献できます。
Googleが親切に今後のアップデートについて教えてくれていますので、以下の記事を参考にサイトの改善を行っていきましょう。
モバイルファーストインデックスとの関係性
続いて、以前書いたモバイルファーストインデックス（MFI）との関係性について触れておきます。
MFIは、今後検索順位を決めるサイトの評価をスマホサイト基準にしていくという指標になります。
一般的にモバイルサイトの方が重くなる傾向がありますので、このMFIによってより画像の軽量化が求められています。
先ほど解説したAMP対応と共に今後重要になりますので、覚えておきましょう。
画像をWebPに変換する方法
画像をWebPに変換する方法を知りたいぷう
それでは、既存の画像をWebPに変換するにはどうしたらいいのか解説したいと思います。
やり方は非常に簡単で、主に３つのやり方があります。
- ウェブツールを使用する
- フォトショップで書き出す
- プラグインを使用する
ウェブツールを使用する
まず一番シンプルなのが、ウェブツールを使用する方法です。
基本的に変換だけであれば無料で使えるツールが多いので、まずウェブツールを使用することを考えましょう。
おすすめのものを紹介しておきます。
Syncer
まず紹介するのがSyncerです。
シンプルな構造で検索１位に出てくるツールになりますので、利用者も多いでしょう。
やり方は、該当ファイルをアップするだけですので、一度試してみてください。
Sqoosh
続いて紹介するSqooshは、Googleが推奨している画像圧縮ツールです。
このツールはWebpへの変換はもちろんのこと、ほぼ全ての画像フォーマットへの変換が可能です。
画像圧縮に特化した高性能ツールですので、こちらもおすすめしておきます。
フォトショップで書き出す
上記のようなウェブツール以外で行うとなると、フォトショップで行うのが一般的です。
ただし、普通のフォトショップをそのまま使ってもWebPへの書き出しは出来ません。
特殊なやり方になってしまいますが、専用のプラグインを導入することによってフォトショップでも書き出しが行えるようになるようです。
https://github.com/webmproject/WebPShop
少し上級者向けになってしまいますが、普段フォトショップで画像の編集を行っている方は参考にしてみてください。
プラグインを使用する
続いて、ワードプレスを使用している方であれば、既存のブログ画像も全てWebPにしたいと考えるでしょう。
ただ、普通に対応するには、画像をダウンロードして変換して、再度アップロードするという手順になってしまいます。
そんなのいちいちやってらんないぶぅ〜
ですので、既存の画像を全てWebPに変換できる便利なプラグインを使いましょう。
それが、以前の記事でも紹介したEWWW Image Optimizerです。
こちらのプラグインを使用すると、既存の画像を全てWebPに変換することが可能になります。
プラグインが一括で作業を行ってくれますので、非常に助かる機能ですね。
詳細については上記の記事で解説していますので、参考にしてください。
WebPは今後間違いなく世界で浸透し当たり前に使われるようになってきますので、今から対策を行っていきましょう。
周りより一歩先に進むトン！
