Кодировка картинок Base64

Base64 — стандарт кодирования двоичных данных при помощи только 64 символов ASCII.

Алфавит кодирования содержит  латинские символы A-Z, a-z и 0-9 (62 знака) и 2 дополнительных символа, зависящих от системы реализации. Каждые 3 исходных байта кодируются 4 символами (увеличение на ¹⁄₃).

Вот пример. Слева закодированный текст в Base64 – справа его расшифровка.

Это конечно здорово, но возникает вопрос

Зачем нужна кодировка Base64

Объем данных  увеличивается на 1/3. Да, это как бы делает не читаемым  текстом для человека – но это же просто кодировка. Декодеров полно.

А где еще у нас есть двоичные данные? Изображения и картинки!

Вот, например самая первая картинка, закодированная в Base64

Картинка как картинка, что с ней не так?

Посмотрим на код сайта.

Позвольте, а что у нас в тэге <img scr=…..>

Вот так лучше видно.

Где ссылка на картинку? А это оно и есть. В качестве ссылки выступает цифровой код (картинка в Base64), из которого браузер умеет нарисовать картинку – точно такую же как и оригинал.

Да, браузер умеет не только выводить информацию – но и восстанавливать изображения из кодировки Base64.

И что это нам дает?

• мы загрузили картинку не с диска на сервере, а сразу из html кода страницы (это быстрее = плюс)
• объем картинки увеличился на 1/3 (это плохо = минус)

Если посмотреть тесты в интернете по скорости загрузки сайта (при замене картинок на Base64) – да, мы немного выигрываем. Браузер сразу получает весь код для отображения и его не надо дополнительно загружать картинки с сервера.

Но в реальности это порядка +5%. К тому же браузер все изображения кэширует на диске у пользователя – и при следующей загрузке страницы мы это преимущество потеряем.

Использование кодировки Base64 в CMS

Что тут может быть не так?

У Вас фактически в коде страницы вместо ссылки на изображение – её текстовая замена в виде символов.

А такая “картинка” может состоять из 3000-5000 символов.

И всё содержимое поста хранится в базе данных в виде текстовых строк.

Хотя обычно  в самой CMS нет ограничения на число символов – могут быть проблемы в размере допустимого запроса POST в PHP или вебсервере или размере максимального пакета MySQL

Вставив пару таких больших картинок в виде символов в текст – Вы можете получит сложные эффекты при обработке запросов в базе данных.

Читаем статью

База данных MySQL

Использование кодировки Base64 в электронной почте

Вот где это может реально пригодиться.

Если Вы отправляете пользователю html-письма с картинками (например – после покупке в интернет-магазине), то совсем не факт, что у конечного получателя всё Ваши изображения отобразятся.

Почтовые серверы по разному (и в разных случаях) обрабатывают приложенные файлы.

В случае использования картинок в виде Base64 – они физически находятся в теле письма в виде кода. И браузер (или почтовая программа) их отобразит корректно.

В электронной почте можно использовать изображения Base64:

• для логотипа компании
• для фото товаров
• как части элементов дизайна

Поддерживаются форматы  jpg, jpeg, png, gif и svg (векторная графика для web).

Для форматов gif/png прозрачность поддерживается, можно также использовать картинку Base64 в качестве фона CSS

Вот интересная статья

Храните мелкие картинки в CSS

Совместимость с браузерами и формат данных

В настоящее время практически все браузеры (в десктопной и мобильной версиях) поддерживают кодировку Base64

Data URL состоит из четырёх сегментов: приставки (data:), MIME типа, описывающего  тип данных, дополнительного ключевого слова base64 для не текстовых данных и самой строки данных:

data:[<тип данных>][;base64],<данные>

тип данных описывается строкой в формате MIME типа, например 'image/jpeg' для JPEG файла изображения. При не указывании типа данных, браузер автоматически будет интерпретировать строку данных, как  text/plain;charset=US-ASCII

Варианты использования:

• html ->

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." />

• favicon ->

  <link rel="icon" type="image/gif" href="data:image/gif;base64,iVBORw0KGgoAAAANSUh...">

• CSS ->

  .example { background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUh...'); }