Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование изображений в формате DataURI

9 июня 2017 | Опубликовано в css | 2 Комментариев »

Это может показаться несколько необычным, но существует способ размещения изображений на веб-страницах без обращения напрямую к файлу изображения. Кодируя информацию изображения как строку символов и чисел и размещая этот код в коде CSS или HTML, можно значительно сократить время загрузки. Хотя это не практично для больших изображений или для изображений, которые могут подвергаться частым изменениям, кодирование изображения в формате dataURI может предоставить два значительных преимущества: 

 

 


  • Уменьшение количества запросов HTTP. Каждый отдельный файл, который должен загрузить браузер, увеличивает время загрузки страницы. Объединение файлов с помощью использования сборного изображения или кодирования изображений с помощью способа, описываемого в этом уроке, увеличит производительность веб-страницы.
  • Задержка между запросом файла от браузера и его доставкой особенно распространена у мобильных устройств, объединение файлов исключает множество последовательных задержек, которые увеличивают время загрузки страницы.

Кодирование изображения не делается вручную, для этого нужна программа или сервис. Вот несколько примеров таких сервисов:

Кодирование изображения в base 64 создаст код, подобный следующему, он приведен укороченным для компактности:

iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAA…

Теперь можно использовать этот код везде, где можно задать изображение в таблице стилей, начиная запись с data:image/(format);base64, :

 

header {
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAA… );
}

Еще можно разместить код в формате dataURI в коде HTML для отображения изображения следующим образом:

 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…" >

После этого нужно задать атрибуты и можно задать стили этому элементу так же, как и другим элементам изображений:

 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…" >

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

  1. demimurych
    Thumb up Thumb down 0

    Это не всегда так.

    Всегда нужно сравнивать накладные расходы на декодирование base64 которое будет происходить ВСЕГДА при открытии изображения.

    Например, наши исследования показали, что например шритфты держать в base64 невыгодно. Накладные расходы в мс выше чем загрузка его напряму из кеша.