ウェブサイトのためのAVIF画像形式は、SEO、PageSpeed、およびユーザーエクスペリエンスを向上させます。

0.1%未満のウェブサイトでAVIFフォーマットを使用しており、画像フォーマットで最も測定可能なサイト速度の改善、ユーザーエクスペリエンスの向上、Googleでのオンライン表示性の最大のメリットを引き出しています。他のすべてのウェブサイト運営者は、AVIFが提供する画像形式のポテンシャルをまだ活用していません。この記事はその解決策を提供し、AVIF形式を真剣に考え、可能であればウェブサイトの画像にも活用するように奨励します。

お使いのウェブサイトのURLをGoogle PageSpeed Insightsでテストしたことはありますか？パフォーマンスがどの程度良いかを確認するために直接お使いのウェブサイトでお試しください。

おそらく、あなたのウェブサイトでは現時点ではこの数値が表示されていないかもしれませんね。

数値が低いほど、あなたのウェブサイトでPageSpeedを向上させるためにはさらなる最適化が必要となります。Googleのテストツールページの下部に移動して、GoogleのPageSpeedの改善に関する推奨事項を展開してみると、まだJPGやPNG形式の画像を使用している場合、現代の画像形式に関する推奨事項が含まれているかもしれません。

これが、PageSpeed Insightsでまだ最高のスコアを達成しておらず、おそらくCore Web Vitalsにも合格していない理由の1つです。

私たちの4eck-media.deのエージェンシーウェブサイトやTutKit.com自体の画像は、AVIF形式で読み込まれ、非常に速く、非常にコンパクトで魅力的な品質を提供しています。AVIFは、PageSpeedを最大限に活用するのに役立ちます。

まだほとんどの人が知らない比較的新しいウェブ画像形式であるため、SEO、PageSpeed、ユーザーエクスペリエンスのすべての長所を備えた最新の画像形式であるAVIFについてご紹介していきます。

AVIF記事の目次:

AVIF画像形式とは？

AVIFは、2020年にAlliance for Open Media（AOMedia）によって公開された新しい画像形式です。この形式は、AV1というロスレス圧縮アルゴリズムに基づいており、JPEGやPNG、WebPなどの一般的な画像形式と比較してさまざまな利点を提供しています。

AVIF画像は、同じ画質でJPEG画像よりもはるかに小さいです。これは、AV1がはるかに効率的な圧縮を提供するためです。そのため、AVIF画像は、JPEG画像よりもはるかに小さくなることがよくあります。

AVIF画像はJPEG画像よりも高い色の深さを持っています。これにより、AVIF画像は最大12ビットの色の深さをサポートできる一方、JPEG画像は最大8ビットの色深度しかサポートしていません。これにより、AVIF画像はより広い色域と現実的な色を実現できます。

さらに、AVIF画像はアルファチャンネルを保存することができます。アルファチャンネルは画像の透明度を定義するために使用されます。これにより、AVIF画像は透明性が必要なグラフィックアプリケーションでの使用に最適です。

AVIFはオープンソース形式であり、さまざまなソフトウェアおよびハードウェアプロバイダーによってサポートされています。ほとんどの一般的な画像編集プログラムやブラウザはすでにAVIF画像をサポートしています。このような理由から、このモダンな画像形式が普及する時期が到来しています！

AVIFは他の一般的な画像形式に対していくつかの利点を持っています:

• より良い圧縮率：AVIF画像は、同じ画質でJPEGおよびPNG画像よりもはるかに小さいです。
• より高い色深度：AVIF画像は最大12ビットの色深度をサポートし、JPEGおよびPNG画像は最大8ビットの色深度をサポートしています。
• アルファチャンネルのサポート：AVIF画像は透明性を保存できるため、現在のウェブサイトではPNGやWebP画像が使われている理由も置き換えることができます。
• オープンソース形式：AVIFはオープンソース形式であり、さまざまなソフトウェアおよびハードウェアプロバイダーによってサポートされています。
• AVIFは他の一般的な形式（WEBPを含む）に対して多くの利点を持つウェブサイト向けの説得力のある画像形式です。

Googleは、PageSpeed Insightsの結果にAVIFを直接推奨しており、すでにすべての主要ブラウザが新しいバージョンでAVIFをサポートしているため、これが一般的に普及する時期だと見ています。

ですから、早めにウェブサイトに埋め込むのが得策です。既にSEO、PageSpeed、ユーザーエクスペリエンスの長所を活用するために、AVIFを導入しましょう。

AVIFがSEO、PageSpeed、ユーザーエクスペリエンスにメリットをもたらす理由

最大の利点は、画像を比較するときに最も顕著に現れます。たとえば、PNG形式で生成された1024x1024のMidjourneyのクマノミの群れの画像をお持ちの場合をご覧ください。

• オリジナルPNG：1,43 MB
• TinyPNGで最適化：393 KB - 73％節約

元のPNGファイルをsquoosh.appで変換し、結果は次のとおりです：

• SquooshでWebPとして最適化：84 kb - 94％節約
• SquooshでAVIFとして最適化：42 kb - 97％節約

結果として、AVIFイメージは、同等の視覚的品質でWebPイメージの半分のサイズです。多くの他のテストで、過度なJPGの圧縮によって生じるような圧縮アーティファクトは、品質が30未満で20またはそれ以下になると、軽度に現れることが初めて明らかになります。品質30の場合、ピクセルグラフィック内のテキスト要素さえも、圧縮アーティファクトなしに美しく鮮明に表示され続けます。

画像重視のウェブサイトでのこれらの節約は非常に評価されるべきです。

SEO値、PageSpeedおよびユーザーエクスペリエンス向上のためのAVIF

Googleは既に2021年にウェブサイトの重要なコアバイタル（Core Web Vitals）をランキング要因に変更しました。これには、主要コンテンツの構築速度である読み込み速度などが含まれます。 Googleは、2.5秒までを良好な値とし、ウェブサイト運営者がユーザー向けに目指すべき時間です。

大きな画像ファイルは読み込み時間を長くします。コアWebバイタルが不合格となります。

さらに、もう1つの問題があります。 PNGまたはJPEGなどの大きな画像データがウェブサイト内に配置されていると、テキストコンテンツが既に読み込まれている可能性がある一方、画像が遅く読み込まれることがあります。これにより、クラムシェルレイアウトシフトと呼ばれるものが発生し、画像の表示で下部ウェブサイト領域が下に押し下げられることがあります。 Googleはこうしたクラムシェルレイアウトシフトを好まず、それをCLSエラーとして示し、Core Web Vitalsも不合格とします。

また、ページが速く、コンテンツがすぐにクリックで表示されると、どのウェブサイト訪問者にとっても素晴らしい体験になります。また、圧縮アーティファクトが見え始めるようになるまで、圧縮を行いすぎないで、ウェブサイトに高品質の画像を配置することができます。損失のない変換や通常の圧縮においても、ファイルサイズはPNGまたはJPEGと比較してきれいに小さく保たれます。 そのため、AVIF形式は、多くの側面でユーザーエクスペリエンスを向上させます。 Googleは、Core Web Vitalsの合格を通じて、訪問者がウェブサイトを訪れる際に不満を感じないようにするために行動するように促しています。

したがって、ユーザーエクスペリエンス、ページスピード、およびウェブサイトのテクニカル品質の改善に寄与し、オンライン可視性に対してすべてプラスの効果をもたらすことができます。

AVIF画像のブラウザサポート

新しいテクニックに関わると、多くのウェブサイト運営者は少し躊躇しますし、数ヶ月待つことを好むことがあります。 一方で、ShopシステムやCMSなどのメジャーリリースのベータテスターになりたくないし、特定のブラウザやデバイスで問題が発生する可能性がないことが絶対ではないこともあります。

AVIF画像フォーマットは、一部の一般的なブラウザがその形式をサポートしているかどうかにかかっています。 ウェブサイトcaniuse.comがこれについて情報を提供します：https://caniuse.com/avif

グローバルブラウザ利用率の約85％がAVIFを既にサポートしています。 ドイツでは、2023年9月2日時点で80.33％…まあ、ドイツよ、まだ携帯電話ネットワークの隙間が普段の出来事であり、いくつかの地域では遅いインターネット接続が続く（私の地域を含む：オフィスでギガビットで作業しているときに、ホームオフィスではたったの9 MBit/secが届く）。

要するに、AVIFが主要ブラウザでしばらくサポートされていることがわかります。

既にAVIF形式を利用しているウェブサイトの数は？

caniuse.comと同様に、w3tech.comは、特定の技術の使用率について統計情報を提供します。 また、ウェブサイトで使用される画像形式に関する情報も提供します。

すべてのウェブサイトのうち、使用率（2023年9月時点）は次のとおりです：

• PNG：82.1％
• JPEG：78％
• SVG：55.2％
• GIF：21.7％
• WebP：9.2％
• ICOとBMP：それぞれ0.2％
• AVIF：0.1％(四捨五入)

現在、ウェブサイトの0.07％未満がAVIF形式を使用しています。Whaaat？それは本当に少なすぎます。しかし、今こそ、モダンな画像形式を使用する技術先駆者になるためのチャンスですよ。右側のグラフでは、毎月の利用が増加していることがすでに明らかになっており…また、パーセント単位での使用がまだ少ないですが。これはきっとすぐに加速するでしょう。

GoogleのモダンなWeb形式の推奨に従っていないウェブサイトは、10％もありません。他のすべては、PageSpeedやユーザーエクスペリエンスで妥協し、おそらくコアウェブバイタルをクリアできないため、オンラインの表示性にネガティブな影響を及ぼします。

AVIFとWebP - あなたのウェブサイトにとってどちらが良いですか？

視覚的に例示するために、TutKit.comのヘッダーエリアからの右側の画像は、透過性のためにAVIFに変換する前はPNGファイルで600 KB以上でした。

現在、159 KBのWebPファイルとして出力されています（フォールバックオプション！）。これがTINYPNGなどのツールを使用して最適化されても、依然として128 KBです。それでも20％縮小されました。

AVIFファイルは、標準的に表示されている当社のフォールバックWebPのサイズのうち、わずか94 KBとなり、視覚的な品質が同じであるにもかかわらず、サイズの59％にすぎません。すべてのテストで、AVIFは同じ視覚的品質の下でWebP形式を上回ることができました。

なぜWebPではなくAVIFを選ぶべきなのか？

• AVIFは透過オプションを持ち、高い圧縮率および低いファイルサイズのまま、より良い画質を維持します。
• AVIFは、主要なブラウザでサポート率がすでに約85％あります。今後ますます増加する傾向です。
• AVIFを使用することで、WebPに比べてウェブサイトの読み込みがさらに高速化されます。非常に多くの製品画像が配置されているカテゴリページなどの画像が多いウェブサイトでは、特に有利です。また、ポートフォリオサイト、参照サイトなど、画像が高品質である必要があるウェブサイトでも、低いファイルサイズで高い視覚的品質を確保できます。

caniuse.comのWebPページに直接書かれていることもありますが「AVIFとJPEG XLは、WebPを置き換えるために設計されています。」 AVIFとJPEG XLはWebPを置き換えることを目指しています。

AVIFに関しては、JPEG XLも競合している可能性があるため、誤った選択をするかもしれませんが、安心してください。JPEG XLのブラウザ対応率は0.08％であり、事実上存在しないと言えるでしょう。

Squooshでは、JPEG XLに画像を変換することができ、WebPと同様の値しか持っていません（下にある画像を参照）。 

AVIFは引き続きフォーマットの優勢者です。すぐに採用して、あなたのウェブサイトにすべての利点を活かしましょう！

Squoosh.app - JPG、PNG、WebPをAVIFに変換するための最適なツール

以前、チームでウェブサイトに画像を最適化するためにオンラインツールのTinyJPGまたはTinyPNGを使用していましたが、今ではGoogleのSquooshに大ファンです。

SquooshはGoogleによって開発された無料の画像コンバータで、オンラインでもローカルでも（node.js！）使用できます。JPEG、PNG、GIF、およびWebPなど、さまざまな形式の画像を変換できます。そして、最高な部分は、あなたの画像をAVIF形式にも変換できることです。

画像コンバータSquooshは、画質を損なうことなく画像サイズを削減するためのさまざまなテクニックを使用します。これには、色情報の圧縮、解像度の削減、冗長データの削除などが含まれます。

画像をドラッグ＆ドロップして、必要な形式を設定します。数回のクリックで、画像を変換して最適化することができます。

以下の画像で、WebP画像を挿入し、AVIF（左）およびJPEG XL（右）に変換して圧縮するとどうなるかを表示します。スライダーを使用して、品質が損なわれずに保つための適切な品質レベルを比較することもできます。標準設定では、比較のために常に1枚の画像が元のファイルになります。つまり、結果に対して完全なコントロールが可能です。

Squooshを使って、コンテンツ管理やWeb開発を行い、WebPやAVIFなどの最新のWeb形式によって画像サイズを縮小し、ウェブサイトの読み込み時間を短縮できます。TinyJPGと同様に、例えばソーシャルメディアにアップロードする場合、JPGファイルのサイズを削減することもできます。TinyJPGとの違いは、圧縮に完全なコントロールがあり、最高品質を最小のサイズで実現するためのさまざまな最適化設定を試すことができます。

以下は、Squooshのいくつかの利点です:

• 変換可能な多様な画像形式をサポート
• 画像サイズを縮小するための多数の技術を使用
• 圧縮された画像のプレビューを提供
• 一連の最適化設定を提供
• ツールは無料で使いやすい

すべてのポジティブな要素には落とし穴があります：現時点では、Squooshは常に1つの画像のみを処理し、バッチ処理をサポートしていません。その機能が追加されることを期待しています。

PHPフレームワークにおける画像のJPGおよびPNGからAVIFやWebPへのサーバーサイドバッチ変換

私たちがTutKit.comで行っているように、ポータルに組み込まれていたJPGおよびPNGファイルをAVIF形式にサーバーサイドで変換し、古いブラウザの予備としてWebP形式にも変換しました。編集者はデザイナーが慣れ親しんでいるように、引き続きJPGやPNG形式で画像をアップロードし、Metaデータでタグ付けすることができるように技術的に解決しました。

サーバーサイドで機能するためには、最新のソフトウェアバージョンを使用してください。新機能imagecreatefromavifとimageavifは、PHP 8.1以降でのみ利用可能で、GD拡張機能がAVIFサポートでビルドされている必要があります。libavifバージョン0.8.2以上が必要です。

また、オペレーティングシステムの互換性にも注意してください。AVIFはリポジトリでlibavif-dev/libavif-develパッケージとして提供されています:

• Ubuntu 21.04以降
• Debian 11以降
• Alpine 3.13以降
• Fedora 34以降

これがTutKit.comのモバイルビューのPageSpeed評価です。デスクトップでは90を超える値を比較的簡単に実現できますが、モバイルビューに対しては十分な難題です。この値をさらに100に向上させるために取り組んでおり、私たちが知っているように、PageSpeedはユーザーエクスペリエンスにとって重要であり、SEOの成功にも寄与しています。

PHPフレームワークLaravelでAVIFを取り込むことが簡単に思える場合も、最終的には単なるAVIFの統合ではなく、JIRAツールで60以上のチケットが費やされました。本当は、確かなカスタム開発では、プラグインによって徹底的に仕事が簡素化されるWordPressのようなクラシックCMSではなく、私たちのように3週間かかることもあります。AVIFの利用は間違いなくメリットがあります!

ちなみに：TutKit.comのようなポータルで、WordPressや他のCMSの代わりにPHPフレームワークを選択する理由について、将来的に記事を書くかもしれません。

WordPressでAVIFを利用するプラグイン

2023年9月時点で、CMS WordPressはAVIF画像のアップロードをデフォルトでサポートしていませんが、バージョン5.0.0以降のContao CMSがAVIFをサポートしています。そのため、WordPressを使用する場合、AVIFで画像を表示するために2つの追加手順が必要です。

1. WordPressでのAVIFサポートの確立
2. JPG/PNG/WEBPからAVIFへの画像変換

WordPressサイトでAVIF画像を使用するためのいくつかのWordPressプラグインがあります。以下にいくつかのプラグインを紹介します:

• AVIFサポート: このプラグインを使用すると、WordPressサイトでAVIF画像のアップロードと表示が可能になります。JPEGやPNG画像を自動的にAVIF画像に変換する機能もサポートされています。
• Converter for Media: このプラグインはWordPressメディアライブラリ内のすべての画像をAVIF画像に変換します。画質や圧縮率をカスタマイズするオプションも提供されます。
• ShortPixel Image Optimizer: このプラグインはWordPressメディアライブラリ内の画像を最適化し、AVIF画像に変換します。画質とパフォーマンスを向上させる他の機能も提供されます。

これらのプラグインは、WordPressサイトでAVIF画像を活用する良い方法です。

こちらがAVIF-Supportプラグインのリンクです — 現時点では、ダウンロードは1,956回で、インストールは800未満ですが、WordPressユーザーにとってAVIFはまだ完全に未知のものです。

UPDATE 05.04.2024: WordPress 6.5ではついにAVIFをサポートします! そのため、サポートプラグインはWordPressの古いバージョン向けにのみ必要となります。WordPress 6.5以上にアップデートする価値はさらに高まります。

Strapiウェブサイト向けのLocal Image Sharpプラグイン

私たち自身も、node.jsベースのStrapi CMSを使用している弊社のエージェンシーウェブサイト4eck-media.deでもAVIFを使用しています。StrapiウェブサイトでAVIF画像を使用するためには、Local Image Sharpプラグイン for Strapiを使用することができます。このプラグインは、sharp画像処理ツールキットを使用して画像をAVIF画像に変換します。

Local Image Sharpプラグインには、次のような機能があります:

• 画像を自動的にAVIF画像に変換
• 画質と圧縮率の調整
• さまざまな画像形式のサポート

プラグインをインストールするには、Strapi Plugin Storeからダウンロードして、他のStrapiプラグインと同様にインストールします。

当社では、引き続き画像をJPGまたはPNGでStrapiシステムにアップロードし、システムがAVIFとWEBPに画像を変換し、ブラウザで適切にサイズ調整されたAVIF画像を表示します。古いブラウザでは、WebP画像をフォールバックソリューションとして使用し、表示します。

画像を適切なディメンションとAVIF、WebPのフォーマットで表示するには、<picture> タグを使用して、画像をJPEGまたはPNGのソースとともに表示します。

モダンなWeb形式の画像は、キャッシングと並んで、私たちのエージェンシーウェブサイトのパフォーマンスを向上させるための最も重要なブースターの1つでした。

メタサムネイルと構造化データに関する注意事項

現時点ではGoogle画像はAVIFフォーマットをサポートしていないため、"image"スキーママークアップでは引き続き関連するJPGファイルを指定しています。また、各製品ページに対して指定されるメタサムネイルも、検索スニペット用のプレビュー画像としてJPGフォーマットを使用しています。

安全第一。フォーラムでは、AVIFに切り替えた後、画像のオンライン表示が消えたという報告もされていますが、私たちはそのような経験は確認していません。オンライン表示は変わらず、ただしGoogleボットの画像用のクローリング要求が増加しました。Googlebotによる画像のクローリング要求は、WebP画像をフォールバックとして備えているため増加しているようです。Googleは現在、WebP画像をインデックス化するようです。

そのため、サムネイルや構造化データには、引き続きJPGソースを使用することをお勧めします。

AVIF画像の編集に使用するツールとソフトウェア

画像はよく編集されるため、一般的な画像編集プログラムでAVIFフォーマットをサポートすることが望ましいです。Webサイトから既存の画像をダウンロードして変更を加えることがありますが、お気に入りの画像プログラムが開くことができると便利です（これはAVIF互換性の最も重要な機能です）。別のフォーマットで保存されても、Squooshなどのツールを使用して再度AVIF形式に変換できます。

次に紹介するのは、2023年9月時点でのAVIF互換の画像編集ソフトウェアのリストです:

• Gimp: バージョン2.10.22以降、AVIFのインポート、編集、エクスポートが可能です。
• Photopea: AVIFのインポート、編集は可能ですが、エクスポートはできません。他の形式で保存を行い、後でAVIFに変換可能です。
• Affinity Photo: AVIFに対応していません
• Photoshop: AVIFに対応していませんが、プラグインを使用すれば互換性が得られます。

Photoshop用AVIFプラグイン

こちらはPhotoshopでAVIFファイルを開くことができるプラグインです。
https://github.com/0xC0000054/avif-format

ダウンロードはページのリリースタブから可能です。

ZIPファイルをダウンロードしたら、Av1Image.8biをPhotoshopがプラグインを検索するフォルダに追加します。通常のインストールでは、以下のフォルダです:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

またはこのフォルダ: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

Photoshopを閉じてください。その後、Photoshopを起動して、プラグインを読み込む必要があります。その後、AVIFファイルを直接Photoshopにドラッグ＆ドロップするか、またはオープンダイアログで開くことができます。

WindowsでAVIF画像を表示する方法

Webサイトから画像をダウンロードして編集したり他の用途に使用したい場合、ファイルブラウザーがこれらを開いて表示できるようにしたいです。

Windows 10以降では、拡張機能が必要です。AVIFファイルをクリックすると、まずエラーメッセージが表示されます。

エラーメッセージにリンクがあります。そのリンクをクリックすると、AVIF拡張機能がMicrosoft Storeに表示されますので、それをダウンロードしてください。サイズはわずか1.61 MBです。

その後、AVIF形式の画像をWindowsのファイルブラウザーで開いて表示できるようになります。

GIFアニメーションの代わりにWebサイトにAVIFアニメーションを埋め込む

GIFアニメーションをAVIFアニメーションに変換するためのオンラインコンバーターがあります。https://mconverter.eu/convert/gif/avif/

私のテストGIFは787 KBですが、AVIFに変換すると411 KBにサイズが削減されます。

私の個人的な結論

AVIFは現代のウェブサイトに最適な画像形式を統合する最良の選択肢だと考えています。圧縮および画質の利点は説得力があります。他の画像形式にはないこれらの特性を組み合わせると、読み込み時間が大幅に向上します。現在、まだ多くのウェブサイトオペレーターがAVIF形式を使用していますが、ブラウザのサポートは85％を超えており、技術的にWebPをフォールバックとして使用する障壁はありません。SEOは変化しています。AVIF単独ではページ速度インサイトでトップのスコアを獲得するのに十分ではありません。そのためには、他の技術的要因が必要です。よりモダンな画像形式を組み込む際に、WebPと比較してAVIFを使用するとより良い結果を得られるでしょう。

キーワード最適化されたコンテンツだけではもはや十分ではありません。AIによってインターネットはコンテンツで満たされ、多くのウェブサイトがオンラインの可視性を競い合い高度なコンテンツ機能で競い合っています。技術的なSEOや特にCore Web Vitalsをクリアすることがよりランキングに影響する要因であり、Googleは最高のユーザーエクスペリエンスを提供したいと考えています。AVIFは、読み込み時間を短縮し、ユーザーエクスペリエンスを向上させ、将来的にオンラインの可視性を高めるための解決策の一部です。

SEO、ユーザーエクスペリエンス、デザイン、技術動向に関する詳細情報

基本的に、SEO、ユーザーエクスペリエンス、AIツール、新しいWeb技術に関連するトピックが興味深い場合は、当社のトレーニングやこのブログの他の記事で詳細を知ることができます。

あなたの番です

この記事が役立つ場合は、お気軽にGoogleでの レビュー を書いてください。すべてのレビューが私たちのサポートにつながります。AVIFをWebプロジェクトで使用する際にサポートが必要な場合は、弊社エージェンシーサイト を通じてお問い合わせください。