Кодирование
Data URI / Base64 изображения
Кодирование изображения в Data URI (data:image/…;base64,…) для вставки в CSS/HTML и декодирование Data URI или сырого Base64 обратно в файл — всё прямо в браузере.
Просмотр изображения появится здесь.
Data URI позволяет встроить содержимое файла (обычно изображения) прямо в HTML или CSS в виде строки Base64, вместо ссылки на отдельный файл. Это убирает дополнительный сетевой запрос ценой увеличения размера самого документа.
Как пользоваться
- Кодирование: загрузите изображение — инструмент сгенерирует готовую строку data:image/…;base64,… для вставки в src, href или CSS.
- Декодирование: вставьте Data URI или сырой Base64, чтобы получить исходный файл обратно.
- Скопированную строку можно сразу вставить в HTML-атрибут или CSS-свойство без дополнительной обработки.
Типичные сценарии
- Встраивание маленьких иконок или спрайтов в CSS, чтобы избежать дополнительного HTTP-запроса.
- Создание email-шаблонов, где внешние изображения могут блокироваться почтовым клиентом.
- Быстрый предпросмотр изображения в виде самодостаточной строки без загрузки файла на хостинг.
Что стоит помнить
Base64-кодирование увеличивает размер данных примерно на 33% — для крупных изображений Data URI обычно худший выбор, чем отдельный файл с кешированием браузера.
Data URI не кешируется браузером отдельно от документа, в который он встроен, — при каждой загрузке страницы он загружается заново вместе с ней.
Статья об этом инструменте: Data URI: когда встраивать изображения прямо в код
Часто задаваемые вопросы
Зачем вставлять изображение как Data URI, а не подключать файлом?
Data URI встраивает изображение прямо в CSS или HTML одним значением, что удобно для маленьких иконок и спрайтов — не нужен отдельный HTTP-запрос. Для крупных или часто переиспользуемых изображений это невыгодно.
Есть ли ограничения на размер Data URI?
Да, на практике браузеры и особенно email-клиенты по-разному ограничивают допустимую длину такой строки, и очень большие Data URI могут не сработать или замедлить парсинг страницы. Кроме того, в отличие от обычного файла по URL, Data URI не кешируется браузером отдельно от документа, в который он встроен.
Изображение загружается на сервер для обработки?
Нет, кодирование и декодирование изображения выполняются полностью в браузере, файл никуда не отправляется.
Можно ли использовать Data URI для SVG без Base64?
Да. SVG — это текст (XML), поэтому вместо Base64 достаточно percent-encoding спецсимволов: data:image/svg+xml,%3Csvg...%3E. Такой вариант компактнее и остаётся редактируемым прямо в CSS-файле.
Можно ли вставить Data URI в атрибут href или background-image?
Да, Data URI работает везде, где ожидается ссылка на ресурс — в src, href, background-image в CSS и даже в @import. Синтаксис и ограничения размера те же, что и для тега img.