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

Превратите изображение в строку Base64, которую можно вставить в код.

Работает в браузере. Ваши файлы никогда не покидают устройство.

Как конвертировать изображение в Base64

  1. Перетащите изображение сюда или нажмите «Выбрать файлы».
  2. Скопируйте URL с данными, чистый Base64 или готовый фрагмент CSS либо HTML.
  3. Вставьте его в свой код.

Как работает кодирование

Base64 превращает каждые 3 байта изображения в 4 текстовых символа, используя стандартный алфавит из 64 символов: от A до Z, от a до z, от 0 до 9, плюс и слэш, по спецификации RFC 4648.

Data URL это тот же текст с коротким префиксом, например data:image/png;base64, поэтому браузер или приложение сразу понимают, что перед ними, без отдельного файла.

Исходный файлТекст Base64 (примерно на 37% больше)
Иконка 5 КБПримерно 6,9 КБ
Логотип 20 КБПримерно 27 КБ
Фото 100 КБПримерно 137 КБ

Из-за этих накладных расходов data URL лучше всего подходят для маленькой графики, а не для полноценных фото.

Где применяются data URL

  • В CSS, внутри background-image, чтобы маленькая иконка загружалась вместе с таблицей стилей, а не отдельным запросом.
  • В HTML, внутри атрибута img src или прямо в разметке SVG.
  • В ответах API в формате JSON и в полях баз данных, которые хранят изображение как текст.
  • В HTML писем, поскольку некоторые почтовые клиенты блокируют внешние изображения, но разрешают встроенные данные.

Когда лучше оставить обычный файл

Data URL не кешируются отдельно от страницы, в которую встроены, поэтому фото, использованное на десяти страницах, загрузится десять раз вместо одного. Для всего крупнее маленькой иконки обычный файл изображения с кешированием в браузере загружается быстрее.

Частые вопросы о Изображение в Base64

Что такое Base64 data URL?

Это байты изображения, записанные в виде текста, поэтому изображение можно вставить прямо в HTML, CSS или JSON без отдельного файла.

Base64 увеличивает размер файла?

Да, примерно на 37 процентов, потому что кодирование превращает каждые 3 байта изображения в 4 символа текста.

Когда стоит использовать data URL вместо файла?

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

Моё изображение куда-то загружается?

Нет. Кодирование происходит в браузере, поэтому изображение никогда не покидает ваше устройство.

Конвертация в Base64 меняет качество изображения?

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

Есть ли максимальный размер для data URL?

Браузеры не задают жёсткого лимита, но длинный data URL нельзя кешировать отдельно, и он замедляет разбор страницы, поэтому используйте его только для маленьких иконок и графики.

Все браузеры поддерживают data URL?

Да. Data URL работают во всех основных браузерах начиная с Internet Explorer 8, включая все современные мобильные браузеры.

Можно использовать это для favicon?

Маленький favicon можно встроить как data URL прямо в head HTML-страницы, хотя обычный файл favicon.ico вместе с PNG-размерами всё ещё встречается чаще.

Похожие инструменты