Конвертер изображений в Base64 и обратно: генератор Data URI

Как узнать формат изображения по началу Base64

Первые символы Base64 — это первые байты файла, поэтому каждый формат начинается одинаково. Длина начала у AVIF, GIF и JPEG может немного отличаться от файла к файлу.

Конвертер изображений в Base64: изображение в Data URI и Base64 в изображение

Перетащите изображение PNG, JPG, GIF, WebP, AVIF, SVG, BMP или ICO и получите его строку Base64 и готовый data URI с кодом для HTML-тега изображения, фона в CSS и изображения в Markdown. Вторая вкладка делает обратное: вставьте Base64, data URI или целый тег <img>, посмотрите картинку и скачайте её. Всё происходит в вашем браузере, поэтому изображение не загружается, а файл не изменяется: Base64 содержит ровно его байты.

Что такое data URI

Data URI помещает файл прямо в сам адрес, так что отдельный запрос не нужен. Он выглядит как data:image/png;base64,iVBORw0KGgo...: слово data:, тип MIME файла (image/png), слово base64 и после запятой файл в виде текста Base64. Часть image/png должна соответствовать файлу. Правильный тип MIME для JPG — image/jpeg; image/jpg настоящим типом не является, хотя браузеры его принимают.

Как использовать изображение в Base64 в HTML, CSS и Markdown

• HTML: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">. Конвертер сам добавляет ширину и высоту.
• CSS: background-image: url("data:image/png;base64,iVBORw0KGgo...");, а также для list-style-image и content.
• Markdown: ![](data:image/png;base64,iVBORw0KGgo...). Не каждый обработчик Markdown разрешает data URI.
• Ссылка: тот же data URI работает в href, например для ссылки на скачивание.

SVG: Base64 или URL-кодирование

SVG — это текст, поэтому Base64 ему не нужен. Data URI, где SVG записан как текст с URL-кодированием, data:image/svg+xml,%3Csvg ..., короче, чем data:image/svg+xml;base64,PHN2Zy..., и его легче читать в таблице стилей. Для файла SVG конвертер показывает оба варианта.

Какой это формат: начало Base64

Начало строки Base64 показывает формат файла, потому что кодирует первые байты файла. PNG начинается с iVBORw0KGgo, JPEG — с /9j/ (обычно /9j/4AAQSkZJRgABAQAAAQABAAD), GIF — с R0lGODlh (GIF89a) или R0lGODdh (GIF87a), WebP — с UklGR, а SVG — с PHN2Zy. Полный список есть в таблице под конвертером. Base64 R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 — известный прозрачный GIF в один пиксель: кнопка с образцом на второй вкладке покажет его.

Base64 в изображение

Вставьте Base64 на второй вкладке. Это может быть голая строка, полный data URI, HTML-тег или правило CSS с url(...), с переводами строк и знаком = в конце или без них. Инструмент определяет формат по байтам, а не по тексту перед ними, показывает картинку с размером в пикселях и в байтах и скачивает её с правильным расширением. Если в тексте указан один тип, а данные другого, вы об этом узнаете.

Когда использовать изображения в Base64, а когда нет

• Подходит для: небольших иконок, заглушек, логотипа в одном файле HTML, файла CSS, который не должен зависеть от других файлов.
• Не подходит для: фото и больших картинок. Base64 увеличивает данные примерно на треть, браузер не может кешировать изображение отдельно от страницы, а текст замедляет страницу. Многие почтовые клиенты data URI вообще не показывают.
• Чтобы уменьшить изображение перед кодированием, используйте оптимизатор изображений или конвертер WebP.

Ограничения

• Файлы до 50 МБ. Очень длинный Base64 в текстовых полях показывается лишь частично; кнопки копирования и скачивания отдают его целиком.
• Изображение кодируется как есть, поэтому анимированные GIF или WebP остаются анимированными. Инструмент не меняет размер и не сжимает.
• HEIC и TIFF не поддерживаются, и инструмент не превращает один формат в другой.
• Для текста и других файлов используйте кодирование и декодирование Base64.