Как кодировка Base64 влияет на SEO
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
- Не нужно хранить изображения физически на сервере
- Так как код изображения внедрен в страницу, браузеру больше не нужно делать запрос к серверу для загрузки этого изображения, что снижает количество запросов к серверу, повышая в итоге скорость загрузки страницы.
Минусы от преобразования картинок в base64
- Размер изображения увеличивается. Если ваша картинка занимала 100 килобайт, то после преобразования в base64, ее размер увеличивается до 150 килобайт.
- Не получится кэшировать изображения, что снизит скорость работы сайта и увеличит нагрузку на браузер пользователя.
- В разы увеличивается размер «неполезного» кода страницы, а это плохо для SEO.
- Гугл не увидит ваши картинки, и вы не получите трафика с google.image (для информационных сайтов это критично)
Base64 vs стандартный способ вставки изображений
Предположим, у вас есть повторяющиеся изображения на странице.
К примеру, у вас интернет-магазин, и нужно вывести значок «добавить в корзину» у каждого товара на странице. Всего товаров будет 30.
Исходные данные
- Размер иконки картинки: 10 килобайт.
- Иконка используется на странице: 30 раз
|
Вес картинок |
Размер кода |
Стандартный способ |
10 килобайт |
30 строк |
Base64 |
450 килобайт |
~ 4500 строк |
При использовании стандартного способа вставки страницы браузер загрузит картинку 1 раз. Потребуется всего 10 килобайт памяти (не нужно загружать одну и ту же картинку по 10 раз, достаточно 1-го).
При использовании Base64 картинка станет больше на 5 килобайт, а ее размер составит уже не 10, а 15 килобайт.
Напомню, что кешировать картинку невозможно! И она будет загружена все 30 раз, а общая нагрузка на браузер пользователя составит уже 450 килобайт вместо 10.
Вывод
Использовать Base64 для отображения картинок — это плохая идея. Особенно, если вы собираетесь делать высоконагруженный сайт (с большой посещаемостью) или рассчитываете получить высокие позиции в поисковиках.
