Кодирование
Data URI / Base64 изображения
Кодирование изображения в Data URI (data:image/…;base64,…) для вставки в CSS/HTML и декодирование Data URI или сырого Base64 обратно в файл — всё прямо в браузере.
Просмотр изображения появится здесь.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Статья об этом инструменте: 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.