早ければ早い方がいいものの代表といえばサイトの表示速度です。
改善させるためには、適切なファイルサイズ画像を置くことが大切なのですが、画像サイズが重くて困った経験はないでしょうか。
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の最大の特徴は、画像の圧縮率の高さにあります。
その特徴を活かして、Webサイトの画像をWebPに変換することでサイトの表示速度を上げることができます。
読み込み速度の遅いWebサイトは、ユーザーにとってストレスになるので、ページの離脱率が高まります。
WebPで表示速度を改善されたユーザーが利用しやすいサイトは、ユーザーファーストの観点からも良いとされ、Googleの評価も高くなるのでSEO対策にもつながります。

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

まとめ

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

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

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

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