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

Кодируйте изображения как data URI в Base64

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

Этот инструмент читает ваш файл локально и выдаёт полный data: URI, а также готовые фрагменты <img> и CSS background-image, которые можно скопировать одним щелчком. Ничего не загружается — кодирование полностью выполняется в вашем браузере.

Когда встраивать, а когда нет

Встраивание убирает один HTTP-запрос, что может ускорить небольшие критически важные изображения. Но Base64 примерно на 33% больше бинарного файла и не может кэшироваться отдельно, поэтому избегайте его для больших фотографий или изображений, используемых на многих страницах. Практическое правило: встраивайте иконки размером до нескольких килобайт, а более крупные изображения оставляйте обычными файлами.

Как использовать результат

Data URI сохраняет исходный тип файла, например data:image/png;base64, и далее закодированные байты, а строка состояния показывает, сколько килобайт текста получилось. Воспользуйтесь тремя кнопками копирования в зависимости от назначения: чистый URI для значения src или href, тег <img> для HTML (затем добавьте осмысленный текст alt) или строка CSS для таблицы стилей.

Практические оговорки

• Длинная строка Base64 увеличивает ваш HTML- или CSS-файл и замедляет его чтение, а также скачивается заново с каждой страницей, которая её содержит. Gzip или Brotli возвращают часть накладных расходов, но данные изображения уже сжаты, поэтому выигрыш ограничен.
• Если ваш сайт использует Content Security Policy, img-src должен разрешать URI data:.
• Многие почтовые клиенты блокируют или удаляют data URI, поэтому проверьте, прежде чем полагаться на них в рассылках.
• Сначала сожмите или уменьшите изображение; меньший источник даёт гораздо более короткую строку.

Что хорошо подходит для встраивания

Небольшие иконки, крошечные изображения-заглушки, индикаторы загрузки, простые логотипы и изображения в HTML-демо в одном файле подходят лучше всего. Фотографии, главные баннеры и любые изображения, показываемые на многих страницах, лучше отдавать как отдельные файлы, чтобы браузер мог их кэшировать. Кодирование происходит в вашем браузере, а скопированный текст не покидает ваше устройство, пока вы сами не вставите его куда-нибудь.