Base64 против обычных файлов: что быстрее и когда
Один и тот же логотип можно подключить двумя способами: ссылкой на файл logo.png или зашитой в код строкой data:image/png;base64,…. Кажется мелочью, но на скорости сайта эти варианты сказываются по-разному. Сравниваем их честно — по размеру, кешу и числу запросов — и даём простой ответ, что выбрать.
Два способа подключить картинку
Важно сразу понять: это не два разных формата картинки. И в файле, и в Base64-строке лежат одни и те же байты изображения. Отличается только способ доставки. Файл — это отдельный ресурс на сервере, за которым браузер идёт по ссылке. Base64 — это те же данные, переписанные текстом и вставленные прямо в HTML или CSS.
Если хочется освежить, как именно работает кодирование, загляните в статью «Что такое Base64». А здесь устроим честное сравнение двух подходов по трём ключевым параметрам.
<!-- Способ 1: ссылка на файл -->
<img src="/img/logo.png">
<!-- Способ 2: те же данные строкой Base64 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">Спойлер
Универсального победителя нет. Файл выигрывает по размеру и кешу, Base64 — по числу запросов на мелочёвке. Поэтому вопрос не «что лучше вообще», а «что лучше для этой конкретной картинки».
Раунд 1: размер — побеждает файл
Здесь всё однозначно. Base64 не сжимает данные, он лишь переписывает их текстом, и из-за схемы «3 байта → 4 символа» строка получается примерно на 33% больше исходного файла. Картинка на 9 КБ в виде Base64 займёт около 12 КБ.
То есть по чистому весу отдельный файл всегда легче. И чем крупнее изображение, тем заметнее эта разница в абсолютных килобайтах.
Здесь стоит развеять частое заблуждение: «Сервер ведь умеет сжимать данные перед отправкой (это называется gzip), значит, разницы нет». Сжатие действительно частично отыгрывает раздувание, но не полностью — закодированный текст всё равно остаётся тяжелее сжатого обычного файла, да и распаковывать его компьютеру приходится дополнительно. Так что считать Base64 «бесплатным» неправильно.
Раунд 2: число запросов — побеждает Base64
А вот тут у Base64 единственный, но важный козырь. Отдельный файл требует отдельного HTTP-запроса: браузеру нужно установить соединение и забрать ресурс. Base64-картинка приходит вместе с HTML или CSS, так что лишнего запроса нет вовсе.
На заре веба, во времена HTTP/1.1, это был решающий фактор: десятки мелких файлов реально тормозили загрузку. Но современные HTTP/2 и HTTP/3 передают множество файлов по одному соединению почти без накладных расходов — и преимущество Base64 здесь сильно поблёкло. Подробнее об этом — в статье «Base64-картинки в вебе».
Нюанс
Выигрыш в запросах имеет смысл только для очень мелких картинок. Сэкономить один запрос ценой лишних 33% размера выгодно на иконке в 1 КБ и абсолютно невыгодно на фото в 500 КБ.
Раунд 3: кеширование — уверенно побеждает файл
Это решающий раунд. Отдельный файл браузер скачивает один раз и потом берёт из кеша — на других страницах сайта и при повторных визитах. Одна иконка, используемая на 20 страницах, загружается ровно один раз.
Base64-строка вшита в HTML или CSS, поэтому отдельного кеша у неё нет: она грузится заново вместе со страницей при каждом запросе. Та же иконка на 20 страницах — это 20 загрузок одних и тех же данных. На сайте с повторными визитами файл выигрывает с огромным отрывом.
Сводная таблица
Соберём всё в одном месте:
| Критерий | Base64 | Обычный файл |
|---|---|---|
| Размер данных | +33% | меньше |
| Отдельный HTTP-запрос | не нужен | нужен |
| Кешируется отдельно | Нет | Да |
| Появляется мгновенно | Да | после загрузки |
| Лёгкая замена/правка | Сложно | Просто |
| Подходит для крупных фото | Нет | Да |
Что выбрать на практике
Итог простой и без воды:
- Обычный файл — по умолчанию. Он меньше, кешируется и легко обновляется. Это правильный выбор для подавляющего большинства картинок: фото, баннеров, иллюстраций, любых изображений, которые встречаются больше чем на одной странице.
- Base64 — точечно. Для крошечных иконок до ~5 КБ, которые нужны мгновенно; для критического CSS; для логотипов в HTML-письмах. Здесь экономия запроса и гарантированное появление перевешивают рост размера.
Это не «или-или», а два инструмента под разные задачи. Какие именно сценарии оправдывают Base64, мы разбираем в статье «Base64 в CSS и email».
Маленький пример из жизни
Допустим, у вас интернет-магазин. Логотип в шапке виден на каждой странице — значит, его место отдельный файл: кешируется один раз и работает на всём сайте. А вот крошечная иконка-галочка в кнопке «Добавлено в корзину», которая должна вспыхнуть мгновенно в момент клика, — отличный кандидат на Base64 в CSS: один сэкономленный запрос важнее, чем лишний килобайт. Фотографии товаров, конечно, всегда отдельные файлы — они большие, кешируются и часто переиспользуются в каталоге.
Видите логику? Решение принимается не «вообще», а для каждой картинки отдельно — по её размеру, частоте показа и тому, насколько срочно она нужна на экране.
Нужно превратить картинку в Base64?
Закодируйте PNG в строку онлайн или сделайте обратное — наш конвертер работает в обе стороны, прямо в браузере и без установки.
Конвертировать PNG в Base64Обратное преобразование — Base64 → PNG, а полный список конвертеров есть на странице всех форматов.
