【高速化】 PNG・JPEG・WebP・AVIF の 画像形式 を比較

はじめに

ページをストレスなく表示するには、どうすれば良いだろうか？

書き手はサイトの運営を始めてから、少しずつ Web の勉強をしている。

Web に詳しい人からすると当たり前のことばかりだと思うが、素人なりに勉強したことを記事にしたい。

Web はスピードが命

サイトを見る時、表示速度がとても大切になる。表示速度が早ければストレスなく記事を読むことができる。

表示速度は端末の性能とデータ転送量で決まる。このうち、データ転送量はコンテンツを作る側が決めている。

ページが重くなる原因は画像

データ転送量は圧倒的に画像が多い。このサイトの代表的なページを調べると、画像が 80% 以上 を占めていた。

このサイトは写真や図表が多いので、他と比較しても高い比率になっている。

調べたページ：肥満　第１回

肥満とメタボ

画像は ファイル形式 で容量が変わってくる。今回はファイル形式でどのように変わるか実際に検証してみた。

今回の検証結果

まずは、今回の検証結果のグラフを示す。

画像の形式

今回は、次の ４つのファイル形式を比較した。

JPEG

JPEG は古くからある画像形式で、自然画のようなグラディエーションのある画像を得意としている。圧縮率が高く、データをかなり圧縮できる。

PNG

PNG は可逆圧縮が特徴で、圧縮してもデータが劣化しない。JEPG が苦手とする輪郭のはっきりした図表などに適している。ただし圧縮率が低いので、データ容量が大きい。

WebP

WebP は 2010年に Google が開発した形式で、可逆と非可逆の両方の圧縮に対応している。JPEG と PNG の置き換えを目指しており、両者より 10～30% 程度サイズを小さくできる。

2020年 に iOS の Safari が対応し、Mac や iPhone でも見られるようになり、急速に普及している。

AVIF

2020年 に登場した新しい形式で、WebP よりさらに 10～20% 圧縮できる。主要なブラウザの最新版はほぼ対応している。

AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

undefined

caniuse.com

実際に比較

実際の画像で容量を比較してみた。元の画像は 400 × 400 px の PNG の風景画になる。

PNG → WebP（可逆）

可逆圧縮なので、もちろん劣化していない。容量は 20% ほど削減できている。

PNG → JPEG（非可逆）→ WebP（非可逆）

PNG を JPEG に圧縮し、さらにそれを WebP に変換してみる。JPEG の圧縮率は Google 推奨の 85 で行っている。

JPEG は風景画を得意にしているが、よく見ると元の PNG より山の稜線や空の色味が劣化している。ダークモードで比較するとより分かりやすい。

しかしデータ量は大幅に削減できているので、コンテンツ製作ではより実用的になっている。

WebP は JPEG よりさらに圧縮できているが、違いは書き手にはわからない。

PNG → AVIF（可逆）、PNG → AVIF（非可逆）

AVIF への変換は、Google が提供している Squooshto を利用した。

可逆圧縮は WebP よりわずかに小さくなっている。圧縮の際に複数の設定項目があるので、適切に設定すればもっと小さくなると思うが、書き手には難しかった。

非可逆圧縮は WebP とほぼ同じサイズになるように 圧縮率 65 に設定した。JPEG を経過していないためかもしれないが、サイズはほぼ同じでも WebP より劣化が少なく見える。

なお、Blogger はまだ AVIF 形式に対応していないので、AVIF を BASE 64 形式のテキストに変換して入力している。実際は容量が 291 kB まで増加して、さらに入力画面がテキストで埋まっているので、実用的ではない。

高解像度画像

最近は、1点 に２～３倍の解像度で表示させる高解像度の機種が主流になっている。画質にこだわるなら、最適なレベルまで圧縮した画像を、高解像度で配信するのが正解だと思う。

大きめのタブレットや、4Kモニター に対して特に有効なはずである。

ただしデータ量は解像度に比例して大きくなるので、そのバランスが悩ましい。

結論：今は WebP の時代

今、Blogger で一番使いやすいのは WebP 形式になる。Google の見解の通り、PNG と JPEG から 2～3割 データ量を削減できる。

Blogger の画像サーバーは、リンクを書き換えるだけでサイズや形式を変更できるので便利である。元の画像は適切な大きさにして、そのままの形式でアップロードしておけば良い。

The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images

Find out powerful and flexible ways to customize and edit images uploaded on Google’s Blogger platform to make the posts better and visually appealing.

www.freshtechtips.com

Google は AVIF の普及も推進している。近い将来、Blogger にも AVIF の時代が来るのかもしれない。

画質と速度、どちらをとるか？

いろいろ検討した結果、このサイトではデータ量よりも実際のユーザー体験を優先して、高解像度のきれいな画像を利用することにした。

これは Blogger の場合、画像の転送時間より、サーバーの応答待機時間のほうがずっと長いことがわかったからである。

次回はこれついて検証し、 Blogger の画像の表示を高速化する方法を検討する。