Что такое изображение Base64
Base64 — способ кодирования двоичных данных в чистый текст. После преобразования в Base64 изображение превращается в длинную текстовую строку, которую можно встроить прямо в HTML/CSS без отдельного файла изображения. Такое применение называется «встроенным изображением».
Когда использовать изображения Base64
Сценарии, подходящие для встраивания
- Мелкие иконки: Иконки в несколько КБ встроенными сокращают HTTP-запросы и ускоряют загрузку
- Шаблоны писем: Почтовые клиенты строго ограничивают внешние изображения; встроенные надёжнее
- Доставка одним файлом: HTML-отчёты, демо, которые вы хотите упаковать в один файл
- Data URI: Фоновые изображения в CSS, ссылки на SVG
Сценарии, неподходящие для встраивания
- Большие изображения: После кодирования Base64 размер на 33% больше оригинала; большие изображения встроенными загружаются медленнее
- Изображения, требующие кэширования: Встроенные изображения нельзя кэшировать отдельно; при каждой загрузке HTML они скачиваются заново
- Часто переиспользуемые изображения: Картинки, общие для нескольких страниц, эффективнее как внешний файл + кэш
Как конвертировать
Используйте инструмент конвертации изображения в Base64 от DocsAll для преобразования в один клик:
- Откройте изображение в Base64
- Загрузите изображение
- Строка Base64 и Data URL генерируются автоматически
- Скопируйте и используйте
Для обратного пути — восстановления изображения из Base64 — используйте инструмент Base64 в изображение.
Как использовать
Формат полученной Data URL похож на data:image/png;base64,iVBORw0KGgo... — длинную строку.
- В HTML: записывается прямо в атрибут src тега img
- В CSS: записывается внутри url() свойства background-image
Взвешивание плюсов и минусов
| Аспект | Внешний файл изображения | Встроенное Base64 |
|---|---|---|
| HTTP-запрос | По одному на изображение | Без дополнительных запросов |
| Размер | Исходный | На 33% больше |
| Кэширование | Можно кэшировать отдельно | Кэшируется вместе с HTML |
| Применимо к | Большим, переиспользуемым изображениям | Мелким иконкам, одному файлу |
Рекомендация
Мелкие иконки (меньше 4КБ) встраивайте, большие фотографии — внешними файлами. Сочетайте со сжатием изображений, чтобы сначала уменьшить размер, а затем решить, стоит ли встраивать — так результат лучше. Подробнее о Base64 читайте в руководстве по кодированию и декодированию Base64.