AVIF in Base64

So wandeln Sie AVIF in Base64 um

1. Legen Sie eine .avif-Datei im Feld ab oder wählen Sie sie über die Dateiauswahl.
2. Lassen Sie Max. Breite, Umwandeln in und Metadaten entfernen (EXIF) leer, um die Originaldatei zu kodieren.
3. Lassen Sie Ausgabe als auf Data-URI oder wählen Sie CSS, <img>, Markdown, JSON oder reines Base64.
4. Ausgabe kopieren. Die Anzeige zeigt Eingabegröße, Ausgabegröße und Overhead.

Bleibt die Vorschau leer, kann Ihr Browser AVIF nicht dekodieren. Die Datei wird trotzdem korrekt kodiert; sie lässt sich hier nur nicht anzeigen.

Warum Sie AVIF meist unverändert lassen sollten

AVIF ist dafür da, klein zu sein. Bei Fotos schlägt es JPEG und WebP bei ähnlicher Bildqualität oft deutlich, was es für eingebettete Platzhalter und Vorschaubilder attraktiv macht, bei denen jedes Byte Base64 zählt.

Der Haken ist das Kodieren. Die Optionen zum Skalieren, Umwandeln und Entfernen von Metadaten zeichnen das Bild auf einem Browser-Canvas neu, und Browser können einen Canvas als PNG, JPEG oder WebP exportieren, nie als AVIF. Daher gilt:

• Format beibehalten mit einer Max. Breite ergibt ein PNG. Bei einem Foto kann dieses PNG ein Vielfaches der AVIF-Größe haben.
• Umwandeln in WebP ist größenmäßig der nächste Ersatz, außer in Safari, das auch kein WebP kodieren kann und auf PNG ausweicht.
• Umwandeln in JPEG bietet breite Kompatibilität, verliert aber die Transparenz.

Brauchen Sie ein kleineres AVIF, skalieren Sie es mit einem AVIF-fähigen Werkzeug wie einem Bildeditor oder einem Kommandozeilen-Encoder und kodieren Sie diese Datei dann hier unverändert.

AVIF in Base64

AVIF verwendet dasselbe ISO Base Media File Format wie HEIC und MP4. Die Datei beginnt mit einer ftyp-Box: vier Bytes Boxgröße, die Buchstaben ftyp und eine Marke (Brand).

Das fünfte Zeichen ändert sich mit der Boxgröße, prüfen Sie im Code zur Erkennung von AVIF also ab Zeichen 9 auf eXBhdmlm oder eXBhdmlz.

Fallbacks und Einbetten

Ein normales AVIF-Bild auf einer Website bekommt meist über <picture> einen Fallback: zuerst eine AVIF-Quelle, danach JPEG oder WebP. Das geht auch mit Data-URIs, dann ist aber jedes Format im HTML eingebettet, und die Seite schleppt alle mit. Für alles, was größer als ein kleiner Platzhalter ist, verlinken Sie lieber die Dateien und lassen den Browser nur die laden, die er verwenden kann.

Um eine erhaltene Base64-Zeichenkette zu prüfen, dekodieren Sie sie mit Base64 in Bild. Zu WebP, das die meisten Browser auch kodieren können, siehe WebP in Base64.

Häufige Fragen