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

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

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

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

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

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

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

Выглядит это примерно вот так:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQ

Зачем кодировать изображения в 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 для отображения картинок — это плохая идея. Особенно, если вы собираетесь делать высоконагруженный сайт (с большой посещаемостью) или рассчитываете получить высокие позиции в поисковиках.