AVIF в Base64

Как перевести AVIF в Base64

1. Перетащите файл .avif в область или выберите его через окно выбора файла.
2. Оставьте Макс. ширина, Конвертировать в и Удалить метаданные (EXIF) пустыми, чтобы закодировать исходный файл.
3. Оставьте Формат вывода на Data URI или выберите CSS, <img>, Markdown, JSON или чистый Base64.
4. Нажмите Скопировать результат. Индикатор показывает размер ввода, размер результата и прирост.

Если превью остаётся пустым, ваш браузер не умеет декодировать AVIF. Файл всё равно закодирован правильно, просто показать его здесь нельзя.

Почему AVIF обычно лучше оставить как есть

AVIF придуман ради малого размера. На фотографиях он часто обходит JPEG и WebP при сопоставимом визуальном качестве, поэтому привлекателен для встроенных заглушек и миниатюр, где на счету каждый байт Base64.

Подвох в кодировании. Опции ресайза, конвертации и удаления метаданных перерисовывают картинку на canvas браузера, а браузеры экспортируют canvas в PNG, JPEG или WebP, но никогда в AVIF. Поэтому:

• Сохранить формат вместе с Макс. ширина даёт PNG. Для фотографии такой PNG может быть во много раз больше AVIF.
• Конвертировать в WebP – самая близкая замена по размеру, кроме Safari: он не умеет кодировать и WebP, поэтому выдаёт PNG.
• Конвертировать в JPEG даёт широкую совместимость, но теряет прозрачность.

Если нужен AVIF поменьше, уменьшите его инструментом, который умеет AVIF, например графическим редактором или консольным кодировщиком, а затем закодируйте получившийся файл здесь без изменений.

Как выглядит AVIF в Base64

AVIF использует тот же базовый медиаформат ISO, что HEIC и MP4. Файл начинается с бокса ftyp: четыре байта размера бокса, буквы ftyp и бренд.

Пятый символ меняется вместе с размером бокса, поэтому при определении AVIF в коде сверяйте eXBhdmlm или eXBhdmlz, начиная с 9-го символа.

Запасные варианты и встраивание

Обычная картинка AVIF на сайте, как правило, идёт с запасным вариантом через <picture>: сначала источник AVIF, после него JPEG или WebP. Так можно сделать и с data URI, но тогда все форматы встроены в HTML и загружаются вместе со страницей. Для всего, что крупнее маленькой заглушки, лучше подключать файлы ссылками и позволить браузеру скачать только тот, который он умеет показывать.

Чтобы проверить полученную строку Base64, декодируйте её в Base64 в картинку. Про WebP, который большинство браузеров умеет и кодировать, рассказывает страница WebP в Base64.

Вопросы и ответы