# AVIFとは？次世代画像フォーマットの特徴・圧縮率から変換ツールまで徹底解説

> **Canonical:** https://www.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/avif/
> This Markdown is the AI-optimized parallel version of the canonical HTML page above. Authority, freshness, and canonicalness belong to the canonical page.

> **Schema.org/Article**
> - headline: AVIFとは？次世代画像フォーマットの特徴・圧縮率から変換ツールまで徹底解説
> - author: 柏崎剛
> - datePublished: 2024-12-16T02:09:29+09:00
> - dateModified: 2025-12-18T12:12:36+09:00
> - inLanguage: ja
> - url: https://www.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/avif/
>
> **Schema.org/BreadcrumbList**
> - 1: SEO対策研究室 (https://md.tsuyoshikashiwazaki.jp/)
> - 2: AVIFとは？次世代画像フォーマットの特徴・圧縮率から変換ツールまで徹底解説 (https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/avif/)

目次閉じるもっと見る

## 要約

- AVIFは「AV1 Image File Format」と呼ばれるウェブ画像向けの新しい画像圧縮フォーマットです。
- 2024年8月30日以降、Google検索でサポート対象の画像形式として認められています。
- JPEGやPNGより高い圧縮効率を持つ一方、対応環境整備が進行中であり、導入時には周辺状況も視野に入れるべきです。

## AVIF（.avif）とは

AVIFは「**AV1 Image File Format**」という正式名称を持つ、ウェブ画像向けに開発された新しい画像圧縮フォーマットです。拡張子は「.avif」となり、JPEG（.jpeg）やPNG（.png）と同様に画像を保存する形式を示します。

高い圧縮率を備えており、JPEGや**WebP**と比較して同等以上の画質を、さらに小さなファイルサイズで実現できる点が特色といえます。また、透過（アルファチャンネル）やHDRにも対応しているため、多彩な表現が行えます。対応ブラウザやツールは増え続けており、Web開発において視野に入れるべき存在でしょう。

このフォーマットは、GoogleやAmazonなど広く知られる企業が参加する非営利団体「Alliance for Open Media（AOM）」によって開発されました。

読み方は「エイビフ」または「エイヴィフ」とされることが多いものの、地域や文脈によって揺らぎが生じます。英語圏では「エイヴィアイエフ（A-V-I-F）」とアルファベットで発音するケースもあります。

### AVIFに対応しているブラウザは？

2024年8月30日、[Google検索がAVIFをサポート対象](<https://developers.google.com/search/blog/2024/08/happy-avifriday?hl=ja>)の画像形式として正式に認めましたが、これは必ずしも全てのブラウザが即座に対応していることを意味するわけではありません。たとえばChromeは比較的早期からAVIFに対応しているとされていますが、他のブラウザでも最新バージョンにアップデートすることでAVIFが表示できる可能性があります。

対応状況はブラウザごとに異なります。下記のリンク先は、ブラウザ対応状況を一覧で確認できる有名なサービスです。

> ["avif" | Can I use... Support tables for HTML5, CSS3, etcA modern image format based on the (/av1). AVIF generally has better compression than (/webp), JPEG, PNG and GIF and is designed to supersede them. AVIF compete...外部リンク!\["avif" | Can I use... Support tables for HTML5, CSS3, etc\](<https://caniuse.com/img/favicon-128.png>)](<https://caniuse.com/?search=avif>)

> A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. AVIF competes with JPEG XL which has similar compression quality and is generally seen as more feature-rich than AVIF.
> 
>  ![avifブラウザ対応状況](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/avif%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81-1024x700.png>) [https://caniuse.com/?search=avif](<https://caniuse.com/?search=avif>)

Can I useでは、主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）でのAVIFサポート状況が随時更新され、どのバージョンから利用できるかが明確に示されています。こうした情報を参照しつつ、導入計画を進めていくことが視野に入れるべきでしょう。

## AVIFの長所

![AVIFはWebPよりも高い圧縮率を実現し画像の軽量化に成功している](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/AVIF%E3%81%A8%E3%81%AF.png>)

AVIFには、サイト運営者が視野に入れるべき利点があります。JPEGやWebPと比較して、同等の画質を維持しながら最大約50％のファイルサイズ削減が見込めるため、ページ読み込み速度を向上させやすくなります。それに伴い、SEO面でのパフォーマンス向上や検索順位の上昇、さらにはユーザー体験（UX）の改善も期待できます。

さらに、AVIFは透過（アルファチャンネル）やHDR、広色域に対応しており、多様な画像表現を用いる場面にも適しています。また、複数の画像を組み合わせることでGIFに近いアニメーションを表現でき、柔軟なビジュアル戦略を打ち立てるうえで有用といえるでしょう。

## AVIFの欠点

AVIFには、依然として克服すべきデメリットが存在します。  
まず、対応環境が限定されている点です。一部のブラウザや古いデバイスではAVIFがサポートされていないため、フォールバック用のJPEGやWebPを視野に入れるべきでしょう。また、エンコード速度も課題となっており、特に高解像度画像の変換に時間がかかる場合があります。さらに、WordPressなどのCMSにおいてネイティブサポートが不足しているため、プラグインや外部ツールに頼らざるを得ず、全ての画像をAVIF形式に移行する際の障壁になり得ます。

## AVIFファイルの開き方

AVIFファイルを開く際には、対応ブラウザや画像ビューアを視野に入れるべきです。

以下の方法を確認してみてください。

- **対応ブラウザで開く**  
最新版のGoogle Chrome、Firefox、Microsoft EdgeなどはAVIFに対応しています。開きたいAVIFファイルを右クリックし、【プログラムから開く】を選ぶことで表示できます。
- **対応画像ビューアを利用する**  
Windows 10以降やmacOSにおいて、XnViewやIrfanViewなどのサードパーティツールを導入すればローカルで閲覧できます。対応していない場合は、使用中のビューアが最新であるかを確認することが望ましいです。

上記のステップを踏んでも表示できない場合、利用中のブラウザバージョンが古い可能性があります。その際はブラウザを最新版にアップデートしてください。それでも表示されない場合、OSがAVIFに未対応である可能性がありますので、AVIF対応ソフトをインストールしてみることも視野に入れるべきです。状況に応じて、オンラインツールによるJPEGやPNGへの変換をして閲覧を行ってください。

## おすすめのAVIF変換ツール

AVIFを使う場合、AVIF非対応のブラウザでは<picture>タグを使用してフォールバック画像を指定することで最適に表示されるようにできますが、既存の画像をAVIF形式に変換する際にはAVIF変換ツールを使用する方法もあります。

手軽にAVIF変換ができるツールを紹介します。

### Convertio（ファイルコンバーター）

![Convertio おすすめのAVIF変換ツール](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/AVIF%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB-1024x513.png>)

Convertio（ファイルコンバーター）は、300以上のファイル形式を相互変換可能なクラウドベースのオンラインツールです。

簡単な操作で動画、画像、文書など様々な形式に対応し、AVIF形式への変換も可能です。クラウド処理によりローカルリソースを節約し、変換後のファイルは24時間以内に削除されるためセキュリティも万全と言われています。動画の品質やコーデック設定など詳細な調整が可能で、全てのプラットフォームで利用できます。無料版では100MBのファイルサイズ制限があります。

> [Convertio — ファイルコンバーターConvertio －オンライン上でファイルを簡単に変換するツールです。309以上の様々な文書、画像、スプレッドシート、電子書籍、アーカイブ、プレゼンテーション、音声及び動画のフォーマットをサポートしています。外部リンク!\[Convertio — ファイルコンバーター\](<https://static.convertio.co/img/apple-touch-icon-180x180-precomposed.png>)](<https://convertio.co/ja/>)

### Squoosh

![Squoosh - おすすめのAVIF変換ツール](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/AVIF%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB2-1024x523.png>)

Squooshは、Googleが提供するオープンソースの画像圧縮およびフォーマット変換ツールです。

Webブラウザ上で動作し、ローカル環境内で全ての処理が行われるため、データの外部送信が不要で高いプライバシー保護が期待できます。

対応フォーマットはJPEG、PNG、WebP、そしてAVIFも変換できます。特にAVIF形式への変換と高効率な圧縮が可能です。ユーザーはドラッグ＆ドロップで画像を簡単に操作でき、リアルタイムで圧縮前後を比較できるインタラクティブなUIが便利です。また、画質、圧縮率、画像の解像度、カラープロファイルの調整など、技術的に柔軟な設定が可能な点が好評価に繋がっています。

> [SquooshSquoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.外部リンク!\[Squoosh\](<https://squoosh.app/c/icon-large-maskable-c2078ced.png>)](<https://squoosh.app/>)

### CloudConvert

![CloudConvert - おすすめのAVIF変換ツール](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/AVIF%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB3-1024x504.png>)

CloudConvertは、200以上のファイル形式を高度に変換できるオンラインツールで、画像、動画、音声、ドキュメントなどの多様なデータに対応します。

AVIF形式への変換機能があり、JPEGやPNGから高効率なフォーマット移行ができます。全ての変換処理はISO 27001認証に基づき安全に実施されます。

> [File Converter | CloudConvertDrop a file and pick what to turn it into. CloudConvert handles 200+ formats across documents, images, audio, video, archives and more — straight from your brow...外部リンク!\[File Converter | CloudConvert\](<https://cloudconvert.com/build/assets/logo-CbcS2NPI.svg>)](<https://cloudconvert.com/>)

## まとめ

Webサイト向けの画像フォーマットであるAVIFは、現時点で全てのデメリットを克服しているわけではないものの、将来的な成長が期待される注目の存在です。まだ積極的な全面移行を推奨できる段階にはありませんが、対応環境や変換ツールが整備されていく可能性は視野に入れるべきでしょう。

今後もAVIFや関連ツールの開発状況に注目し、必要に応じて上手に活用していくことが望まれます。

## 独自調査と集計結果

次世代フォーマットのAVIFは既に導入されていますか？集計データを拡大[このデータセットの詳細ページを見る](<https://md.tsuyoshikashiwazaki.jp/datasets/detail-19980/>)

## よくある質問

 

### 📖AVIFとはなんですか？

   

📕AVIFは正式名称「AV1 Image File Format」と言い、ウェブ画像向けに開発された最新の画像圧縮フォーマットです。拡張子は.avifと表示されます。

    

### 📖AVIFの読み方は？

   

📕読み方は一般的に「エイビフ」または「エイヴィフ」と発音します。

    

### 📖AVIFとJPEGの違いは？

   

📕画像圧縮率です。AVIFはJPEGに比べて50％も画像を圧縮することに成功しています。高いデータ削減を成功しながらも高画質を保ったのがAVIFです。

   

## 関連する記事

[!\[WebPの導入とはと記載された画像\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2020/03/WebP%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%A8%E3%81%AF-300x169.jpg>)](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/introducing-webp/>)[WebPとは？メリット・デメリットや他の画像形式との違い・変換方法を徹底解説](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/introducing-webp/>)WebP画像フォーマットのメリット・デメリットや他の画像形式…[!\[AMPの導入とはと記載された画像\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2020/04/AMP%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%A8%E3%81%AF-300x169.png>)](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/how-to-install-amp-html/>)[AMPとは？モバイルSEOを強化する最新対策と導入方法を徹底解説](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/how-to-install-amp-html/>)AMP導入でモバイルSEOを強化し、ページ高速化とユーザーフ…[!\[広告SEOの考え方　SEO対策と関係するの？\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/12/%E5%BA%83%E5%91%8ASEO-300x158.png>)](<https://md.tsuyoshikashiwazaki.jp/blog/seo/ad-seo/>)[広告SEOとは？Googleエコシステムへの参加が検索順位に与える新たな可能性](<https://md.tsuyoshikashiwazaki.jp/blog/seo/ad-seo/>)広告SEOとは、Googleエコシステムへの積極的な参加が検…[!\[コアウェブバイタル改善方法を解説する記事のアイキャッチ画像 オレンジ色の背景に最新情報！コアウェブバイタル改善方法というテキストと笑顔の柏崎剛と頭を抱える人のイラストが配置されている\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2022/04/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%BB%E3%82%B3%E3%82%A2%E3%82%A6%E3%82%A7%E3%83%96%E3%83%90%E3%82%A4%E3%82%BF%E3%83%AB%E6%94%B9%E5%96%84%E6%96%B9%E6%B3%95-300x169.png>)](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/>)[コアウェブバイタルとは？3つの指標とSEOを高めるための対策方法を徹底解説](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-core-web-vitals/>)コアウェブバイタルはGoogle検索ランキングに影響するペー…[!\[ドメインパワー とは？調べ方やあげ方強化方法を解説\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/10/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%91%E3%83%AF%E3%83%BC-300x169.jpg>)](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-a-domain/check-domain-power/>)[ドメインパワーとは？無料チェックツールの使い方から調べ方まで詳しく解説](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-a-domain/check-domain-power/>)ドメインパワーとはWebサイトの信頼性と権威性を示す指標で、…[!\[オレンジ色の背景に『CTAとは？ 意味・作り方・改善方法』と書かれた、CTAに関する解説記事のアイキャッチ画像。右側には、記事の著者である男性（柏崎剛氏と思われる）がオレンジ色のメガネをかけ、指さしているイラストが配置されています。\](<https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2024/05/CTA-300x169.png>)](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-cvr/howto-call-to-action/>)[CTA（Call To Action）とは？ビジネス成果を高める意味・配置のコツ...](<https://md.tsuyoshikashiwazaki.jp/blog/what-is-cvr/howto-call-to-action/>)ビジネス成果を高めるためのCTA（Call To Actio…‹›

## 記事が気に入ったらシェアをお願いします！

[](<https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/line?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)[](<https://www.addtoany.com/add_to/sms?linkurl=https%3A%2F%2Fwww.tsuyoshikashiwazaki.jp%2Fblog%2Fwhat-is-core-web-vitals%2Favif%2F&linkname=AVIF%E3%81%A8%E3%81%AF%EF%BC%9F%E6%AC%A1%E4%B8%96%E4%BB%A3%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%AE%E7%89%B9%E5%BE%B4%E3%83%BB%E5%9C%A7%E7%B8%AE%E7%8E%87%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%BE%E3%81%A7%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC>)

---

> **Schema.org/Person** (author)
> - name: 柏崎剛
> - url: https://www.tsuyoshikashiwazaki.jp/profile/
>
> **Schema.org/Organization** (site owner)
> - name: SEO対策研究室
> - url: https://www.tsuyoshikashiwazaki.jp/
> - logo: https://www.tsuyoshikashiwazaki.jp/wp-content/uploads/2025/07/cropped-20250722-114641-3bfe11f1.jpg
