AVIF を Base64 に変換

AVIF を Base64 に変換する方法

1. .avif ファイルを枠にドロップするか、ファイル選択で選びます。
2. 元のファイルをそのままエンコードするには、最大幅、変換先、メタデータ（EXIF）を削除を空のままにします。
3. 出力形式は Data URI のままにするか、CSS、<img>、Markdown、JSON、プレーン Base64 から選びます。
4. 出力をコピーします。メーターには入力サイズ、出力サイズ、増加分が表示されます。

プレビューが空のままなら、お使いのブラウザは AVIF をデコードできません。ファイル自体は正しくエンコードされています。ここで表示できないだけです。

AVIF は通常そのままにしておくべき理由

AVIF は小さくするための形式です。写真なら、同程度の見た目の品質で JPEG や WebP より小さくなることが多く、Base64 の 1 バイトも惜しいインラインのプレースホルダーやサムネイルに向いています。

問題はエンコードです。リサイズ、変換、メタデータ削除のオプションはブラウザのキャンバスに画像を描き直しますが、ブラウザがキャンバスから書き出せるのは PNG、JPEG、WebP で、AVIF は書き出せません。そのため次のようになります。

• 形式を維持で最大幅を指定すると PNG になります。写真の場合、その PNG は AVIF の何倍ものサイズになることがあります。
• WebP に変換すると、サイズの面では最も近い代替になります。ただし Safari は WebP もエンコードできず、PNG にフォールバックします。
• JPEG に変換すると幅広い互換性が得られますが、透過は失われます。

もっと小さな AVIF が必要なら、画像エディターやコマンドラインのエンコーダーなど AVIF に対応したツールでリサイズし、そのファイルをここで変更せずにエンコードしてください。

Base64 での AVIF

AVIF は、HEIC や MP4 と同じ ISO ベースメディアファイル形式を使います。ファイルは ftyp ボックスで始まり、4 バイトのボックスサイズ、ftyp という文字、ブランドが続きます。

5 文字目はボックスサイズによって変わるので、コードで AVIF を判定するときは、9 文字目以降の eXBhdmlm か eXBhdmlz で照合してください。

フォールバックとインライン化

ウェブサイトで普通に AVIF 画像を使うときは、<picture> で AVIF のソースを先に、JPEG や WebP を後に並べてフォールバックを用意するのが一般的です。Data URI でも同じことはできますが、すべての形式が HTML にインライン化され、ページがそれを全部抱えることになります。小さなプレースホルダーより大きいものは、ファイルへのリンクにして、ブラウザが使える 1 つだけをダウンロードさせてください。

受け取った Base64 文字列を確認するには、Base64 を画像にでデコードしてください。ほとんどのブラウザがエンコードにも対応している WebP については、WebP を Base64 にをご覧ください。

よくある質問