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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

Кодировка картинок 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...'); }

 


Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла



Сохранить URL
close slider

Cохраните себе адрес (URL) этой страницы

Сохраните файл со ссылкой себе на компьютер

 

В htm файле будет ссылка на данную страницу, её заголовок и описание.

Отправьте себе письмо со ссылкой


Ваш e-mail:
Какой сейчас год (например):
Извините, простая капча от роботов.

Если всё заполнено корректно - к Вам на почту придет письмо, в котором будет ссылка на данную страницу, её заголовок и описание.

Это работает на любых устройствах :)

P.S. Это не подписка на рассылку!

Для размещения рекламных постов пишите на электропочту

site_post@bk.ru

 


Яндекс.Метрика