7.05.13, 12:45
0 комментарий
  Уроки

Исследование: используем закодированные изображения в CSS (background-image)

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

div {
	background-image: url(img/image.png);
}


Тем не менее, URL каждого добавленного изображения создает дополнительный запрос к серверу. Другими словами, если у нас будет 10 разных URL, браузеру понадобиться сделать 10 разных HTTP-запросов.

Существуют и другие способы использования фоновых изображений – в форме спрайт-изображения при помощи CSS, либо в форме закодированного изображения.



Закодированное изображение

Закодированное изображение состоит из случайных символов, и выглядит все это следующим образом:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==


У нас есть возможность использовать закодированное изображение в элементе 'img', а также при помощи параметра background-image.

Так как оно встраивается в документ напрямую, и не ведет на внешние источники, браузеру не нужно делать дополнительные HTTP-запросы, чтобы выдать результат.

Вот так наш код будет выглядеть в HTML:

<img width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==" >


А так в CSS:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==);


Конвертируем изображения в кодовый формат

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

Исследование: используем закодированные изображения в CSS (background-image)


Недостатки

Тем не менее, у каждой технологии есть свои недостатки и закодированные изображения – не исключение. Давайте рассмотрим некоторые недостатки, связанные с данным методом:

* Реализация: довольно сложно реализовать данный метод – нам нужно будет пройти через большее количество технических этапов, нежели при использовании простого изображения.
* Браузерная поддержка: закодированное изображение не поддерживается в IE 6 и 7. Но начиная от IE 9 все должно быть хорошо.
* Internet Explorer 8: что касается Internet Explorer 8. То данный браузер ограничивает размер кода до 32768 байт.

Способ применения

Давайте рассмотрим пример того, как можно применить данный метод. На этот раз мы займемся разработкой текстуры шума. Нижеприведенный скриншот покажет вам, как все должно выглядеть.

1. Создаем шум с прозрачностью

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

Исследование: используем закодированные изображения в CSS (background-image)


В данном случае мы выставляем цвет фона на #333333. А затем снижаем уровень непрозрачности до 50, и преобразуем текстуру в монохромную.
Скачиваем изображение.

2. Конвертируем шум в код

Теперь давайте откроем Duri.me. Перетащите скачанное PNG-изображение, а затем нажмите «copy code as CSS» (скопировать код в форме CSS).

Исследование: используем закодированные изображения в CSS (background-image)


3. Добавляем код в CSS

Наконец, нам нужно добавить этот код в каскадные таблицы стилей следующим образом:

body {
background-color: #333333;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url(data:png;base64,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)
}


Для сравнения, мы также прикрепили PNG-изображение при помощи CSS-кода в другом документе. Затем, если мы загрузим эти проекты в браузере и просмотрим Log-запись запросов, то увидим там, что в документе с закодированным изображением меньше HTTP-запросов, чем в документе, который напрямую ведет к изображению.

Исследование: используем закодированные изображения в CSS (background-image)


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

Исходники в архиве.

СКАЧАТЬ

Вес файла
37.04 Kb

Напишите своё мнение