少し前から使われ始めている、次世代画像フォーマットのWebP(ウェッピー)。
このWebPとはどういったものなのか、メリットやデメリット、作成方法や変換方法を含め解説していきます。
WebP(ウェッピー)とは
WebP(ウェッピー)とはGoogleが開発した次世代画像フォーマットの事で、圧縮率が高く、画像の劣化が少ないまま画像の容量を軽量化できるのが特徴となります。
画像の軽量化は、ページの表示速度にも関係してきますので、SEO的にも大きく影響してきます。
他の画像形式との違い
次に、他の画像形式との違いについて解説していきます。
今回は、よく使用されているjpg形式とpng形式との違いを解説していきます。
jpg形式との違い
まず、jpg形式と大きな違いとして透過画像に出来る点です。
jpgだと背景の透過処理が出来ないため、jpg形式で書き出しすると背景が白くなるといった事がありましたが、WebPでは背景の透過処理ができます。
また、jpg形式だとgifファイルのようなアニメーションを作成できませんが、WebPでは可能になっています。
もう1つ大きな違いとして、jpg形式は非可逆圧縮となり保存する度に画質が荒くなりましたが、WebPは非可逆圧縮と可逆圧縮を選ぶ事が出来る為、可逆圧縮で保存した場合、繰り返し保存した際にも画質を落とさず保存可能です。
png形式との違い
png形式は背景の透過処理が可能で、可逆圧縮に対応していますので、繰り返し保存した際にも画質は保たれていますが、保存する度にファイルサイズが大きくなります。
WebPでは、繰り返し保存した場合でもファイル容量が軽く保たれます。
WebP画像を使う事でのメリット
次に、WebPを使用するうえでのメリットを解説いたします。
画像サイズの軽量化
まずは、最大の特徴である画像サイズの軽量化です。従来のjpg形式よりも最低でも25%以上は軽量化できる感覚です。軽量化してもそこまで画質が荒くなるといった事もありません。
ページ表示速度とSEOメリット
ページの表示速度はSEOにも大きく影響してきます。
Googleではページの表示速度を評価の指標としていますので、画像サイズが軽量化する事でページ表示速度が大きく改善され、SEO的にも大きなメリットがあります。
WebP画像を使う事でのデメリット
WebP画像を使う事でのメリットを解説しましたが、デメリットも存在します。
ここでは以下の3つのデメリットを解説していきます。
WebPに対応していないブラウザがある
最近のブラウザは大体対応していますが、IEや少し前のバージョンのブラウザでは対応していません。
対応していなければ表示されませんので、WebP画像を使用する場合には、pictureタグで画像の出し分け・レスポンシブ対応する方法【HTML】で解説しましたpictureタグで画像の出し分けをするなどの対応が必要となります。
WebP画像へ変換しないといけない場合がある
PhotoshopなどのソフトからWebP形式での書き出しが可能であれば大丈夫ですが、古めのバージョンのPhotoshopや、対応していないソフトを使用する場合は、変換ツール等を使用してWebPへの変換が必要となる場合があります。
変換ツールとして手軽に使用できるのが、Googleが開発した「Squoosh」です。
WebPだけではなく、様々な形式に対応しています。
WebP画像の作成方法と変換方法
WebP画像の作成方法と変換方法について解説いたします。
Photoshopを使用する
Photoshopを使用する場合は簡単に書き出し可能です。
少し前のバージョンでは、プラグインを導入しなければ書き出し・読み込みが出来ませんでしたが、現在はデフォルトで対応しています。
書き出し方法は、「別名で保存」を選択し、保存形式をWebPに選択してから圧縮方法を選択して保存となります。
WordPressのプラグインを使用する
WebPに変換・保存し、対応しているブラウザの場合はWebP画像を表示、それ以外は別の形式で表示してくれるプラグインはいくつもあります。
その中でも有名なのが「Converter for Media」や「EWWW Image Optimizer」があります。
自身のサイトにあったプラグインを使用してみてください。
変換ツールを使用する
変換ツールとして手軽に使用できるのが、Googleが開発した「Squoosh」です。
WebPだけではなく、様々な形式に対応しています。
さいごに
いかがでしたでしょうか。
WebP(ウェッピー)とはどういったものなのか、メリットやデメリット、作成方法や変換方法について解説しました。
従来の形式と合わせて上手く使用する事で大きなメリットがありますので、積極的に使用していきたいですね。
