Base64 – это способ кодирования данных, при помощи 64 символов. Этот стандарт кодирования используется в электронной почте, криптографии (школьного уровня), рассылки спама (спам фильтры часто пропускают письма кодированные в base64) и еще в куче разных областей и приложений.

Некоторые особенности:

  • В отличии от других алгоритмов шифрования, закодированную в base64 информацию, можно легко декодировать и получить исходные данные.
  • Документы закодированные в Base64 не имеют фиксированной длинны

Кодирование изображений через img src base64

Любое изображение можно представить как код, состоящий из определенного набора символов. Возьмем произвольное изображение

Пример изображения

Если кодировать это изображение в base64, то мы увидим около 150 строк кода!

Вота малая часть этого кода:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wgARCALQBQ

Зачем кодировать изображения в base64

Разберем на примере.

Обычно, для вывода изображения на страницу, мы должны предварительно загрузить это изображение к себе на сервер, и затем мы можем без проблем выводить его через тег img src:

img src="../../../images/kondrashov-online.png" /> — это привычный способ вывода изображения в html коде.

  • img src – это html тег для вывода изображения
  • /images/ — это папка в которой лежит нужное изображение
  • kondrashov-online.png – это название изображения с расширением

т.е. мы не сможем вывести изображение на сайт, не указав путь к этому изображению.

При кодировании изображения в Base64 нам не нужно хранить это изображение на сервере!

Кодируя изображение в base64, мы получаем код, который преобразуется браузером в изображение. Нам больше не нужно физически хранить это изображение в какой-либо папке. Теперь наше изображение – это набор символов.

Достаточно вставить этот код в html страницу, и браузер преобразует его в картинку.

Плюсы от преобразования картинок в base64

  1. Не нужно хранить изображения физически на сервере
  2. Так как код изображения внедрен в страницу, браузеру больше не нужно делать запрос к серверу для загрузки этого изображения, что снижает количество запросов к серверу, и в итоге, повышает скорость загрузки страницы

Минусы от преобразования картинок в base64

  1. Размер изображения увеличивается. Если ваша картинка занимала 100 килобайт, то после преобразования в base64, ее размер увеличивается до 150 килобайт.
  2. Не получится кешировать изображения, что снизит скорость работы сайт, и увеличит нагрузку на браузер пользователя
  3. В разы увеличивается размер «не полезного» кода страницы, это плохо для SEO
  4. Гугл не увидит ваши картинки, и вы не получите трафика с google.image (для информационных сайтов это критично)

Base64 vs стандартный способ вставки изображений

Предположим, у вас есть повторяющиеся изображения на странице.

К примеру, у вас интернет-магазин, и нужно вывести значок «добавить в корзину» у каждого товара на странице. Всего товаров будет 30.

Исходные данные

  • Размер иконки картинки: 10 килобайт.
  • Иконка используется на странице: 30 раз

 

Вес картинок

Размер кода

Стандартный способ

10 килобайт

30 строк

Base64

450 килобайт

~ 4500 строк

При использовании стандартного способа вставки страницы, браузер загрузит картинку 1 раз. Потребуется всего 10 килобайт памяти (не нужно загружать одну и туже картинку по 10 раз, достаточно 1го)

При использовании Base64, картинка станет больше на 5 килобайт, и ее размер составит уже не 10, а 15 килобайт.

Напомню, что кешировать картинку невозможно! И она будет загружена все 30 раз, а общая нагрузка на браузер пользователя составит уже 450 килобайт вместо 10

Вывод

Использовать Base64 для отображения картинок - плохая идея, особенно, если вы собираетесь делать высоконагруженный сайт (большая посещаемость) или рассчитываете получить высокие позиции в поисковиках.