Base64 изображения: удобная ловушка или полезный инструмент?
Встраивание изображений в виде строк Base64 кажется удобным. Вот когда это помогает, а когда вредит.
Ты можешь встроить изображение прямо в HTML или CSS. Без отдельного файла. Без дополнительного HTTP-запроса.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
Удобно. Но это имеет издержки, которые не сразу очевидны.
Как это работает
Base64 кодирует бинарные данные как ASCII-текст. Любое изображение становится строкой, которую ты можешь скопировать и вставить.
Строка примерно на 33% больше исходного файла. Изображение в 30KB становится строкой в 40KB.
Когда Base64 помогает
Крошечные иконки. Иконка в 200 байт в виде Base64 экономит HTTP-запрос. HTTP/2 сделал это менее важным, но для очень маленьких изображений это всё ещё актуально.
HTML для email. Email-клиенты блокируют внешние изображения. Встроенные изображения отображаются без этого запроса "загрузить изображения".
Распространение в одном файле. Отправка HTML, который работает офлайн. Всё в одном файле.
Data URI в CSS. Фоновые изображения, встроенные в стили. Сокращает HTTP-запросы ценой больших CSS-файлов.
Когда Base64 вредит
Большие изображения. Увеличение размера на 33% накапливается. Изображение в 100KB становится 133KB текста.
Кэширование. Внешние изображения кэшируются отдельно. Base64-изображения — часть HTML/CSS — если страница меняется, перезагружается всё целиком.
Время парсинга. Браузеры должны декодировать Base64 перед рендерингом. Больше обработки, чем при загрузке бинарного файла напрямую.
Поддержка. Обновление встроенного изображения означает редактирование кода. Обновление внешнего файла проще.
Фактор HTTP/2
HTTP/1.1 имел дорогостоящие накладные расходы на соединение. Несколько маленьких изображений означали несколько медленных запросов.
HTTP/2 эффективно мультиплексирует запросы. Аргумент "сэкономить HTTP-запросы" сейчас слабее.
Если твой сервер поддерживает HTTP/2 (большинство поддерживают), внешние изображения обычно лучше.
Практические рекомендации
Менее 1KB: Рассмотри Base64. Накладные расходы минимальны.
1-10KB: Оценивай в каждом случае. Критические иконки могут выиграть, декоративные изображения — вряд ли.
Более 10KB: Используй внешние файлы. Штраф за размер того не стоит.
Часто обновляется: Внешние файлы. Избегай изменения кода для обновления изображений.
Используется на нескольких страницах: Внешние файлы. Кэширование даёт преимущества при загрузке нескольких страниц.
Тестирование производительности
Не гадай. Тестируй.
Сравни общий вес страницы со встраиванием Base64 и без него. Измерь реальное время загрузки.
"Правильный" ответ зависит от твоей конкретной ситуации — размеров изображений, стратегии кэширования, версии HTTP, частоты обновлений.
Альтернативы
Спрайтовые листы. Объедини маленькие иконки в одно изображение, используй CSS для отображения частей. Один запрос, нормальное кэширование.
Иконочные шрифты. Векторные иконки как шрифты. Масштабируемые, стилизуемые с помощью CSS.
Встроенный SVG. Для векторной графики встроенный SVG предлагает больше гибкости, чем Base64 PNG.
Base64-изображения обменивают размер файла на удобство. Этот компромисс имеет смысл только для очень маленьких изображений или особых случаев, таких как email. Для большинства веб-применений внешние файлы работают лучше.