Webサイトから画像をダウンロードすると、おなじみの.jpgや.pngではなく、まるでタイプミスのような.webpという拡張子が付いていることがあります。 お使いのデフォルトアプリは、対応できずにお手上げ状態になるかもしれません。 古いデザインツールでは、まったく開けないこともあります。 いつの間にか、Webはひっそりとフォーマットを変更していたのです—しかも何の通知もなしに。
WEBPは、Web専用に作られたGoogle’sの最新画像フォーマットです。 JPEGや PNGと同じラスター画像のファイルタイプで、拡張子は.webp、MIMEタイプはimage/webpです。’ その核となる考え方はシンプルです。画像の見た目を同じ（あるいはより良く）保ちつつ、ファイルサイズを大幅に削減して、ページの読み込みを速くし、消費する帯域幅を抑えるというものです。
Googleは2010年、より広範なパフォーマンス改善への取り組みの一環としてWEBPを導入しました。
ゼロから何かを発明する代わりに、VP8ビデオコーデックの技術を転用し、それをRIFFコンテナで包んだのです。 内部的には、WEBPはすべてのピクセルをそのまま保存しているわけではありません’。 周囲のブロックをもとにピクセルがどう見えるべきかを予測し、その差分をエンコードします。 その結果、写真やグラフィックをより小さなファイルに圧縮する、はるかに効率的な方法が実現しています。
WEBP画像フォーマットの実際の仕組み
技術的には、WEBPは大きく分けて非可逆と可逆という2つのモードをサポートしています。
非可逆WEBPは、JPEGと同じ手法をとります。 目に付きにくいデータを捨てることで、わずかな品質と引き換えに劇的なサイズ削減を実現します’。 一般的な写真の場合、GoogleやAdobeのような大手は、同程度の見た目の品質でJPEGと比較して約25～30パーセントの削減が可能だとしています。
可逆WEBPは、PNGにより近いものです。 すべての視覚情報を保持しつつ、それを実現するためにより高度な圧縮技術を適用します。 このフォーマットはアルファチャンネルも扱えるため、透明な背景をネイティブに処理できます。 それはPNGが長年支配してきた領域です’。ロゴ、アイコン、UI要素、きれいに切り抜かれた製品画像などです。 WEBPは、より小さなファイルサイズで同じ仕事をこなすように設計されています。
3つ目の技もあります’。アニメーションです。 WEBPは複数のフレームを1つのファイルにまとめられるため、通常ならアニメーションGIFを使うような一部の用途でも代役を務められます’。
WEBP対JPEG：古い標準と新しい標準
JPEGは、インターネット時代のデフォルトの写真フォーマットです。 カメラ、スマートフォン、古いソフトウェア、安価なデジタルフォトフレーム、これらはすべてJPEGを流暢に扱えます。 ですから、人々が“WEBP対JPEG”と問うとき、それは実質的に、何十年もほぼどこにでもあった標準から乗り換えても大丈夫なのか’、という問いなのです’。
実際のところ、WEBPは通常より効率的です。 同じ見た目の品質であれば、WEBPファイルはJPEGよりも明らかに小さくなることが多いのです。 それこそがGoogleの狙いでした’。同等の見た目をより少ないバイト数で実現することです。
しかし、効率だけが違いではありません’。
JPEGは透明性をサポートせず’、アニメーションもできず’、可逆モードもありません’。 1990年代の非常に特定の問題に対する、非常に優れた解決策なのです’。
WEBPはより柔軟なフォーマットで、写真、透明なアセット、アニメーションするUIの装飾など、さまざまな用途に広がっています。
JPEGが唯一保持している本当の利点は、互換性です。
あらゆるオペレーティングシステム、画面付きの冷蔵庫、スーパーマーケットのほこりをかぶった印刷キオスクまで、すべてが.jpgの扱い方を知っています。 WEBPは今やすべての主要ブラウザと数多くのツールでサポートされていますが、“どこでもとにかく動く”という点ではJPEGに軍配が上がります。
ですから、Web向けに選ぶなら’、WEBPが優勢になることが多いでしょう。 古いソフトウェアを使っている相手に画像をメールで送る場合や’、組み込みデバイスを対象とする場合は、JPEGが依然として最も安全な選択肢です。
WEBP対PNG：重さのない透明性
PNGは、透明性、くっきりとしたエッジ、UIアセットのためのフォーマットとしてニッチな地位を築きました。 可逆なので文字がにじんだりロゴがぼやけたりせず’’、アルファチャンネルをサポートしているのでアイコンをどんな背景にも重ねられます。
WEBPは、まさにその仕事を狙っています。 透明性を有効にした可逆モードでWEBPを使うと、PNGと同じくっきりしたエッジときれいな切り抜きが得られますが、通常はより小さなファイルになります。 これは、デザイン重視のインターフェースや、製品画像がグリッド状に並ぶeコマースサイトにとって大きな意味を持ちます’。
今のPNG’の最大の利点は、古いツールチェーンでのなじみやすさと予測可能性です。 何年も更新されていないデザインワークフロー、プリンター、レガシーなコンテンツパイプラインを扱っているなら’、PNGは依然として手軽な答えです’。 最新のWebサイトでは、WEBPが“キロバイトあたりの品質”という勝負で優位に立つ傾向があります。
GoogleがWEBPをそれほど強力に推進した理由
これは単なる思いつきのオタク的プロジェクトではありません’。
Googleには、Webを高速化することへの明確な利害があります。高速なサイトはユーザーの満足度を高め、サーバー負荷を減らし、同社自身’のサービスをよりキビキビと感じさせるからです。
WEBPをChromeに組み込み、他のブラウザへのサポートを推し進めることで、Googleはサイトがこのフォーマットを採用しやすくしました。
CMSプラットフォームやホスティングプロバイダーも後に続きました。 今では多くが自動画像最適化を提供しており、アップロードされた画像を裏でひっそりとWEBPに変換して対応ブラウザに配信し、フォールバック用に従来のJPEGやPNGのバリアントも保持しています。
だからこそ、WEBPが突然どこにでもあるように見えるのです’。 あなたが切り替えを決めたわけではありません’。 あなたのツールが、あなたに代わってそうしたのです。
WEBPファイルを開く方法
ただWEBPファイルを開きたいだけなら、最も簡単な解決策はすでに使っているもの’、つまりブラウザです。 ファイルをChrome、Edge、Firefox、Safariにドラッグ＆ドロップすれば、他の画像と同じように表示されます。
デスクトップのサポートも追いついてきました。 最近のバージョンのWindowsでは、フォトアプリや多くのサードパーティ製ビューアーでWEBPをサポートしています。 macOSやLinuxディストリビューションでは、システムの画像ライブラリにWEBPが組み込まれることが増えており、プレビューや他のデフォルトビューアーでもこのフォーマットを表示できます。
編集の面では、Photoshop、PaintShop Pro、GIMPといった主流のツールが、ネイティブまたはプラグイン経由でWEBPを開けます。 特定のアプリが拡張子を認識しない場合’、それはたいてい古いバージョンにとどまっているか’、最新のWebフォーマットに対応するよう更新されていない’ソフトウェアを使っていることを意味します。
WEBPをJPG、PNGなどに変換する方法
もちろん、フォーマットのことなどまったく考えたくない’場合もあるでしょう。 プレゼン用に.webp画像を.jpgとして、印刷ファイル用に.pngとして、あるいはCMSが受け付ける何かとして必要なだけかもしれません。
いくつかシンプルな選択肢があります。
多くの画像エディターでは、WEBPファイルを開いて“名前を付けて保存”や“エクスポート”を使うだけで、JPEG、PNG、その他お好みのフォーマットとして書き出せます。
本格的なエディターが手元にない’場合でも、Documents.ioのようなブラウザベースのコンバーターがたくさんあり、WEBPをアップロードして数秒後にJPGやPNGをダウンロードできます。
さらに未来志向で考えるなら’、AVIFやJPEG XLといった新しいフォーマットもあり、特に超高品質の写真では圧縮率でWEBPを上回ることがあります。
ただ問題は、サポートがまだまばらであることです。一方でWEBPはすでに主流の地位に到達しています。
WEBPがどこにでもある理由—そして使うべきでないとき
Web画像において、WEBPはほぼすべての条件を満たしています。 ファイルサイズを小さく保ち、透明性とアニメーションをサポートし、ブラウザやプラットフォーム全体で十分に普及しているため、安心して頼れます。 だからこそ、ホスティング業者、CDN、サイトビルダーは、これに大きく依存しています’。デザイナーに何も描き直させることなく、無料でパフォーマンスを提供してくれるからです。
それでも、理想的とは言えない’場面はまだあります。 元の写真データをアーカイブするなら’、Web向けの圧縮フォーマットではなく、おそらくRAWやTIFFが望ましいでしょう。 古いソフトウェアを使っている印刷会社にファイルを渡す場合は’、JPEGやPNGのほうが安全かもしれません。 そして、特殊なデバイスやニッチなアプリケーションを扱っている場合は’、JPEGの普遍的な互換性が依然として重要です。
それ以外のすべて、特にWeb画像においては、WEBPはひっそりと賢明なデフォルトになっています。 次にあの見慣れない拡張子を目にしたときは、コンピューターがおかしくなっている’わけではありません。 それは、Webが最も得意とすることをしているのです’。ページ上のシンプルな画像の裏に、たくさんの巧妙なエンジニアリングを隠しているのです。