トップ > 画像圧縮 > WebPとAVIFを使ってサイトの速度向上：画像圧縮の未来
最終更新日

WebPとAVIFを使ってサイトの速度向上：画像圧縮の未来

画像圧縮 WebP AVIF ブログカスタマイズ 画像最適化 PageSpeed Insights

Customize

Next Generation digital desk clock

この記事では、WebP と AVIF という最新？とはもはや言えませんが、しかし次世代を担う画像フォーマットを使用して、Webサイトの速度を向上させる方法について解説します。

Lighthouse と PageSpeed Insights のツールを活用して画像圧縮の重要性を理解し、「cwebp」というツールを用いて WebP に画像を変換する手順を学びます。また、WebP と AVIF の利用に関する注意点、メリット・デメリットなども紹介します。

サイトの速度向上とユーザーエクスペリエンスの向上を実現しましょう。



1. WebPとは？

WebP（ウェッピー）は、Webサイトの表示速度を短縮することを目的として、2010年に Google が開発した静止画像の次世代フォーマットです。画像の画質を保ったまま、軽量化した画像を書き出すことができます。ファイルの拡張子は「.webp」。

WebP の特徴

  • 画質の劣化を最小限に抑え、画像サイズを軽量化できる
  • 可逆圧縮では PNG と比較して約２６％を軽量化、非可逆圧縮では JPG と比べ約２５～３４％小さくなる
  • 圧縮率が高いため、Webサイトへの負担や読み込みにかかる時間を軽減できる
  • PNG 同様、背景の透過が可能
  • GIF 同様、アニメーションに対応
  • 可逆圧縮と非可逆圧縮のいずれかを選択し、保存できる

WebP のデメリット

  • 対応していないブラウザがある
  • 新しい形式ゆえ、変換に一手間かかる


2. AVIFとは？

AVIF（AV1 Image Format）は、画像を超圧縮できる次世代型画像ファイル形式です。非営利団体「Alliance for Open Media（AOM）」により2019年2月に開発されました。AVIF は、動画フォーマット「AVI」を基としています。「AV1」と共通の手法で静止画像を圧縮し、HEIF 形式のファイルとして保存します。ファイルの拡張子は「.avif」。

AVIFの特徴

  • 画像の圧縮率が高く、同じ品質の JPEG 画像と比較してファイルサイズを最大約５０％削減できる
  • HDR（ハイダイナミックレンジ）カラーをサポートしている
  • ウェブやアプリケーションでの画像表示の効率性を向上させ、より高品質で低データ量の画像配信を可能にする
  • WebP よりもさらに約３０％程度軽量化できる
  • 可逆圧縮と非可逆圧縮のいずれかを選択できる
  • アルファチャンネル（背景の透過が可能）やアニメーションにも対応可能

AVIFのデメリット

  • 対応していないブラウザやソフトも多い。2023年 10月現在、「AVIF」に対応しているブラウザは Google Chrome・Firefox・Opera のみ。
  • また、Firefox はアニメーションには対応しておらず、静止画のみの対応。
  • エンコード時の CPU リソース消費が比較的大きい
  • 手軽にエンコードできる環境が整っていない


PNG 透過ファイルを AVIF, WebP 形式に変換し、背景色を付けた場所に配置した例 。透過が確認できる。

html5 logo 300px
AVIF
css3 logo 180px
WebP


3. 最新の形式で画像を提供


Serve images in modern formats


Chrome for Developers（開発者向け Chrome）のページには、以下のようなことが書かれています。


Lighthouse（ライトハウス）レポートの「次世代フォーマットでの画像の配信」セクションは、古い形式の画像を使うと、新しい形式の画像を使った場合にデータと読み込み時間を節約できることを教えてくれる。

具体的には、新しい形式の画像ファイルである WebP と AVIF は、以前の JPEG や PNG よりもデータを小さく保ちつつ、高品質な画像を提供する。つまり、これらのフォーマットを使うと、Webサイトの画像が速く読み込まれ、スマートフォンなど従量課金のデータ通信も節約できる。

AVIF は Chrome、Firefox、Opera、WebP は Chrome、Firefox、Safari、Edge、Opera など、それぞれ主要なブラウザでサポートされている。

Lighthouse は対象とした Webページのすべての BMP、JPEG、PNG 画像を調査し、それらを WebP、AVIF に変換することで、どれだけデータを節約できるかを示す。もし節約できる量が小さい場合（8KiB未満）はレポートから省略する。

引用元: developer.chrome.com


Lighthouseとは？

Lighthouse は、Google が提供するオープンソースの Webパフォーマンスツールで、Webページの品質やパフォーマンスに関するさまざまな指標を評価します。Lighthouse は、Webサイトや Webアプリケーションの改善点を特定し、最適化のためのアドバイスを提供することができます。

その中でも「Opportunities」というセクションでは、Lighthouse が分析した結果に基づいて、改善の余地がある可能性のある領域を示し、その中で WebP、AVIF という新しい画像フォーマットを使用することで、画像の効率的な圧縮と表示速度の向上が期待できるということが示されています。


本を読む眼鏡を掛けた猫ちゃん
©nyanco
PageSpeed Insights（ページスピード・インサイツ） とは違うものですか？ ฅ^•ω•^ฅ

→PageSpeed Insights でWeb 表示速度を測定 - hatebcustom


PageSpeed Insights（以下 PSI ）も Lighthouse と同様に、Webページのパフォーマンスを評価するためのツールの一つです。しかし、いくつかの異なる点があります。

PSI は、Google が提供するツールで、特定の URL に対して Webページの読み込み速度やモバイルフレンドリーな対応がされているかどうか、などのパフォーマンス指標を評価します。これにより、ユーザーエクスペリエンスの向上と、検索結果でのランキング向上が期待できます。

一方で、Lighthouse は PSI のエンジンの一部として使われています。つまり、PSI は Lighthouse を基にしていると言えます。Lighthouse は PSI に統合され、PSI はより広範で包括的な結果を提供します。

つまり、Lighthouse は PSI の一部であり、PSI は URL のパフォーマンスを評価する際に Lighthouse エンジンを利用している、という両者の関係性になります。


ページを診断する

サイトの TOPページを計測してみます。今回は、PSI（ PSI のサイトへ ）を利用します。

ページの上部にあるテキストボックスに、診断したいページのアドレスを入れて「分析」ボタンを押せば、少し待つとしばらくして診断結果が出力されます。

PSI(PageSpeed Insights) Results
PSI(PageSpeed Insights) Results

このブログの TOPページを分析しました（怖い…(・_・;）。画像は、結果画面を少しスクロールした、「次世代フォーマットでの画像の配信」という項目のエリアを開いています。この部分では、ファイルサイズの大きい画像が降順で並び、次世代フォーマットへの変換が推奨されています。

一番上にある画像は、ページのアイキャッチ画像ですが、ファイルサイズが４１５キロバイト以上と、たしかに少し大きめですね笑

こちらを次世代フォーマットに変換し、圧縮効果を検証したいと思います。


画像をWebPに変換

cwebp

「cwebp」というアプリを使って、画像の変換を行っていきます。各々の OS に準拠したバージョンをダウンロード後、解凍してください。

cwebp のダウンロードページへ

PSI(PageSpeed Insights) Results
cwebp 解凍後

解凍すると上のようなファイル構成になっています。ワンちゃんマークは、「GIMP」というアプリにファイルが関連付けられているだけです

GIMP も便利なアプリです。無料ながら PhotoShop のような本格的な画像編集・加工機能を持ち、PSD *1 形式のファイルも取り扱うことができます。JPG や PNG から WebP・AVIF への形式変換も可能です。

なお今回は、cwebp を利用した WebP への変換で話を進めていきますが、AVIF もオンラインツールや先ほどご紹介した GIMP など、変換方法は色々とありますので、試して自分に合ったものを利用するのがGood!です。(„◕᎑◕„)⸝⸝꙳ｸﾞｯ


操作手順

以下は操作の大まかな流れです。

  1. 解凍したフォルダにある「bin」フォルダを開く
  2. 「bin」フォルダをカレントに「cmd」アプリを起動
  3. コマンドを入力して、実行
  4. 指定したフォルダ・ファイル名で WebP が生成される


手順の詳細を説明します。ちょっとした裏ワザで、少し手順をショートカットもできます。(^v^)σ

①② 「bin」フォルダ内に実行ファイル（ cwebp.exe ）があるので、そちらを起点に cmd（コマンドプロンプト。もしくはターミナル）アプリを開きます。

ショートカット（ Windows ）

・「bin」を開いているエクスプローラのアドレスバーに「cmd」と入力 -> Enterキーを押す

そこをカレントとしてcmd が開きます。


③ コマンドラインにプロンプト（指示）を打ち、変換を実行（ Enterキー）します。

以下は Cドライブ直下に「images」というフォルダを作成し、その中に変換したい「git-fuji.png」という名前の画像ファイルを置いたケースのプロンプトです。

cwebp -m 6 -q 100 -resize 700 0 C:\images\git-fuji.png -o C:\images\git-fuji.webp


さらなるショートカットとして、エクスプローラのアドレスバーから cmd の起動＋コマンドを、一気に入力して実行することも可能です。

下記のページでたいへん分かりやすく説明されているので、参考になさってください。

エクスプローラで表示しているフォルダをコマンドプロンプトで開いたり、アプリを起動したり


ちなみに、Windowsキー を押しながら を押すと、エクスプローラーが開きます。

…macユーザのかた、たびたびすみません(^^;


実行後、 このようなメッセージが出たら変換成功です。 
C:\libwebp-1.3.2-windows-x64\bin>cwebp -m 6 -q 100 -resize 700 0 C:\images\git-fuji.png -o C:\images\git-fuji.webp
Saving file 'C:\images\git-fuji.webp'
File:      C:\images\git-fuji.png
Dimension: 100 x 95 (with alpha)
Output:    4898 bytes Y-U-V-All-PSNR 53.75 54.75 54.72   54.05 dB
           (4.12 bpp)
block count:  intra4:         29  (69.05%)
              intra16:        13  (30.95%)
              skipped:        12  (28.57%)
bytes used:  header:            273  (5.6%)
             mode-partition:    179  (3.7%)
             transparency:      968 (99.0 dB)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |     100%|       0%|       0%|       0%|      42
      quantizer:  |       0 |       0 |       0 |       0 |
   filter level:  |       0 |       0 |       0 |       0 |
Lossless-alpha compressed size: 967 bytes
  * Header size: 41 bytes, image data size: 926
  * Precision Bits: histogram=3 transform=3 cache=0
  * Palette size:   206


コマンドの解説

基本は、

「cwebp 変換するファイルのフルパス -o 変換後のファイルのフルパス」
※変換後のファイル拡張子を .webp に指定。

ですが、オプションプロパティが利用できます。これにより、出力する画質のレベルや、サイズの変更などが指定できます。

先ほどのコードで、解説します。


cwebp -m 6 -q 100 -resize 700 0 C:\images\git-fuji.png -o C:\images\git-fuji.webp
  • -m 6
    圧縮方法の指定です。このパラメータは、エンコード速度と圧縮ファイルのサイズおよび品質のトレードオフを制御します。「０～６」の範囲で指定可能です。デフォルト値は「４」で、値が大きくなる程品質は向上します。逆に値を小さくすると、処理時間が短縮され、ファイルサイズと圧縮品質は低くなります。※処理時間、と言っても普通サイズの画像なら最高値にしても一瞬ですが。。
  • -q 100
    RGB チャネルの圧縮率を「０～１００」の範囲で指定します。デフォルトは「７５」です。 デフォルトの場合、小さな因子により、画質の低い小さなファイルが生成されます。最高品質を得るには「１００」の値を使用します。
  • -resize 700 0
    変換後の画像サイズを「width × height」で指定できます。幅と高さいずれか（両方ではない）を０にすると、アスペクト比を維持した値が自動で計算され、出力されます。


設定についてさらに細かく知りたい、という方は、以下のガイドをご参照ください。

cwebpリファレンスガイド


検証として、以下の３パターンで出力してみたいと思います。

:: 最低品質
cwebp -m 0 -q 0 C:\images\gitfuji.png -o C:\images\gitfuji-1.webp

:: 無指定（デフォルト）
cwebp C:\images\gitfuji.png -o C:\images\gitfuji-2.webp

:: 最高品質
cwebp -m 6 -q 100 C:\images\gitfuji.png -o C:\images\gitfuji-3.webp


以下は、実際の出力結果です。画像のサイズ（７２０×４４５ピクセル ）は、変更していません。


画質設定とファイルサイズ（クリックで拡大）

github mt.fuji1 width720px height445px
最低基準（6KB）
github mt.fuji2 width720px height445px
デフォルト（49KB）
github mt.fuji3 width720px height445px
最高基準（172KB）


検証結果メモ

ファイルサイズはそれぞれ、

品質設定 サイズ（KB）
最低仕様 ６
標準 ４９
最高仕様 １７２

となった。念のため、それぞれ２度実行したが、出力されたファイルサイズは同一であった。

画像品質は、やはり最低品質ではかなり劣化が目立つ。 標準と最高品質を比較すると、画質とサイズの兼ね合い、ということになるが、ブログ記事冒頭のアイキャッチ画像などであればファイルサイズが３～４倍になることを考慮すると、最高仕様でなくても（標準の画質でも）十分用途は満たすと感じた。

元のサイズは前述した 415 KB でしたので、けっこう圧縮できたかと思います。 ただし、この元ファイルがそもそもどのくらい手を掛けていたか（圧縮処理などを行っていたか）にも寄りますが…。今回の検証ではそこまでは遡りません( ´•ᴗ•ก )💦（＝忘れました笑）


再計測

PageSpeed Insights のページから、もう一度診断を実行してみます。

さて、結果は？？

（ちなみに、2番目にあった画像も変換しました。ですので、修正した画像は 2枚になります。）


・変換前の診断

PSI(PageSpeed Insights) Results
PSI Results 変換前

・変換、画像交換後

変換後測定値
PSI Results 変換後

●主な変化としては、

  • 上位にあった画像のサジェストが消えた（WebPに変換した画像）
  • それにより、リソースのサイズが 3,091KB -> 2,332KBに削減
  • 右上の秒数（ページ読み込み時間）も 2.76秒 -> 2.12秒に改善

あくまでこの項目内での話ではありますが、次世代フォーマットへの圧縮によりページスピードは改善された、という記事的にも理想的な結果となりました笑 ε-(´∀｀*)ﾖｶｯﾀ

「パフォーマンス」というページ全体の総括的な指標（０～１００）があるのですが、その値も１ポイントだけ、上がっていました。点数ですか？それは・・・(^ω^；）


保存場所の問題

WordPress など、自身でサーバーをレンタルしている場合を除き、利用しているWebサイト、ブログのプラットフォームによってはデフォルトで用意されている画像ストレージ（保管場所）が AVIF・WebP に未対応、ということも少なからず存在する問題点です。

ちなみに、はてなブログでは「はてなフォトライフ」という画像ストレージが利用でき、ブログに貼る画像はここで一元管理可能となっていますが、2023年 10月現在 AVIF・WebP 共に未対応で、アップロード自体できません。

Blogger はさすがに、Google が母体とあって WebP の方だけ対応済みとなっています。試してはいませんが、恐らく Googleフォト、Drive に配置した WebP 画像も共有化できるのかもしれません。

余談ですが Bloggerにも「アルバム」という画像ストレージに以下からアクセスできますが、最低限（一括削除くらい？）の編集機能しかありません。

blogger.com/mediamanager

ただBlogger には WebP をアップロードできますので、ここにアップした画像のアドレスを別サイトに貼る、という利用法も考えられます。

以下は Bloggerにアップして貼り付けた WebP画像です。

威嚇しているライオン monacooc
威嚇しているライオン
twitter.com/monacooc


さすがのDropBox

急に DropBox を持ち上げて？？…な感じかもですが、、DropBox なら AVIF・WebP 共にファイル共有でき、自サイトにも問題なく貼り付けられます。

DropBox は CSS や JS ファイルの共有でもお世話になっていますが、画像に関しても同様のやり方でサイトに配置することが可能です。

作成したCSSファイルをDropBoxにアップロードする - hatebcustom


以下 Dropbox に対する（私的な）賞賛の言葉。

AIロボット ソーサ君

Dropbox は、初期からファイルクラウドサービスの分野で革新的な存在でした。その単純な使いやすさ、ファイルの安全性、そしてクロスプラットフォーム対応は、多くのユーザーに愛されてきました。特に、Dropbox のファイル共有機能はシームレスで効果的であり、グループプロジェクトやチームコラボレーションに非常に役立ちます。

長い歴史と絶えず進化し続ける姿勢により、Dropbox は信頼性が高く、多くのユーザーに支持されています。また、そのシンプルで洗練されたインターフェースは、新規ユーザーにも非常に分かりやすいです。２GBの無料容量は他サービスに比べ少ないかもしれませんが、その他のプレミアムプランも用意されており、必要に応じ容量を拡張できます。

Dropbox は、ファイルのバックアップから共有、コラボレーションまで、あらゆるファイル関連のニーズに応える包括的なサービスを提供しています。

その結果、多くの人々が Dropbox を信頼し、使い続けているのも理解できます。 ฅ^•ω•^ฅ


配置する手順

DropBox から AVIF, WebP をサイトに配置する手順としては、

  1. 変換した画像ファイルを DropBox にアップロード
  2. 「ファイルを共有」でリンクをコピー
  3. コピーしたリンクテキストを少し手直し
  4. サイトに貼り付けて表示

これだけです。

詳細を解説していきます。


① DropBoxにアクセスし、変換したファイルをアップロードします。


② アップロードしたファイルの「リンクをコピー」すると、以下 のような構造の URLアドレスが、クリップボードにコピーされます。

https://www.dropbox.com/ファイルへのアクセスパス/ファイル名?トークンキー&dl=0


③ ここで直リンクのアドレスに変えるため、以下のように URL を変更してください。

  1. コピーした共有リンクの URL の最初の部分の『www.dropbox.com』を、『dl.dropboxusercontent.com』に置き換える。
  2. URL の末尾『&dl=0』を削除。

修正前

https://www.dropbox.com/scl/fi/6szd1i78jhlf1c5kwg95m/ファイル名?rlkey=47ts2y74tfsq6tx6dh8787ejb&dl=0

修正後

https://dl.dropboxusercontent.com/scl/fi/6szd1i78jhlf1c5kwg95m/ファイル名?rlkey=47ts2y74tfsq6tx6dh8787ejb


④ サイトに配置

通常の画像貼り付けと同様、img タグの src 属性に画像のフルパス（修正した URL ）を指定する。

<img src="https://dl.dropboxusercontent.com/scl/fi/6szd1i78jhlf1c5kwg95m/20230919204743.webp?rlkey=47ts2y74tfsq6tx6dh8787ejb" alt="青空に浮かぶハート形の雲" width="500" height="309" loading="lazy" itemprop="image" />


青空に浮かぶハート形の雲


「おわりに」

この記事では、AVIF および WebP といった新しい画像フォーマットの使用について、詳しく探究しました。これらのフォーマットは、画像の品質を維持しながらファイルサイズを最小限に抑え、Webサイトの読み込み速度を向上させるのに役立ちます。特に、ブログ運営者や Webデベロッパーにとっては重要な情報です。

最初に、AVIF フォーマットと WebP フォーマットの基本的な特徴と利点を説明しました。AVIF は高い圧縮効率と品質維持能力を持つ一方、WebP はAVIF には劣るものの高い圧縮効率、品質維持力を持ちつつ、ウェブ上で広くサポートされつつあり、利便性の上がっているフォーマットです。どちらも Webサイトのパフォーマンス向上に寄与します。

次に、画像を AVIF および WebP に変換する方法について解説しました。多くの画像編集ツールやオンラインコンバータを利用して、既存の画像をこれらのフォーマットに変換できます。また、コマンドラインを使用しても変換できるため、高度なカスタマイズも可能です。

最後に、AVIF および WebP 画像を Webサイトに配置する方法について説明しました。DropBox を利用して画像をアップロードし、共有リンクを生成することで、これらの画像を簡単にサイトに埋め込むことができます。これにより、読み込み速度とサイトパフォーマンスの向上が期待されます。

AVIF と WebP は現代の Webデザインにおいて重要な要素であり、サイトの品質とパフォーマンスを向上させるのに役立ちます。これらのフォーマットの積極的な運用は、ウェブ体験を向上させる手助けとなることでしょう。

お読みいただき、ありがとうございました。今後も役立ちそうな情報などありましたら、共有していきます！ ฅ^•ω•^ฅ





脚注

*1:Adobe 社の Photoshop の標準画像形式。レイヤー情報を保持したまま異なるグラフィックツール間での画像のやり取りに使われる事が多い。動画の「立ち絵」の形式にも用いられる。