新しい画像フォーマット「WebP」とは?JPEGやPNGと比較して解説!

この記事をシェアする

Webサイトを閲覧している際、画像が挿入されていることが多々あるかと思います。その画像フォーマットによって表示速度が違い、その中でも「WebP(ウェッピー)」が注目されています。WebPとは何か、詳しく解説します。

WebPとは

WebPとはGoogleが開発し、軽く高い画質のまま変換が可能な画像フォーマットです。WebPファイルの拡張子は「.webp」となります。2010年には開発されている決して新しいわけではありませんが、徐々に対応osを広げ流通しつつあります。動画規格の技術を画像圧縮の技術に活用している点が特徴です。

WebPのメリット

WebPのメリットを2つに分けて解説します。

アルファチャンネルを扱えること

1番のメリットとして挙げられる点が非可逆圧縮方式で、アルファチャンネルを扱える点です。まずは「非可逆的圧縮方式」と「アルファチャンネル」について解説します。

非可逆的圧縮方式とは画像を圧縮する際に圧縮前の状態に戻せない形式のことです。サイズの変更や保存を繰り返す度に画質が下がっていきます。WebP以外にもJPGなどが代表的です。

アルファチャンネルとはPhotoshop内のデータ保管庫のようなもので、画像の選択範囲を切り取り、保存したり透明化に編集したりする際に利用します。

つまりWebPは、画像を圧縮する時に圧縮前に戻せない形式でありながら、画質を下げずに背景を透過させるなどの編集が可能、ということです。これまでの画像ファイルでは不可能だったことを可能にしました。

表示時間の短縮

WebPは画像の処理時間が早いことで間接的に良い効果があります。1つはユーザーの離脱を防ぐ効果が期待でいます。Webサイトを閲覧するユーザーは、画像の読み込み速度が遅いとサイトへ不快感を覚えます。このようにUX改善のために重要な読み込み速度の改善に効果的です。

もう1点がコスト削減に繋がります。一見あまり関係ないように見えますが、AWSのようなクラウドサービスを従量課金制で利用している場合、重いデータがサイト内に多ければそれに応じて課金されます。そのためデータを軽量化することでコストに削減に効果があります。

デメリット

WebPにもデメリットがあります。2点ご紹介します。

インターネットエクスプローラー(IE)・iOSで非対応

徐々に対応ブラウザが増えていますが、いまだにIE・iOS(safari)で未対応です。iOS14では対応可能になる予定ですが、現状では他の画像ファイルを表示させるなどの対応が必要となるため注意が必要です。

変換に手間がかかる

その他の画像フォーマットと比較してまだまだ対応可能な画像編集ソフトが少なく、簡単に変換できる他のものとの違いといえます。しかし徐々に対応可能なソフトが増えており、iOSのサポート開始をきっかけにWebPの流れは加速していくでしょう。

WebPと他の画像フォーマットの比較

画像方式 圧縮方法 透過 アニメーション
WebP 非可逆圧縮
JPEG 非可逆圧縮 × ×
PNG 可逆圧縮 ×
GIF 可逆圧縮

可逆圧縮は先ほど解説した非可逆的圧縮と逆に、圧縮前後のデータが変わらずに復元できる方式です。このように他の画像方式と比較しても優秀なWebPですが、WebPは同じ画質でもPNGの26%、JPEGの25~34%軽くできます。

WebPへ画像変換する

実際にWebPへ画像を変換してみましょう。おすすめのツールも紹介します。

Syncer

SyncerはJPEG・PNGをWebPに、WebPをPNGに変換してくれる便利な無料のツールです。簡単に画像ファイルの変換ができるので順を追って解説します。

上の画像の状態で「ファイルを選択」をクリックするか直接ファイルをドロップするだけで変換されます。試しにこの記事のアイキャッチ画像で試してみましょう。

画像をドロップしてから1秒もかからずに変換した画像が表示されます。画像のデータ量は返還前が199KBに対し、152.7KBと軽くなっている量も確認できるメリットもあります。但し2017より対応ブラウザがChromeだけのため、ご注意ください。

まとめ

WebPは非常に効果的ですが、iPhoneユーザーが多い状況では対策を進めきれないのが現状です。効果を最大化したい場合はその他画像フォーマットと使い分けて運用しましょう。また画像のデータ容量を含め、コンテンツマーケティングの取り組みを無料で診断できるツールをリリースしております。ぜひご活用ください。

コンテンツマーケティングチェックへ >

資料ダウンロード申し込み

この記事をシェアする
Scroll to Top