Картинка в Base64

Инструмент переводит картинку в Base64 — строку из латинских букв, цифр и знаков «+», «/» и «=», которую вставляют прямо в HTML, CSS или JSON вместо ссылки на файл. Выберите файлы на компьютере или телефоне, перетащите их на область загрузки или вставьте картинку из буфера обмена сочетанием Ctrl+V (на Mac — Cmd+V), если браузер отдаёт её файлом. Готовую строку копируют одной кнопкой или скачивают файлом .txt.

Формат определяется по содержимому файла, а не по расширению: подходят PNG, JPG, GIF, WebP, AVIF, BMP, ICO, CUR и SVG. Base64 записывает байты файла как есть, ничего не пересжимая, поэтому анимация GIF и прозрачность PNG сохраняются. У каждой картинки видны формат, размер в пикселях, вес файла и длина строки. HEIC и TIFF страница не кодирует: такой data URI покажет только Safari (TIFF — по документации MDN, HEIC — по таблице caniuse, с Safari 17), поэтому сначала переведите файл в JPG.

Всё происходит в браузере: картинки не загружаются на сервер ToolFox, регистрация не нужна. За раз можно закодировать до 50 картинок — до 25 МБ каждая и до 100 МБ вместе. Если в фото с телефона есть EXIF с геометкой, страница предупредит об этом и предложит убрать метаданные, не пересжимая картинку.

Data URI — это вся картинка, записанная одной строкой: в начале тип файла, например data:image/png;base64, а дальше сам Base64. Браузер принимает такую строку там же, где ждёт адрес картинки: в атрибуте src тега img и в url() CSS-свойства background-image.

Переключатель над результатом даёт четыре вида строки. Data URI выбран по умолчанию. Вариант «Только Base64» — строка без префикса, для случаев, когда тип картинки передаётся отдельно, например отдельным полем в API. Вариант с тегом img — готовый фрагмент HTML с шириной и высотой из файла (у SVG — если они в нём указаны) и атрибутом alt. Вариант CSS — свойство background-image со строкой в кавычках: его вставляют внутрь правила нужного селектора или в атрибут style. Готовые классы для нескольких картинок сразу даёт «Копировать все».

Строка Base64 длиннее файла примерно на треть: каждые 3 байта записываются 4 символами. Файл в 300 000 байт станет строкой ровно в 400 000 символов, а data URI добавит к ней ещё префикс с типом. Поэтому рядом с результатом показаны и вес файла, и длина строки.

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

Вариант без Base64 собран так, чтобы работать и в CSS, и в атрибуте src тега img: служебные символы кодируются, амперсанд — всегда, русские буквы остаются как есть, а двойные кавычки внутри тегов заменяются одинарными, если одинарных в файле нет; в надписях на картинке кавычки кодируются и не меняются. На 209 SVG-схемах нашего сайта этот вариант оказался короче Base64 у всех, а в Chromium картинка из него совпала с картинкой из Base64 попиксельно. Ваш файл может вести себя иначе — поэтому видны обе длины.

Если в SVG есть русские или другие не латинские буквы, а файл сохранён не в кодировке UTF-8 или в нём объявлена другая кодировка, вариант без Base64 не предлагается и остаётся только Base64. В превью SVG показывается как картинка, через тег img, — скрипты внутри файла при этом не выполняются.

Base64 удобен для мелочи: иконок, значков, маленьких фоновых узоров и заглушек. Картинка оказывается внутри HTML или CSS, и браузеру не нужен отдельный запрос за файлом.

Но строка на треть тяжелее файла, а картинка внутри кода не кэшируется отдельно: встроенная в HTML приходит заново с каждой страницей, встроенная в CSS — заново при каждом изменении стилей, тогда как обычный файл браузер взял бы из кэша. Поэтому большие фото и картинки, которые повторяются на многих страницах, обычно оставляют файлами.

Если картинка всё же нужна строкой, сначала уменьшите её: «Изменить размер фото» уберёт лишние пиксели, «Сжать фото» — лишний вес, и строка станет короче вместе с файлом. Предел здесь — 25 МБ на файл: data URI нужен для небольших картинок.