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

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

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

• энкодер DataURI
• энкодер/переводчик бинарных файлов в Base64

Кодирование изображения в 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

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

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

• Фоновые изображения для экранов Retina с использованием свойства задания изображения
• Затемнение изображений простым и быстрым способом на чистом CSS
• Использование множественных фоновых изображений в CSS3