Оптимизация сайта с помощью схемы data: URL

Оптимизация сайта с помощью схемы data: URLЗдравствуйте, уважаемые читатели!

В сегодняшней статье я хочу рассказать еще об одном методе оптимизации сайта, в основе которого лежит схема, которую обычно называют data: URL. Этот метод при его правильном использовании позволяет сократить количество запросов к серверу и, тем самым, ускорить загрузку сайта.

Что такое data: URL?

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

Как это работает?

Как известно, вся информация в компьютере кодируется в виде двоичного кода, его обычно записывают с помощью 0 и 1. Например, текст на диске записан как некоторая последовательность 0 и 1, картинка – другая последовательность 0 и 1. Чтобы компьютер знал, какие это файлы, у них есть расширения.

Например, если у файла расширение .txt, операционная система понимает, что это набор символов, и для его открытия нужно запустить текстовый редактор, который и раскодирует его правильно, в виде текста. Если же у файла расширение .jpeg, ОС определит, что в данном случае закодировано изображение, и для его открытия нужна соответствующая программа – графический редактор или просмотрщик.

Если же открыть файл не соответствующей ему программой, то она раскодирует его неправильно. Например, ели открыть данные в формате .jpeg с помощью Блокнота, то мы увидим бессмысленный для нас набор символов. Набор символов в блокнотеЕсли теперь эту последовательность перекодировать в двоичный код, а потом открыть графическим редактором, то получится исходная картинка.

Именно такой принцип использует схема data: URL. Данные записываются как некий набор символов, а браузер раскодирует их как картинку.

Как закодировать изображение?

Чтобы закодировать выбранную картинку по схеме data: URL, можно воспользоваться специальным онлайн-сервисом, но сразу следует отметить, что для этого подходят лишь небольшие изображения: кнопки, маркеры и т. п. Кроме того, предварительно эти картинки следует оптимизировать и только потом отправлять на конвертацию.

Например, закодируем в формате base64 вот такой простенький маркер.Маркер

После конвертации мы получаем код, который можно вставить в HTML-страницу.Полученный код

Он содержит обычный тэг img с соответствующими атрибутами. Отличие есть у атрибута src – вместо указания пути к файлу здесь присутствует само изображение в закодированном виде. Ниже сервис выдает HTML-код для создания фона, Код для фонаа еще ниже просто код.data: URL

Код содержит вспомогательную информацию:

data: image – сообщает браузеру о том, что тип закодированных данных – изображение,

png – его формат,

base64 – тип представления кода, а дальше идет непосредственно код.

Достоинства и недостатки схемы

Главным достоинством схемы можно считать возможность сокращения числа HTTP-запросов. При большом количестве таких объектов это позволяет значительно сократить время загрузки.

Есть у этой схемы и недостатки:

  • Ограничение по длине кода. Эта технология может применяться лишь для маленьких картинок.
  • Закодированные по этой схеме изображения приблизительно на треть больше по размеру, чем сохраненные обычным способом.
  • Если обычные изображения сохраняются в кэше браузера, то представленные в base64-кодировке не кэшируются.

Выводы: когда применять схему data: URL

Итак, подведем итоги.

Кодирование base64 можно применять только для маленьких изображений.

Код изображения в формате base64 выгодно вставлять в файл CSS. Этот файл кэшируется и при просмотре других страниц не требуется обращаться к серверу для загрузки изображений.

Если же изображение прописано в HTML-коде страницы, то выгоднее это сделать в обычном виде, так как графические файлы кэшируются браузером, а base64-код – нет.

Таким образом, схема data: URL при большом количестве небольших объектов может заметно сэкономить HTTP-запросы и увеличить скорость загрузки сайта. Конечно, применять ее надо продуманно.

Надеюсь, статья оказалась для вас интересной, поделитесь ей в социальных сетях.

До скорой встречи!

Еще советую почитать по этой теме:

Как использовать нестандартные шрифты для сайта
Здравствуйте, уважаемые читатели! В предыдущей статье «Применение стилей CSS в редакторе WordPress» я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на ...
Адаптивный дизайн или мобильная версия
Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, ...
Какой должна быть структура сайта?
Здравствуйте! Как вы думаете, какое значение в продвижении сайта имеет его структура? Я считаю это понятие очень важным, уверен, что от его структуры зависит очень ...
Уроки Adobe Muse
Здравствуйте, уважаемые читатели блога kviter.ru! В сегодняшней статье я хочу посоветовать уроки для изучения современного визуального редактора Adobe Muse. Скачав уроки бесплатного курса Adobe Muse, вы можете ...
Какой хостинг выбрать?
Каждый человек, создающий сайт или блог, на определенном этапе задает себе вопрос: «Какой хостинг выбрать?» Компаний предлагающих услуги по размещению Интернет-ресурсов сейчас очень много, но ...
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...

19 комментариев к “Оптимизация сайта с помощью схемы data: URL

  1. Здравствуйте ! Мне понравилась ваша статья! И судя по комментариям не только мне, интересно пишите свой блог;)
    Могу поделится с вами интересными наработками по набору максимального количества читателей,заходите ко мне и я поведаю вам еще несколько способов, какими пользуюсь сам)
    Успехов автору!

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

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

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *