画像形式WebPとは?Webサイトの表示速度を改善する方法

早ければ早い方がいいものの代表といえばサイトの表示速度です。
改善させるためには、適切なファイルサイズ画像を置くことが大切なのですが、画像サイズが重くて困った経験はないでしょうか。
Webサイトでは、画像の重さが原因で、ページの読み込み速度が遅くなり、ページを見てもらえないなど、せっかくのチャンスを逃してしまうことも起こりえます。

今回WebPを中心に、目的に合った適切な画像のファイル形式を選ぶことでWebサイトの表示速度改善につなげる方法をご紹介します。

WebPとは(JPEG、PNG、GIFとの違い)

WebPはウェッピーと読みます。Googleが開発している静止画像フォーマットでファイルの拡張子は「.webp」です。2010年9月30日に提供が開始されました。
WebPは圧縮率が高いのが特徴で、従来の画像ファイル形式を使用する場合と比較して、画像のファイルサイズを小さくすることができます。
また、従来の画像形式でできることをほぼ実行可能です。

画像形式	Webp	JPEG	PNG	GIF
圧縮方式	非可逆圧縮	非可逆圧縮	可逆圧縮	可逆圧縮
透過	◯	✖️	◯	△
アニメーション	◯	✖️	✖️	◯

ただし、WebPでは古いWebブラウザで対応していないものがいくつかあります。
Internet Explorer および古いバージョンのSafari (iOS 13 以前) では WebP画像を表示できません。
※MicrosoftはIEのサポートを終了させ、Edgeを使用することを推奨しています。
また、まだWebP画像のアップロードをサポートしていないWebサイトやサービスもあるため確認が必要です。

非可逆圧縮と可逆圧縮のちがい

非可逆圧縮(ひかぎゃくあっしゅく)とは、圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方式のことで、不可逆圧縮(ふかぎゃくあっしゅく)とも呼ばれています。

可逆圧縮(かぎゃくあっしゅく)とは、圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法のことです。ロスレス圧縮とも呼ばれています。

JPEG → 写真の保存形式に適した画像形式

JPEG(ジェイペグ)はJoint Photographic Experts Groupの略です。静止画のデジタルデータを圧縮する方式のひとつで、ファイルの拡張子は.jpgもしくは.jpegです。

一般的には非可逆圧縮の画像フォーマットでWebPと同じです。ただし、色の透過ができない点はWebPと違います。

JPEGは、表現できる色数が豊富で24ビット(1670万色)まで扱うことができるので、色数の多い写真や、グラデーションのように色が細かく変化する画像の保存に適しています。

Webpとの比較

検証したところ、WebP のファイルサイズはJPEGと比較して25-34%小さくなります。

PNG → Webの表示に適した画像形式との違い

PNG(ピング)は、Portable Network Graphicsの略です。コンピュータでビットマップ画像を扱うファイルフォーマットであり、圧縮による画質の劣化のない可逆圧縮の画像ファイルフォーマットです。ファイルの拡張子は.pngです。

JPEGと同じくフルカラー1670万色を扱うことができ表現できる色の数が豊富で、画像の質を維持したまま透過処理ができるのが特徴です。テキストや線画など色の境界がはっきりしたイメージに適しています。

PNGは可逆圧縮に対応しており、一度圧縮しても元の状態に戻すことが可能です。

Webpとの比較

WebPはアニメーションに対応していますが、PNGは対応していません。
また、WebP のファイルサイズはPNGと比較して26%小さくなります。

GIF→アニメーションとして利用できる画像形式

GIF(ジフ)は、Graphics Interchange Formatの略で、ファイルの拡張子は.gifです。

GIFは256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットであり、圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、WebブラウザではJPEGと並んで標準的にサポートされています。

圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、イラストやボタン画像など、使用色数の少ない画像への使用に適しています。
また、GIFは透過処理も可能です。
可逆圧縮の画像形式なので、一度低画質で保存しても元の画質に戻すことができます。

GIFの最も大きな特徴は、アニメーション画像を作成できる点です。色数の多くないシンプルなアニメーションを作成する際には重宝します。

アニメーションのWebP画像のファイルサイズは、アニメーションGIF画像のファイル サイズの約30%です。

GIF形式は256色しかサポートしていないので画像をGIF ファイルとして保存すると、ほとんどの場合、以前より画質が低下します。WebP にはそのような制限はなく、最大 16,777,216色をサポート、フルカラーのアニメーションを作成したいけれどファイルサイズは小さくしたい時に適しています。

 

WebPを使用するメリットとデメリット

WebPを使用する6つのメリット

WebPを使用する3つのデメリット

01. 非対応のブラウザがある

2020年11月のiOS 14のアップデートにより、主要なWebブラウザーのほとんどでWebP画像を閲覧できるようになりました。 ただし、Internet Explorer と旧バージョンの Safari (iOS 13 以前) ではサポートされていません。
WebPで表示されないユーザーのために、手間はかかりますがJPEGを出すことも可能です。
画像を2種類作成し、HTMLのタグのなかに、WebPを出すコードと、JPEGなどを出すコードを2つ書く方法です。すると、WebP対応ブラウザではWebPが、非対応ブラウザではJPEGが表示されます。

02. 画像編集・アップロードが非対応

WebP形式と互換性のある画像編集プログラムは多くありません。
また、多くのWebサイトは、WebP画像のアップロードをまだサポートしていません。場合によっては、対応しているレンタルサーバーにアップロードして画像のURLをHTMLで入力する必要があります。
Photoshopは対応しており、Squooshというブラウザで変換できるツールも開発されています。
https://squoosh.app/

03. アニメーションは、GIF画像よりも高いCPU使用率が必要

アニメーション化された WebP 画像は、GIF 画像よりも高い CPU 使用率を必要とします。
非可逆 WebP 画像のデコードには、GIF 画像の 2.2 倍の時間がかかる場合があります。画像が可逆圧縮の場合、1.5 倍の時間がかかります。

WebPに変換してサイト表示速度は高速化されるのか?

WebPの最大の特徴は、画像の圧縮率の高さにあります。その特徴を活かして、Webサイトの画像をWebPに変換することでサイトの表示速度を上げることができます。
読み込み速度の遅いWebサイトは、ユーザーにとってストレスになるので、ページの離脱率が高まります。
WebPで表示速度を改善されたユーザーが利用しやすいサイトは、ユーザーファーストの観点からも良いとされ、Googleの評価も高くなるのでSEO対策にもつながります。

Webサイトの表示速度は、Google PageSpeed Insights(ページスピードインサイト)で計測できます。PageSpeed Insights は、Google社が提供するウェブツールです。
https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect

既に多くの場面でWebPが使用されている

動画のサムネイルにマウスカーソルを合わせたときに表示されるYouTubeの動画プレビューは、WebP画像です。NetflixのサムネイルもWebP形式で作られています。

WebPの動画版、WebMとは?

WebM形式は、Google が開発した動画ファイル形式です。
軽量さと高品質を両立することを目標としており、ファイルの拡張子は<.webm>です。
今後、GoogleはすべてのYouTube動画をWebMに変換することを発表しています。
WebM は透明な背景にも対応しているため、背景が透明なビデオを作成する場合は、WebM が唯一のソリューションです。

WebPよりさらに軽量な画像形式AVIFとは?

WebPよりさらに軽量な画像形式にAVIFがあります。
AV1 Image File Formatの略で動画圧縮方式のAV1と同様の方法で画像を圧縮し、HEIF形式として保存する画像ファイル形式で、WebPよりもさらに高い圧縮率を誇ります。
可逆圧縮と非可逆圧縮を選択できる点も特徴で、透過処理にも対応しています。
複数の画像を組み合わせることでGIFのようなアニメーションの作成もできます。

まとめ

存在感を増している画像ファイル形式WebPをご紹介しました。

既存のファイル形式より20%以上も軽くWebサイトの表示速度を改善できるのが特徴です。

技術の進歩とともに新たなファイル形式も誕生しています。世の中の主流になる前にそのファイル形式の特徴や特性を学んでおきつつ、Webサイト制作へも生かしていきたいと思います。

KOHIMOTOでは、Webサイト制作のご相談を承っております。どうぞお気軽にご相談ください。