Изображение в Base64

Этот конвертер изображений в Base64 превращает картинку в data URI, то есть длинную текстовую строку, которая встраивает изображение напрямую, а также в готовый фрагмент CSS для фона. Вы можете встроить изображение вместо ссылки на отдельный файл.

Он работает локально в вашем браузере, поэтому изображение читается на вашем устройстве и никогда не загружается на сервер.

Data URI несёт всё изображение внутри разметки, поэтому браузеру не приходится делать отдельный сетевой запрос, чтобы его получить. Для небольших ресурсов вроде значков сэкономленный обмен с сервером может сделать страницу ощутимо быстрее.

Загвоздка в размере и кешировании. Base64 добавляет примерно 33 процента избыточности, потому что представляет двоичные данные ограниченным текстовым алфавитом, а встроенное изображение нельзя кешировать отдельно, поэтому оно скачивается заново с каждой содержащей его страницей.

Практическое правило: встраивайте небольшие изображения, значки, крошечные логотипы или спрайт, где экономия запроса оправдывает избыточность, а более крупные изображения оставляйте обычными файлами, которые браузер может кешировать и загружать параллельно.

Data URI работают везде, где принимается адрес: в src элемента img, в фоне CSS или в поле JSON либо шаблона письма. Это делает их удобными для самодостаточных фрагментов.