Конвертируйте изображения в Base64 для HTML, CSS и e-mail
Иконка в CSS-стиле, логотип в подписи письма или офлайн-демо: встраивание изображений как data URL Base64 — надёжная техника. Этот гид разбирает рабочий процесс и правила, которые держат страницы быстрыми.
Выберите правильное исходное изображение
Начните с минимального разумного файла: измените размер точно под размер отображения, для иконок и логотипов предпочитайте PNG или WebP, для фотографий — JPEG. Data URL наследует размер исходника: источник в 2 МБ означает строку примерно в 2,6 МБ в вашей разметке.
Конвертируйте в data URL
Инструмент «Изображение в Base64» читает файл в вашем браузере и выдаёт готовую data URL или сырую нагрузку Base64. Растровые изображения получают безопасный предпросмотр; SVG предлагается скачиванием, чтобы исключить инъекцию разметки.
Встраивайте в HTML или CSS
В HTML поместите значение прямо в тег <img src="data:image/png;base64,...">. В CSS используйте его в url() для background-image. MIME-тип едет внутри самого URL, так что браузер рендерит изображение без внешних запросов.
Подписи писем и почтовые клиенты
Подписи — классический случай: логотип Base64 отображается в большинстве клиентов без вложений. Держите исходную картинку крошечной — на 150 px подпись или тень всё равно не видно, — и помните, что некоторые клиенты блокируют внешние изображения, а data URL это обходит.
Производительность и размер файла
Надбавка Base64 в 33% плюс присутствие строки в документе означает: data URL хороши лишь для нескольких маленьких элементов. Для всего крупного или общего между страницами хостите изображение как файл и позволяйте браузеру его кэшировать.
Приватно по построению
Вся конвертация происходит в вашем браузере, поэтому изображение не покидает ваше устройство, пока вы сами не решите, куда вставить сгенерированную строку. Без загрузок, водяных знаков и аккаунтов.