Картинка в Base64 онлайн — data URI для HTML и CSS

Картинка в Base64

Перетащите PNG, JPG, WebP, SVG или другой файл — инструмент сразу покажет превью и два варианта строки: готовый data URI для вставки в HTML (<img src="…">) или CSS (background), и отдельно «чистый» Base64 без служебного префикса — например, для JSON или API, где формат data URI не нужен.

Пример

Иконка 16×16 px в PNG

Такой файл весит около 300–500 байт, а в Base64 — примерно на треть больше, около 450–700 символов. Это меньше одного лишнего HTTP-запроса, поэтому для мелких иконок, спрайтов и favicon вставка через data URI ускоряет загрузку страницы, а не замедляет её.

Для больших фотографий (сотни килобайт и больше) так делать не стоит: страница с data URI не кешируется отдельно от HTML и раздувает вес каждой загрузки. Файл обрабатывается прямо в браузере — на сервер ничего не уходит.

Частые вопросы

Почему data URI такой длинный — можно ли его использовать в src?

Base64 увеличивает размер примерно на треть по сравнению с исходным файлом, поэтому для крупных фото так делать не стоит. Для мелких иконок и SVG (обычно до 5–10 КБ) data URI в src или CSS background экономит отдельный запрос к серверу.

Как вставить картинку в HTML или CSS без отдельного файла?

Скопируйте строку Data URI целиком и подставьте её вместо адреса: <img src="data:image/png;base64,…"> или background: url(data:image/png;base64,…) в CSS — браузер отрисует картинку без загрузки файла.

Картинка в Base64 и data URI

Base64

Текст (если это Base64)

Data URI

Только Base64 (без data:…)