Изображение в Base64: когда data URI помогает, а когда мешает

Когда я впервые увидел 40 килобайт абракадабры там, где положено быть атрибуту src, я решил, что что-то сломалось. Ничего не сломалось. Эта абракадабра и была изображением — целый PNG, закодированный как текст и засунутый прямо в HTML. Это data URI в Base64, и конвертер изображений в Base64 выдаёт такой из любой картинки, которую вы на него перетащите.

Куда интереснее вопрос, стоит ли им пользоваться.

Что на самом деле делает Base64

Base64 берёт двоичные данные и переписывает их 64 безопасными текстовыми символами — буквами, цифрами, + и /. Он существует потому, что большая часть веба построена для передачи текста, а не сырых байтов. Закодируйте так PNG — и его можно вставить туда, где разрешён текст: в атрибут HTML, в правило CSS, в JSON.

Подвох заложен в самой математике. Каждые 3 байта превращаются в 4 символа, поэтому закодированная версия примерно на 33% больше исходного файла. Иконка в 6 КБ становится data URI около 8 КБ. Наш конвертер показывает точный прирост для вашего изображения — именно эта цифра и должна определять решение.

Сам формат старый: data URI описали ещё в 1998 году в RFC 2397. Это не новая территория. Просто её легко использовать не по делу.

Где он оправдывает себя

Встраивать изображение имеет смысл, когда оно маленькое, а лишний запрос стоит дороже, чем лишние байты.

Мелкие иконки и элементы интерфейса. SVG-лупа в 400 байт, встроенная в CSS, экономит обращение к серверу и не мигает при поздней загрузке.
Письма. Некоторые клиенты вырезают подключённые картинки или прячут их за кнопкой «загрузить внешний контент». Встроенный data URI в теге <img> обходит это во многих веб-клиентах.
Самодостаточные файлы. HTML-отчёт, который вы рассылаете, или отдельный виджет работают офлайн, когда картинки лежат внутри файла.
Спиннеры и заглушки. Всё, что должно появиться до того, как отработает сеть.

Где он мешает

Я видел, как встраивают фон-заставку и потом удивляются, почему страница подтормаживает. Вот что важно помнить: data URI — часть документа, а значит, его нельзя закешировать отдельно.

Нет отдельного кеша. Подключённое изображение скачивается один раз и переиспользуется на разных страницах. Встроенное скачивается заново с каждой страницей, где оно есть.
Раздутый исходник. Большие data URI делают HTML или CSS огромными, их тяжело читать и сравнивать в diff.
Медленнее первая отрисовка. Браузеру приходится разобрать весь блок, прежде чем он достроит документ. Подключённая картинка вместо этого грузится параллельно.
HTTP/2 изменил расклад. Раньше встраивали, чтобы сократить число запросов. С мультиплексированием множество мелких запросов теперь дёшевы, так что этот аргумент почти испарился.

Моё грубое правило: пара килобайт и используется в одном месте — встраивать нормально. Больше или переиспользуется где-то ещё — подключайте обычным файлом.

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

Перетащите изображение — и инструмент даст четыре готовых к вставке варианта:

чистый data URI;
тег <img> с заполненным src;
CSS-правило background-image;
синтаксис Markdown.

Одно предупреждение про почту, которое стоит повторить: Outlook рендерит движком Word и наглухо блокирует data URI в CSS-фонах. Встроенные data URI в теге <img> держатся лучше в клиентах вроде Apple Mail, но почта — минное поле, поэтому тестируйте в тех, которыми реально пользуются ваши читатели.

Всё происходит в браузере через FileReader API. Изображение не покидает машину — это важно, когда вы кодируете невыпущенный логотип или скриншот клиента.

Перетащите картинку в конвертер изображений в Base64 и скопируйте нужный фрагмент.