コラム【WEB編】

ＷｅｂＰ（ウェッピー）とは？

ＷｅｂＰとは、Ｇｏｏｇｌｅが開発した新しい画像フォーマットです。

この“ＷｅｂＰ”とは、Ｗｅｂページに配置する画像の品質を保ったまま高圧縮によって読み込み速度に効果が期待できるもので、拡張子もそのまま“．ｗｅｂｐ”となります。

画像フォーマットと言えば…ｊｐｇやｐｎｇ、ｇｉｆなどとなりますが、実際には用途に応じて適宜使用していないＷｅｂページをかなり多く見受けられます。

例えばｊｐｇは色のデータが多い写真などに適しており、さらにイラストなど比較的画素数が写真よりも少ない画像に関してはｇｉｆ、そして背景を透過させたい場合はｐｎｇをそれぞれ使い分けるべきです。

そうしなければ無駄に容量の大きな画像ファイルをユーザーに読み込ませることになり、場合によっては離脱の原因に大きく関係してくる重要な要素となります。

そこで、大幅に圧縮できる非可逆圧縮のひとつ“ｊｐｇ”と可逆圧縮・透過対応の“ｐｎｇ”それぞれの利点を活かし、画像ファイルをｊｐｇよりも圧縮しつつ透過にも対応する“ＷｅｂＰ”が注目されているというわけです。

特にユーザーファーストを掲げているＧｏｏｇｌｅが開発したフォーマットですので、読み込みスピードによる検索順位にも影響する可能性も十分考えられるでしょう。

ただしこの“ＷｅｂＰ”、編集ソフトが対応していない・ブラウザが対応していないなどのデメリットもあり、そういったブラウザに関しては従来の画像を条件分岐によって表示させる必要があります。

今回は、Ｗｅｂページの閲覧を快適にする画像フォーマット“ＷｅｂＰ（ウェッピー）”について、ご説明致します。

WebPのメリット

①容量を軽くしても画像が綺麗

ＷｅｂＰは画質を保ったままで、軽量化した画像が書き出せることが大きな特徴です。

ＪＰＥＧのように圧縮率が高いため、Ｗｅｂサイトへの負担や読み込みにかかる時間を軽減できます。

・ｐｎｇより約２６％小さくできる
・ｊｐｇより約２５〜３４％小さくできる

上記のように、“ＷｅｂＰ”で書き出すことによって同等の画像であってもｊｐｇ・ｐｎｇよりもさらにファイルサイズを圧縮することができ、結果Ｗｅｂページを快適に閲覧することができるほどＷｅｂサイトのトラフィック量軽減に役立つとのこと。

また、ｇｉｆから変換することも可能ということはアニメーション自体も軽くすることが可能ということになります。（ｇｉｆアニメーションを作成してから“ＷｅｂＰ”に変換。）

これは画像を多く使用しているページだと特に効果的で、１ページ全体としてもかなり効果が期待できるものと思われます。つまり“ＷｅｂＰ”とは、Ｇｏｏｇｌｅが開発した画像フォーマットのひとつで、ページ読み込み速度改善のためにも推奨されており、まさに次世代フォーマットと呼ぶにふさわしい技術ということになります。

②透過やアニメーションも作成出来る

上記の説明の通り、今までＰＮＧで透過を利用していたものもＷｅｂＰで可能です。

また、ｇｉｆアニメーションもさらに軽い状態で可能となります。

現在はほぼすべてのブラウザに対応しています

以前は対応しているブラウザが限定されてしましたが、現在はＩＥを除くほぼすべての主要ブラウザが対応しています。

ｉＰｈｏｎｅ版のＳａｆａｒｉも対応したことにより、ブラウザをわけるためのコーディングも不要となったため、ますます普及率が高まってきています。

（参考：“WebP” | Can I use… Support tables for HTML5, CSS3, etc）

軽くしても画像がきれいということは

通常の画像フォーマットは、圧縮率を高めてファイルサイズを落とすほど、画質が荒くなってしまいます。

その点ＷｅｂＰの場合は、正しい方法で変換さえすれば、きれいな画質を保ったままの状態でファイルサイズを軽くすることができるのです。

元のデータを損失させない可逆圧縮と、画質を保ったままで高圧縮率が望める非可逆圧縮、両方のデータ圧縮形式に対応が可能です。

他のフォーマットと同じ見た目を保ちつつ、そのフォーマットよりも軽量であるのが特徴です。

画像の容量を軽くするメリット

ページ内に設置する画像のデータ容量が軽くなればなるほど、ページの読み込み・表示スピードが向上します。

ページの読み込み・表示スピードを向上させると、以下のようなメリットがあります。

①ＳＥＯの評価が改善する可能性がある
②ユーザーの直帰・離脱率が改善する可能性がある
③ＣＶＲが改善する可能性がある

ご存じの方も多いと思いますが、ＳＥＯの評価には「ページの速度」が大きく関係しています。

ページの読み込み・表示が遅い状態では、ページエクスペリエンス（ユーザーのページ内の体験）を損ねることになりますので、

ページスピードは出来るだけ改善できるようにしましょう。

ＷｅｂＰのデメリット

①古いブラウザには対応していないものもある

Ｉｎｔｅｒｎｅｔ　ＥｘｐｌｏｒｅｒやＫａｉＯＳなど、一部開発が終了したブラウザや古いバージョンのブラウザは非対応です。

非対応ブラウザの場合には、ｐｉｃｔｕｒｅタグなどを用いて、ＪＰＥＧやＰＮＧなど代替フォーマットの画像を表示させることで対応は可能です。

とはいえ、現在はユーザーが使用しているブラウザのほぼすべてが対応しているため、デメリットとして感じることは、ほぼ無いに等しいでしょう。

②変換ツールやサービスが限られている

ＷｅｂＰは２０１０年に登場した画像フォーマットですが、これまでは普及があまり進まなかった状況もあってか、変換ツールやサービスが比較的少ないのがデメリットといえます。

しかし近年は各サービスのＷｅｂＰ対応化が進み、ＷｅｂＰがより一般的になると予想されます。

Ｐｈｏｔｏｓｈｏｐは、これまではプラグインを使うことで対応してきましたが、２０２２年２月１５日に、プラグインや環境設定なしでＷｅｂＰに変換できる最新バージョンを公開しました。

まだＩｌｌｕｓｔｒａｔｏｒやＸＤでは、直接ＷｅｂＰを書き出すことはできませんが、Ｐｈｏｔｏｓｈｏｐのように今後は対応が進む可能性もあります。

今のところは変換手段がまだ充実しているとはいえませんが、今後ＷｅｂＰの普及に合わせ、ソフトやサービスも増えてくるでしょう。