COLUMN

コラム

CATEGORY
  • 次世代画像フォーマット「Webp」とは?

2021.06.03Web制作

次世代画像フォーマット「Webp」とは?

しまこ
しまこ
02
WebP(ウェッピー)という画像形式をご存知でしょうか?
長い間、WEBの画像は「JPEG」「GIF」「PNG」が主流でした。。WebPはこのすべてを置き換えることができる次世代のフォーマットです。
今回はWebPについてお話したいと思います。

WebP(ウェッピー)とは?

WebPとは、Googleが開発した画像フォーマットのことです。
ファイルの拡張子は「.webp」。
画像の画質を担保したまま軽量化した画像を書き出すことができます。
Webサイトの軽量化・高速化を考えている方は要チェックの画像フォーマットです。

WebP(ウェッピー)のメリット

■ファイルサイズを軽量化できる
WebP最大の特長で、JPEGと比較してファイルサイズが約25~34%程度小さくなるといわれています。
また、画像が軽量化されることで、サイト読み込みの時間が短縮されユーザーの満足度を高めることができます。

■非可逆圧縮・アルファチャンネルを扱える
非可逆圧縮とは、圧縮したデータを元に戻すとき完全に元に戻す事が出来ないデータの事です。
(JPEGは非可逆圧縮ですが、アルファチャンネルには非対応です。)
WebPはJPEGと同じく、圧縮率の高い非可逆圧縮でありながらGIFやPNGのように透過画像も書き出せる特殊なフォーマットです。
それぞれのフォーマットに欠点を補った形になっており、しかもGIF同様にアニメーションにも対応しています。

WebP(ウェッピー)のデメリット

■全てのブラウザに対応していない
現在は、全てのブラウザがWebP(ウェッピー)に対応しているわけではありません。
そのため、対応していないブラウザに対しては従来の画像形式(JPEG、PNG、GIF)を表示し分ける必要があります。

■変換に手間がかかる
WEBサイトのデザインで多く用いられているPhotoshopやAdobe XDではWebPでの書き出しは対応していません。
WebPへの変換にはWebP変換用のアプリケーションを使用するか、コマンドで変換する必要があります。

03

画像の最適化はユーザ体験の向上に繋がる

ページの表示速度を上げることは、ユーザ体験(UX)の面から見ても重要です。
Googleが公表したWebサイトのページ表示速度とユーザー直帰率の関係性では、表示されるまでに3秒以上かかってしまうWebページからはおよそ半分のユーザーが離脱しているとしています。
このことは、ユーザーが表示速度の速いWebサイトを求めているということでもあります。
ページの表示速度を上げる方法は色々ありますが、、WebPフォーマットによる画像サイズの軽量化で画像データの最適化を図ってみてはいかがでしょうか。

採用サイトデザインに特化したまとめサイト | DEZDEZ デザデザ