Оптимизация: Хранение мелких изображений в css и html коде

В оптимизации скорости загрузки сайтов важно количество запросов к веб-серверу.

Если посмотреть на известный инструмент тестирования скорости загрузки сайта - tools.pingdom.com, то можно увидеть что они разделяют каждый запрос к серверу на следующие этапы:

  • Dns - время которое нужно для преобразования DNS-имени сайта в IP-адрес
  • Connect - время потраченное на установку tcp-сессии
  • Send - время потраченное на отправку данных
  • Wait - время потраченное на ожидание получения первого байта от сервера  после отправки данных или установки соединения
  • Receive - время потраченное на получение данных от сервера

В большинстве случаев время потраченное на этап Receive меньше, чем время потраченное на все остальные этапы. А значит быстрее будет передать 1 мегабайт данных в одном файле, чем 10 файлов по 100 килобайт. А если учесть, что часто хостинги не поддерживают более чем пять параллельных потоков, то 10 файлов будут создавать очередь,  разница в скорости загрузки будет еще ощутимей.

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

Именно для этого были придуманы css спрайты, но не всегда получается в них "засунуть" все изображения. В таких случаях может пригодиться следующий трюк - хранение закодированных в base64 изображений в сss или html-коде. То есть изображения будут встроены в саму html страницу или css файл, они не создают дополнительные запросы к веб-серверу.

Base64 используется для предоставления каких-либо бинарных данных, например изображений, аудио или видео файлов в виде "абракадабры" из текста. Благодаря чему эти файлы можно хранить в текстовых файлах и передавать текстовыми сообщениями.

Конечно изображение в base64 формате занимает больше места, чем просто в своем "родном" формате - jpg, png и т.д. Но! Разница нивелируется за счет того, что при правильной оптимизации сайта html и css данные передаются в сжатом виде, это называется gzip-сжатие.

Пример: моя фотография в сайдбаре, которая над надписью "Владимир Демянович".

В виде файла она занимала 5,16 КБ. Когда я ее закодировал в Base64 она стала занимать 6,91 КБ, но в сжатом gzip-формате занимает 5,22 КБ. Мало того, я решил ужать сам  jpg-файл, чтобы он занимал меньше места, для этого я загрузил его в соц. сеть Вконтакте, она прекрасно ужимает изображения, без видимой потери качества. В результате я получил файл размером 3,67 КБ, а в gzip сжатом base64 это получилось 3,71 КБ. Выгода от оптимизации на лицо - избавился от лишнего запроса и даже уменьшил объем.

Тоже самое можно повторить с другими не большими изображениями.

В интернете есть достаточно много разных Base64 конверторов, которые помогут вам что-либо конвертировать прямо в онлайне, без установки и скачивания чего-либо.

Я воспользовался вот этим: webcodertools.com/imagetobase64converter

Хранение изображение в base64

Если раньше код, который отображал мою аватарку выглядел вот так:

<img src="/wp-content/themes/Technologic/images/photo.jpg" width="108" height="108" alt="">

То теперь он выглядит вот так:

<img alt="" src="data:image/jpeg;base64,тут-много-текста-абракадабры" width="108" height="108" alt="">

 

Понравилось? =) Поделись с друзьями:

Обсудить