見出し画像

次世代画像フォーマット⁉︎WebP（ウェッピー）とは

杏

WebPとは

皆さんは WebP（ウェッピー）という名前を知っていますか？

 WebPとは、Googleが開発した画像ファイル形式のことです。

最大の特徴は、なんと言ってもJPEGやPNGなどの画像ファイル形式と比べて、圧縮率が高く容量が小さく抑えられる上にも関わらず、画質が劣化しないことにあります！

具体的にはJPEG より30%、PNGより26%サイズを小さくすると言われ、その上でJPEGやPNGと同等の画質を保つことができます。

そんな夢のようなWebPは次世代拡張子と呼ばれていますが、実は2010年に発表され2013年に正式リリースされ、今年で10年目となります。

いまだに利用者・知名度がないのは、主要ブラウザであるGoogle ChromeやSafariが利用できなかったことが非常に大きいです。

しかし、2022年からほとんどのブラウザをカバーして利用できるようになりました！

Webサイトを作成している方、HPの表示速度に悩んでいる方！
導入をするなら今がオススメです！

ここからは導入に向けて、WebPのメリット・デメリットについて解説します。


WebPのメリット

  • 高い圧縮率

    先述した通り、“WebP“は“JPEG“以上の高い圧縮率でありながら“JPEG“より画質の劣化が起きづらく、容量のみ軽量化することができます。

    通常、圧縮率を高めてファイルサイズを落とすと、圧縮率に比例して画質は劣化していきます。。

    ですが、“WebP“では元の画質を極力そのまま保ちつつ、容量だけを減らすことができるんです！

  • フォーマットの使い分けが不要

    現在、アニメーションを使いたい時は“GIF“、透過背景を使いたい時は“PNG“、画質を求めるときは“JPEG“など、用途によってフォーマットの使い分けが必要です。

    しかし、”WebP”はそれら全てをカバーできます！！

    まずアニメーションが特徴の“GIF“は最大256色でしか表示できないため、画質がどうしても劣ってしまうのに対し、“WebP“は1,670万色以上でアニメーションを表示することができ、画質も劣りません。

    次に“PNG“の特徴である背景透過は、”WebP”でもできます。


    “PNG“は元のデータを残したまま圧縮できる「可逆圧縮」方式を使用することで背景透過処理ができます。
    しかし、“WebP“は「非可逆圧」形式で容量を抑えたまま、背景透過処理ができてしまうんです！！

    しかも表示できる色もほぼ同じなため、画質が落ちることもありません。


    “JPEG“の特徴は容量の少なさと画質の良さでしたが、下記のように画質を保ったまま、“WebP“は約30%容量を少なくすることができます。

画像引用：「次世代拡張子「WebP」とは｜特徴・メリット・導入時の注意点を解説 | 診断マーケティングトレンド」


  • 公式からの推奨

    “WebP“はGoogle社が開発した画像フォーマットのため、GoogleのPageSpeed Insightsでは、表示速度の改善方法としてWebPを推奨しています。

    “WebP“を使用すればSEOを改善できて検索上位に必ず入るとは言えませんが、Googleが推奨している形式でSEOが落ちることは非常に考えづらいです！


WebPのデメリット

  • 画像変換の手間がかかる

    “WebP“の形式に対応していない画像編集ソフトも多く存在します。
    対応していないソフトを利用している場合は、一度他の形式に書き出してから変換する必要があります。

    例えば、現在よく使われる“Illustrator“や“Adobe XD“などの画像編集ソフトは直接“WebP“の形式で書き出すことが出来ません。

    しかし、最もよく使われる“Photoshop“は2022年2月にプラグインや環境設定をしなくても“WebP“で書き出すことができるようになりました！

    このように今後、“WebP“が主流になってきたら対応ソフトも増えていくでしょう。

    また、“Adobe XD“などを利用している方は、画像作成後、変換ソフトを利用するという方法もとれるので大きなデメリットとはなりません。

  • 対応していないブラウザがある

    同じく非対応のブラウザも存在します。
    しかし、現在非対応なのは“Internet Explorer“や、iOS13以前の“Safari“など一部のブラウザです。
    これらは今後使われなくなっていくことを考えるとそれほど大きなデメリットではないでしょう。

  • “JavaScript“から使用判定が出ない

    地味に大きなデメリットとも言えるのは、“JavaScript“を使って作るWebアプリケーションなどでは、“Webp“の使用判定が出ないことがあることです。

    そのため、“JavaScript“がメインになるアプリケーションでは、“Webp“の使用はデメリットと言えるでしょう。

    解決策として、imageタグに“Webp“を直接埋め込むことで使用判定は出せるものの、開発工数もかかるので“JavaScript“を使用しているものには非推奨です。。。

まとめ

このように“WebP“は、まだすべてのブラウザや画像編集ソフトで対応していないため、注意が必要です。

しかし、画質を保ったまま容量を小さくできること、用途によって画像フォーマットを変えなくても良くなることは非常に大きなメリットです！

近年Webサイトも多くなってきている中で、

  • 画像が大量に使用されている

  • 表示速度を改善したい

  • SEOを改善したい　

など、Webサイト運用に悩みを抱えているような方は、一度“WebP“の導入を検討してみてはいかがでしょうか？

現在は当てはまるものがないという方でも、今後ますます普及していくことが予想されるため、覚えておくだけでもオススメです！

この記事が気に入ったらサポートをしてみませんか？