G|Translate: English EN Français FR Deutsch DE Italiano IT Русский RU Español ES

Кодировка картинок 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 файла





Почитать в разделе: EMAIL

  • Всего статей в разделе: 3
  • Показано статей в списке: 2
  • Сортировка: название по алфавиту

Загадочные буквы MX, SPF, DKIM для EMAIL

Вот такая сложная картинка Вся эта красота нужна для того, что бы получатель письма email мог проверить истинность отправителя. Настраивается у хостера в разделе "записи DNS" для текущего домена. Лень спамеров всё это заполнять - позволяет сервисам электронной почты отправлять кривые письма сразу в папку СПАМ. По самим терминам: MX запись  (от англ. Mail eXchanger) — тип DNS-записи, предназначенный для маршрутизации электронной почты с использованием протокола SMTP. DMARC (Domain-based Message Authentication, Reporting and Conformance) -  идентификация сообщений, создание отчётов и определение соответствия по доменному имени — это техническая спецификация, созданная группой...
(Читать полностью...)

Форма обратной связи

Рассмотрим самый простой вариант формы обратной связи. Как сделать форму обратной связи на HTML? Вот такую? Работу формы можно посмотреть на сайте www.titovsergei.ru Честный ответ - никак, HTML - это язык разметки (т.е. можно сделать только "скелет" формы), а нам нужны действия с данными. Как минимум нужна связка HTML+PHP. Причем данная связка будет работать только на сервере хостера (где есть поддержка PHP) и не будет работать на локальном ПК (нужна установка как минимум Denwer). Итого наша форма будет в виде связки HTML+PHP. Из Java (на стороне пользователя) только событие onclick для подтверждения отправки формы. Все проверки и обработки происходят на сервере...
(Читать полностью...)