画像をアップロードせずにAVIF変換する方法｜WebPよりさらに軽い93%減の実測つき

iPhoneのHEIC画像を、WebP変換とAVIF変換で比較した図。 アプリ・Webサービス
2026.01.09
本サイトはプロモーションが含まれています

画像をAVIFに変換したい。でも、変換サイトに写真をアップロードするのは抵抗がある。そもそもWebPとAVIF、どっちを使えばいいのかもよく分からない。

この記事では、その全部に答えます。

結論から言うと、AVIF変換はブラウザだけで完結できます。私が自作した無料ツールを使えば、画像は一切サーバーに送信されません。実測では、iPhoneで撮った2.5MBのHEIC写真が180KBになりました。約93%減です。

→AVIF変換ツールを使ってみる

ここからは、このツールを作ることになった経緯と実測データ、WebPとの使い分けを順番に書いていきます。まずは懺悔から始めさせてください。

「WebPが最強」だと思っていました。 だってGoogleが推してたもん😞

先日公開したブロガー向けの「WebP一括変換ツール」ですが、実はこのツールを作った後に、ある衝撃的な事実を知ってしまいました。

「えっ、WebPよりもさらに軽い規格（AVIF）があるの…？しかもWordPressも対応しているだって？」

調べてみると、AVIF（エーブイアイエフ）は、WebPよりもさらに20〜30%軽く、Netflixなどが4K配信にも採用している最新技術だとか。

「Googleが推奨してるし、WebPで十分でしょ」と高を括っていた私は、顔から火が出る思いでした。

「これは…作るしかない。AVIF版も！」

そう決意して開発を始めたものの、これが技術的な泥沼の始まりでした。

開発の裏話：AVIFは想像以上に難しかった

ここからは少しだけ、開発の苦労話を。（興味ない方は読み飛ばしてください！）

WebP変換は、実はブラウザの標準機能だけで実現できます。比較的簡単でした。

しかし、AVIF変換はそうはいきません。

ブラウザ標準ではAVIFを「作る」機能がまだ弱いため、WebAssembly（WASM）という高度な技術を使って、画像処理エンジンそのものをブラウザ上で動かす必要がありました。

AIと相談しながらコードを書き、WordPress上で動かそうとすると…

  • 「WASMファイルが読み込めない」
  • 「WordPressでは動作しない」
  • 「Chromeでは動くけどSafariで動かない」

エラーの連続に「これ、本当に完成するのか…？」と何度も心が折れかけましたが、何日も修正を重ね、ようやく実用レベルまで持っていけました。

おそらく、WordPress上でここまで手軽に、ブラウザだけでAVIF変換できるツールはかなり珍しいはずです。

【実験】同じ画像で徹底比較してみた

苦労した甲斐あって、性能は劇的です。

私のiPhoneで撮影した写真を、WebPとAVIFで同じリサイズ設定で比較してみました。

項目元画像 (HEIC)WebPAVIF (今回)
ファイルサイズ2.5MB350KB180KB
削減率–約86%削減約93%削減
画質基準ほぼ同等ほぼ同等

見た目の画質は、並べて拡大しても違いがわからないレベル。（もちろん画像によって削減率は変動します）

しかしファイルサイズは、WebPより小さく、元画像の10分の1以下にまで落ちました。

「1ページに画像の枚数が増えるほど、読み込み速度には大きな差」が生まれます。モバイル回線での表示速度や、PageSpeed Insightsのスコアを1点でも上げたい執念深いブロガーにとって、この差はあまりにも大きいです。

（ちなみにこのページのアイキャッチ画像は、8.3MBのPNGが、55KBのAVIFに変換されております。AVIFすごい！）

⚠️AVIF変換ツールの正直なデメリット もちろんAVIFツールにも欠点があります。それはWASMを読み込むために、初回起動に少し時間がかかることです。AVIFツールを作った手前、こんなことを言うのは何ですが…「ぶっちゃけ、普段使いならWebPでも十分いいと思います」（本音）。

AVIF変換ツールの特徴

エンジン部分は最新技術（WASM）に入れ替えましたが、使い勝手の良さはWebP版を踏襲しています。

✅ 完全ブラウザ完結（安全性）

これが最もこだわった点です。画像データは一切サーバーに送信されません。

あなたのPCやスマホの中で、WASMエンジンが画像を処理します。

プライバシーが完全に保護されるため、家族の写真でも安心して使えます。

詳しくは「クライアントサイド技術」を参考にしてください。

✅ iPhone写真（HEIC）対応

iPhoneユーザーの皆様、お待たせしました。HEIC形式の写真も、変換なしでそのままドラッグ＆ドロップしてください。一発でAVIFになります。（HEICの読み込みはSafariが安定します。Chrome系のブラウザでは、一部のHEICが変換できないことがあります）

✅ テーマ別プリセット完備

WebP版同様、主要なWordPressテーマに合わせたサイズ設定を用意しました。

  • SWELL アイキャッチ (1200×630)
  • Cocoon アイキャッチ (1280×720)
  • SANGO / AFFINGER 記事幅など

実際の使い方（3ステップ）

  1. サイズを選ぶ：プリセットから選ぶか、幅を直接入力します。高さは自動的に比率維持されます。
  2. 画像をドロップ：ドラッグ&ドロップ、またはファイル選択で画像を読み込みます。複数枚まとめてOKです。
  3. ダウンロード：変換が完了したら「まとめてZIPダウンロード」をクリック。

所要時間：約30秒〜1分。

またセキュリティのため端末内で処理を行うので、PCやスマホの性能に処理時間は依存します。

「WebP」と「AVIF」どっちを使えばいい？

「AVIFが凄いのはわかったけど、WebP版とどっちを使えばいいの？」

そんな疑問を持つ方のために、私の使い分け基準を紹介します。

🟦 WebP変換ツールがおすすめな人

  • 「変換スピード」重視の人（サクサク変換したい）
  • 大量のスクショや図解を記事に貼る人
  • 初回の読み込みを待ちたくない人（AVIF版はWASMエンジンの読み込みで初回だけ少し待ちます）

→ WebP一括変換ツールはこちら

🟪 AVIF変換ツール（今回）がおすすめな人

  • 「軽さ」こそ正義だと思っている人
  • アイキャッチ画像など、目立つ場所の画像を極限まで軽くしたい人
  • PageSpeed Insightsのスコアを90点台に乗せたい人
  • WebPの圧縮結果をブラウザに左右されたくない人（WebPはGoogle推しの技術ゆえ、SafariだとChromeほどギュッと圧縮されない場合があります。AVIF版は独自エンジンを使うので、ブラウザ問わず高圧縮です！）

→AVIF変換ツールはこちら

ちなみに私自身の運用は「アイキャッチはWebP、本文はAVIF」です。XにAVIFのアイキャッチが表示されない問題を実際に検証して、この結論に落ち着きました。詳しくは以下の記事で書いています。

→https://today-is-the-first-day.com/webp-avif-x-ogp

よくある質問 (FAQ)

Q. AVIFに対応していないブラウザは？

A. 2026年現在、Chrome、Firefox、Safari、Edgeなど主要ブラウザはすべてAVIFの表示に対応済みです。

Q. HEICの写真はどのブラウザで変換すればいいですか？

A. iPhoneのHEIC写真を読み込むならSafariが安定します。Chrome系のブラウザでは、HDRやLive Photos由来など一部のHEICが読み込めないことがあるためです。ただしSafariでAVIFに変換すると、Chrome系よりサイズが少し大きくなりがちです。そのため「HEICを一番軽いAVIFにしたい」場合は、いったんHEICをJPEGに変換してから（当サイトのHEIC変換ツールが使えます）、Chrome系ブラウザでこのAVIFツールにかけるのが確実です。手間はかかりますが、これが最も軽く仕上がるルートです。

→HEIC変換ツール

Q. スマホでも使えますか？

A. はい、iPhoneでもAndroidでも動作します。ただし、AVIF変換はCPUパワーを使うため、大量の画像を処理する場合はPCの方がバッテリーに優しいです。

Q. 画質は劣化しますか？

A. 圧縮する以上、データ上は劣化しますが、初期設定（画質50）であれば人間の目ではほぼ判別できません。気になる方は設定を「80」くらいに上げてみてください。

＊あわせて読みたい

スポンサーリンク

コメント