Как пользоваться
- Перетащите GIF в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение.
- Чтобы сохранить анимацию, оставьте в списке «Преобразовать в» значение «Исходный формат», а в списке «Макс. ширина» — значение «Исходный размер».
- Проверьте исходный размер и размер после кодирования: анимированные GIF быстро разрастаются.
- Скопируйте тег img или CSS background-image либо возьмите data URI, чистый Base64 или версию для Markdown.
О формате GIF
Формат GIF (Graphics Interchange Format, тип MIME image/gif) появился в 1987 году. Каждый кадр использует палитру не более чем из 256 цветов и сжимается без потерь алгоритмом LZW. Прозрачность работает по принципу «всё или ничего»: один цвет палитры можно пометить как прозрачный, но частичной прозрачности нет. Файл может содержать множество кадров с отдельными задержками и счётчиком повторов, поэтому GIF и стал форматом коротких анимаций.
Base64 файла GIF начинается с R0lGODlh для распространённой версии GIF89a или с R0lGODdh для более старой GIF87a.
Как сохранить анимацию
Если оставить исходный формат, инструмент кодирует байты файла как есть. Поэтому data URI анимируется точно так же, как сам файл, — и в теге <img>, и в качестве фона CSS.
Преобразование в PNG, JPEG или WebP, а также ограничение максимальной ширины заново отрисовывают изображение в браузере, и сохраняется только первый кадр. Это удобно, если нужен статичный предпросмотр анимации, но для анимированной версии не используйте ни то, ни другое.
Где data URI для GIF по-прежнему уместны
- Небольшие индикаторы загрузки и анимированные значки состояния в CSS.
- Классический прозрачный пиксель 1x1, который используют как заглушку в
src. Он занимает всего несколько десятков байт, а в Base64 — заметно меньше 100 символов. - Простая штриховая графика с небольшим числом цветов, для которой GIF компактен.
Большие анимации подходят плохо. GIF-реакция размером 2 МБ превращается примерно в 2,7 МБ текста, который нельзя кешировать отдельно; видеофайл на сервере или анимированный WebP намного легче.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Часто задаваемые вопросы
Останется ли мой GIF анимированным после кодирования в Base64?
Да, если сохранить исходный формат и не менять размер. Base64 хранит файл целиком, включая все кадры и настройку повтора.
Почему мой GIF перестал двигаться после преобразования?
При преобразовании в PNG, JPEG или WebP, а также при изменении размера изображение заново отрисовывается по первому кадру. Инструмент не умеет создавать анимированные PNG или WebP, поэтому, чтобы сохранить движение, оставьте исходный GIF.