Data URL Base64: объяснение (и как создать такую)
Data URL — это способ встроить файл прямо в веб-страницу, стиль или e-mail, без отдельного запроса. Байты изображения кодируются в Base64 и перевозятся прямо в атрибуте src.
Анатомия data URL
Data URL имеет вид data:<медиатип>;base64,<данные>. Для PNG это data:image/png;base64,iVBORw0KGgo... Префикс говорит браузеру две вещи: что это за данные (их MIME-тип) и что они в кодировке Base64. Браузер декодирует и показывает их точно как загруженный файл.
Почему браузеры принимают их нативно
В браузеры встроен декодер для data URL, поэтому изображение, встроенное так, работает везде, где работает тег <img>, — без плагинов и лишних запросов. То же самое в CSS с background-image и url(), и в письмах, чтобы встроить картинки без вложений.
Главный компромисс: без запроса, но больше байтов
Поскольку Base64 добавляет около 33%, data URL примерно на треть больше исходного файла и учитывается в размере вашего HTML или CSS. Для маленьких переиспользуемых элементов — иконок, логотипов, миниатюр — это честная цена. Для фотографий и файлов на мегабайты это расточительно.
Когда их использовать
Используйте data URL для небольшого числа маленьких элементов, которые должны отображаться мгновенно или путешествовать в одном файле: подписи писем, инструменты в одном файле, офлайн-демо, фавиконки. Для больших или многочисленных изображений выигрывает кэш браузера для настоящих файлов.
Создание и декодирование
Инструмент «Изображение в Base64» строит готовую data URL из любого файла PNG, JPG, WebP, GIF, BMP или AVIF, а «Base64 в изображение» делает обратное: определяет формат и возвращает исходный файл. Оба работают в вашем браузере, так что ничего не загружается.