First CHTools無料Webツール

FIRST CH TOOLS / 画像 / 12 AVIF CONVERTER

AVIF変換（PNG/JPEG→AVIF一括）＋<picture>生成

PNG/JPEG画像をAVIF形式に変換し、そのまま貼れる <picture> スニペットを生成します。複数枚の一括変換・ZIPダウンロードに対応。処理はすべてお使いの端末内で完結します。

ここに画像をドラッグ&ドロップ またはクリックしてファイルを選択（PNG / JPEG・複数可）
45〜60が実用的な目安です（AVIFはWebP/JPEGより低い数値でも高画質。数値が高いほど高画質・大容量）

How to Use

  1. 品質を決めるスライダーで1〜100を指定。AVIFは45〜60でも十分きれいです。
  2. 画像を選ぶPNG/JPEGをドラッグ&ドロップ、またはクリックで選択（複数可）。すぐ変換が始まります。
  3. 保存＆コピーAVIFを保存（1枚ずつ／ZIP一括）し、<picture> スニペットをコピーしてHTMLに貼り付け、alt を記入します。

About This Tool

AVIFはAV1動画コーデックをベースにした新しい画像形式で、同等画質でJPEG/WebPよりさらに小さくなることが多く、サイト表示速度の改善（Core Web Vitals対策）に有効です。 一方でごく一部の古い環境では未対応のため、<picture> でAVIFを優先しつつ元のJPEG/PNGをフォールバックとして残すのが実務的な使い方です。本ツールが生成するスニペットはこの定型パターンに、レイアウトシフトを防ぐ width/height と loading="lazy" を含めています。 変換処理はブラウザ内のWebAssembly（libavif）で行うため、画像が外部サーバーへアップロードされることはありません。ロゴ・未公開デザインなど機密性のある画像も安心してご利用いただけます。

AVIF変換後に貼る <picture> スニペットの中身

変換した画像ごとに、次の形のHTMLを出力します（例: photo.jpg を変換した場合。width・height には元画像のピクセル数が入ります）。

記述役割
<source type="image/avif">AVIFを表示できるブラウザは srcset のAVIFを読み込みます
<img src="元画像">AVIFに対応していないブラウザは、変換前のPNG/JPEGをそのまま表示します（フォールバック）。元画像もAVIFと一緒にアップロードしてください
width / height画像の読み込み前から表示枠の縦横比が決まるため、読み込み後にレイアウトがずれません
loading="lazy"画面外の画像は、近くまでスクロールされてから読み込みます。ページ最上部のメイン画像では外してください
alt=""空のまま出力します。画像の内容を表す文を書き入れてください（飾りの画像なら空のままにします）

ぼかした縮小画像を先に見せる「プレースホルダー画像（LQIP）」を作る機能はありません。変換するのは元画像と同じ大きさのAVIFだけです。

Other Tools