派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

WebP(ウェッピー)とは?次世代画像ファイル形式を解説

「WebP(ウェッピー)」と呼ばれる画像ファイル形式を採用するWebサイトが増えています。そもそもなぜファイル形式にはいろいろな種類があるの?JPEG、PNG、GIFの違いや、最新のAVIFについてもわかりやすく解説。Webに関わる方は必読です。

画像ファイルのファイル形式が複数ある理由

デジタルカメラやスマートフォンで写真を撮影したときに保存される、JPEGというファイル形式に馴染みがある方は多いでしょう。最近のiPhoneではHEIF(HEIC)と呼ばれるファイル形式で保存されることもあります。

一方、インターネット上からイラストなどのデータをダウンロードすると、PNGやGIFなどのファイル形式で保存されます。自分でイラストを作成しようとWindowsの「ペイント」などのソフトウェアを使用すると、BMPというファイル形式が標準です。

このように、画像ファイルといっても、さまざまなファイル形式が存在します。その理由は、使用する用途の違いです。

どんな画像でも綺麗な画質で保存できればよいのですが、画質の良いファイルは容量が大きくなり、多くのファイルを保存するには大容量のディスクが必要です。また、インターネットのようにネットワーク経由でやりとりする場合、画質の良いファイルは通信量が増加し、転送に時間がかかります。

このため、画像を圧縮することが求められていますが、圧縮する手法によって得意なデータがあり、それぞれの用途に合わせてファイル形式を選択する必要があるのです。

JPEG、PNG、GIFが主流。インターネット上で使用する画像ファイル

企業のWebサイトをイメージしてみてください。 表示する画像には、ロゴのようなイラストのほか、風景や人物などの写真などが多いでしょう。

ロゴを表示する画像の場合、画質の低下はその企業のブランドに関わります。そこで、画質は低下させずに圧縮する方法が求められ、PNGが多く使われていました。 一方、風景や人物の写真であれば、画質が若干低下してもそれほど影響はなく、JPEGが多く使われていました。

一般的にはJPEGの方がPNGよりも圧縮率が高く、すべてをJPEGに統一しているような会社もありました。

さらに、このPNGとJPEGに加えて、1990年代から多く使われていたGIFというファイル形式は、ほぼすべてのWebブラウザが対応しており、アニメーションも表示できました。

このように、歴史のある3つのファイル形式が長く使われてきましたが、最近ではスマートフォンなどのカメラが高画質化し、解像度の高い写真を撮影できるようになりました。

また、Webサイトを閲覧するパソコンやスマートフォンの画面も解像度が高くなり、画像をより綺麗に表示したいという要望が高まってきました。

時代に合わせて導入広がるWebP

上記のような背景があり、JPEGやPNGよりも高い圧縮率を持ちながら、高品質な画像を保つ特徴を持つファイル形式が求められるようになりました。そんな中でGoogleによって2010年に開発されたのが「WebP(ウェッピー)」というファイル形式です。

WebPは、PNGとJPEG、GIFという3つのファイル形式をすべて置き換えることを目指して開発されています。

WebPの特徴
  • PNGやJPEGよりもファイルサイズが小さいながらも同等の画質を実現
  • 画質が低下しないPNGのような役割を担えるだけでなく、写真においてもJPEGより高い圧縮率を実現
  • GIFのようなアニメーションにも対応

このように便利なファイル形式ですが、これまではWebブラウザのサポートが進んでおらず、なかなか普及しませんでした。

しかし、Internet Explorerのサポート終了に加え、多くのブラウザが最新バージョンでWebPをサポートするようになりました。現在は主要なWebブラウザで問題なく使用できるため、徐々に使用が広がっています。

(参考)https://caniuse.com/?search=webp

今後に期待されるAVIF

同じように圧縮率が高いファイル形式としてAVIF(エーブイアイエフ:AV1 Image File Format)もあります。AVIFは「Alliance for Open Media」という非営利団体が2019年に開発したオープンソースの画像フォーマットです。

動画の符号化方式である「AV1」をベースに開発されており、画質を維持しながらもWebPより高い圧縮率を実現しています。

ただし、現時点ではEdgeなど一部のWebブラウザが標準ではサポートしていないため、普及にはもう少し時間がかかりそうですが、今後も対応ブラウザが増えることが見込まれています。

デジタル処理・伝送・記録のための、情報のデジタルデータへの変換方式のこと。

さいごに、知っておきたいこと

このように圧縮率の高いファイル形式を使うことで、サーバー側でのディスク使用量を減らすだけでなく、通信時の転送量が減ることでWebページの表示速度も改善されることが期待できます。

WebPやAVIFに対応した画像編集ソフトが増えることで、より手軽に扱えるようになることが想像されます。

利用者としては、用途に応じて最適なファイル形式を選択できるように、世の中の変化に着目することが求められています。

【解説】増井 敏克さん
増井技術士事務所代表。技術士(情報工学部門)。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『基礎からのプログラミングリテラシー コンピュータのしくみから技術書の選び方まで厳選キーワードをくらべて学ぶ!』(技術評論社)、『IT用語図鑑[エンジニア編]』(翔泳社)、最新刊には『1週間でシステム開発の基礎が学べる本』(インプレス)などがある。

▼これまでのサクッとわかるITトレンド
Pythonはなぜこれほど人気なのか
大人も自由研究!IoTでプログラミングを体験しよう
サイバー攻撃に備えている?その対策は本当に有効ですか
Javaで開発するプログラマに将来性はあるのか
ITエンジニアはWeb3とどう向き合えばいいのか
RPAとプログラマーの役割はどう分担されるのか
ITエンジニアのための“効率の良い”数学の学び方
プログラマならではの「ChatGPT」の使い方
新年度は「Obsidian」で新しいノートを作ろう
DXへのITエンジニアの現実的な取り組み方とは
プログラマーのスキルアップとして競プロ(競技プログラミング)に挑戦!
プログラミング的思考はiPhone1台でも学べる時代!
「パスキー」とは?話題のログイン方法を解説
Copilotとは?コーディングを支援するAIを解説
SBOMを作成する企業が増加。そのワケを解説
Officeスクリプトとは?Microsoftの自動化ツールを解説

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。

リクルートスタッフィング