GIF в Base64

Как конвертировать GIF в Base64

1. Перетащите файл .gif в поле или выберите его через диалог.
2. Если GIF анимированный, не трогайте Макс. ширина, Конвертировать в и Удалить метаданные (EXIF).
3. Выберите Формат вывода: Data URI, CSS background-image, HTML <img>, Markdown или чистый Base64.
4. Нажмите Скопировать результат. Счётчик показывает, насколько текст больше файла.

В превью анимация проигрывается, так что перед копированием можно убедиться, что файл тот самый.

Анимация и параметры перекодирования

Параметры над результатом перерисовывают изображение на canvas. Canvas хранит одну статичную картинку, а записывать из него GIF браузеры не умеют, поэтому перекодированный GIF превращается в PNG (или в JPEG либо WebP, если выбрать их) только с первым кадром. Это полезно, когда нужна статичная миниатюра анимации, и не годится, когда нужна сама анимация.

Если анимированный GIF слишком большой, решать это нужно до кодирования: уменьшить число кадров, размеры или палитру в редакторе GIF либо заменить его коротким видео. Зацикленный MP4 или WebM обычно намного меньше того же ролика в GIF.

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

Прозрачный GIF 1×1 ниже занимает 42 байта, или 56 символов Base64:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

Когда-то такими заполняли табличную вёрстку, а сейчас он встречается как заглушка в src у изображений с ленивой загрузкой: корректная картинка не даёт показаться значку битого изображения и не требует лишнего запроса.

Размер: GIF быстро растут

По современным меркам GIF сжимает слабо, а анимированный GIF хранит каждый кадр. Двухсекундная гифка-реакция легко весит несколько мегабайт, а в виде Base64 – ещё на несколько мегабайт текста больше. Встраивайте только маленькие GIF, например индикаторы загрузки или крошечные иконки. Всё, что крупнее, лучше держать обычным файлом: его можно закешировать и загрузить лениво, а data URI скачивается заново с каждой страницей, в которой он есть.

Для почты GIF в Base64 подходят плохо. Gmail и другие веб-клиенты не показывают изображения из data URI, поэтому анимированные GIF в рассылках вставляют ссылками на размещённые файлы. См. Base64 в электронной почте.

Кодирование GIF в Node.js

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Потоки и URL-safe вывод разобраны в статье Base64 в Node.js. Чтобы превратить строку Base64 обратно в файл, который можно проиграть, используйте Base64 в GIF.

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