Как пользоваться
- Загрузите изображение и нажмите «Получить Base64».
- Скопируйте data:URI, готовый тег <img> или CSS-правило.
- Чтобы декодировать, вставьте строку во второе поле и нажмите «Загрузить в редактор».
Base64: подробности и советы
Что такое Base64 для изображений
Base64 — способ записать двоичный файл обычным текстом. Для картинок его применяют в формате data:URI — строка вида data:image/png;base64,iVBOR…, которую можно вставить прямо в HTML, CSS или письмо вместо ссылки на отдельный файл.
Когда это удобно
- Мелкие иконки и фоны в CSS, чтобы не делать отдельный запрос к серверу.
- HTML-письма, где внешние картинки блокируются почтовыми клиентами.
- Одностраничные файлы-демо, которые нужно передать одним документом.
- Тесты и примеры кода, где нужна самодостаточная картинка.
Когда лучше не использовать
Base64 увеличивает размер данных примерно на треть, а встроенные в страницу картинки не кешируются отдельно. Поэтому для крупных изображений и фотографий лучше отдавать обычные файлы, а Base64 оставить для иконок до нескольких килобайт.
Как пользоваться
Нажмите «Получить Base64» — появится код, а кнопки ниже скопируют его как data:URI, готовый тег <img> или CSS-правило background-image. Обратное действие — вставьте строку в нижнее поле и нажмите «Загрузить в редактор»: картинка откроется для дальнейшего редактирования. Формат кода зависит от выбранного формата файла внизу.
Вопросы и ответы
Когда стоит использовать Base64?
Для очень маленьких иконок и встраивания картинок в письма и CSS. Большие изображения лучше отдавать файлами: Base64 увеличивает размер примерно на треть.