Картинка в Base64 — конвертер в Data URI и CSS
Конвертер в браузере между изображениями и Base64, data URI, фрагментами CSS и HTML
Работает в браузере · файлы никуда не загружаются
Перетащите изображение для перевода в Base64
Одно изображение до 5 МБ. Base64 занимает больше места, чем сам файл, поэтому подходит для небольших иконок и логотипов. Изображение не покидает браузер.
Что это за инструмент
Он переписывает байты файла изображения в текст из букв, цифр и нескольких символов. Этот текст можно сразу вставить в HTML или CSS как data URI вида data:image/png;base64,.... Всё работает в браузере, а обратное направление — превратить Base64 снова в картинку — находится на этой же странице.
Как пользоваться
- Выберите Изображение → Base64 и перетащите или выберите картинку: один файл до 5 МБ.
- Под предпросмотром посмотрите исходный размер, размер текста Base64, прирост и совет по размеру.
- В нужном поле (Data URI, Только строка Base64, CSS background-image или Тег HTML img) нажмите Копировать. Длинные значения показаны лишь частично, но копируется всё целиком; можно также скачать текстовый файл.
- Для обратного преобразования выберите Base64 → изображение и вставьте Base64 или data URI. Появятся предпросмотр и кнопка Скачать изображение.
Как это работает
- Кодирование: стандартный Base64 (RFC 4648), 3 байта в 4 символа, с дополнением
=до длины, кратной 4. Преобразуются сами байты файла, а не текстовая строка, поэтому любая картинка декодируется без изменений. - Тип MIME: определяется по первым байтам файла (JPEG, PNG, GIF, WebP, SVG и другие) и ставится после
data:. Неверное расширение файла не мешает. - Тег HTML: атрибуты width и height добавляются, если удаётся прочитать размер изображения.
- Совет по размеру: до 10 КБ подходит для встраивания, больше 50 КБ стоит подумать, больше 500 КБ лучше загрузить и дать ссылку.
- Декодирование: принимается URL-безопасный Base64 (
-и_) и отсутствие дополнения=. Если заявленный тип не совпадает с настоящим, используется настоящий, и вы увидите предупреждение. Data URI без;base64не читаются.
Пример
| Параметр | Значение |
|---|---|
| Оригинал | иконка 2,1 КБ |
| Текст Base64 | около 2,8 КБ (+33 %) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
Частые вопросы
Моя картинка куда-то загружается?
Нет. Чтение файла и кодирование в Base64 происходят в вашем браузере, а полученный текст нигде не сохраняется.
Почему Base64 увеличивает объём?
Base64 записывает 3 байта четырьмя символами, поэтому текст примерно на треть (33 %) больше файла. К тому же внутри HTML или CSS браузер не может кешировать изображение отдельно, и оно скачивается заново при каждой загрузке страницы.
С какого размера Base64 лучше не использовать?
Жёсткого правила нет, но обычно встраивают небольшие иконки, логотипы и спиннеры около 10 КБ, а всё, что больше примерно 50 КБ, оставляют обычным файлом. Инструмент делит размеры на группы до 10 КБ, до 50 КБ, до 500 КБ и больше и показывает, в какую вы попали. Крупные изображения лучше загрузить и дать на них ссылку.
Где пригодится data URI?
В src тега img в HTML, в url() свойства background-image в CSS, в подписи письма, в Markdown-файле или в HTML-странице из одного файла, где картинка должна «ехать» вместе с документом. Отдельный файл изображения не нужен, хотя некоторые почтовые клиенты блокируют картинки в data URI.
При декодировании пишет, что данные некорректны.
Префикс data URI необязателен, пробелы и переносы строк игнорируются, а ещё можно вставить целый фрагмент CSS или HTML — data URI внутри найдётся сам. Если ошибка остаётся, скорее всего, текст обрезан или в нём есть лишние символы. Данные, которые не являются изображением, отклоняются.
А если картинка больше 5 МБ?
Несколько мегабайт Base64 тормозят браузер, и их сложно куда-либо вставить, поэтому принимается одно изображение до 5 МБ. Уменьшите более крупные файлы с помощью сжатия или изменения размера изображений.
