Что такое Base64 и когда его следует использовать для встраивания изображений?

Если вы когда-либо работали с современной веб-разработкой, вы, вероятно, сталкивались с, казалось бы, бесконечной хаотичной строкой символов, начинающейся с data:image/png;base64, за которой следует чистая тарабарщина. Это изображение в кодировке Base64.

Что такое кодировка Base64?

По своей сути Base64 представляет собой схему кодирования двоичного текста. Он принимает двоичные данные (например, изображение, аудиофайл или скомпилированный документ) и преобразует их в строковый формат ASCII. Название «Base64» связано с тем, что для представления данных в нем используется алфавит из 64 символов (A-Z, a-z, 0-9, + и /).

Это преобразование невероятно полезно, поскольку многие интернет-протоколы (например, HTTP, HTML и CSS) разработаны специально для безопасной обработки обычного текста. Преобразуя двоичные данные в текст, мы гарантируем, что данные можно будет передавать по этим протоколам без повреждения.

Когда следует вставлять изображения с помощью Base64?

Встраивание строк Base64 непосредственно в ваш HTML (`<img src="data:image...">`) или ваш CSS (`background-image: url("data:image...")`) вместо использования стандартного URL-адреса может иметь значительные преимущества, но только в очень специфических случаях использования:

• Микрозначки и счетчики. Если у вас есть крошечные элементы пользовательского интерфейса (например, индикатор загрузки размером 1 КБ или галочка), их кодирование в формате Base64 избавляет браузер от необходимости выполнять отдельный HTTP-запрос для получения файла изображения. Это ускоряет рендеринг критического пользовательского интерфейса.
• Электронные письма в формате HTML. Многие почтовые клиенты блокируют внешнюю загрузку изображений по соображениям конфиденциальности. Встраивание логотипа непосредственно в HTML через Base64 позволяет обойти эти блокировки, гарантируя, что ваше электронное письмо будет выглядеть идеально.
• Однофайловые веб-приложения. Если вы создаете инструмент, который необходимо распространять как один файл `.html`, который работает полностью автономно, встраивание всех ресурсов через Base64 — единственный способ правильно его упаковать.

Когда следует ИЗБЕГАТЬ Base64?

Самый большой недостаток кодировки Base64 — увеличение размера файла ресурса примерно на 33 %. Изображение размером 1 МБ превратится в текстовую строку размером 1,33 МБ.

Более того, браузеры не могут кэшировать строку Base64 независимо. Если вы встраиваете массивную строку Base64 в свой CSS-файл, браузер должен загружать этот массивный CSS-файл при каждой загрузке страницы, а анализ огромных текстовых строк блокирует основной поток, вызывая серьезные задержки (плохое время взаимодействия).

Золотое правило: никогда не кодируйте Base64 большие фотографии или главные изображения. Кодируйте только крошечные значки SVG или микроскопические растровые файлы, в которых накладные расходы HTTP-запроса превышают штраф за размер файла в 33%.