Создание фонового изображения, закодированного в CSS

7 августа 2014 | Опубликовано в css | 5 Комментариев »

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

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

Существует несколько путей для решения этой проблемы: мы можем воспользоваться объединенным, или же закодированным изображением.

Демонстрация работы

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

Закодированное изображение состоит из произвольного набора символов, и выглядит примерно так:

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 или просто код.

Недостатки

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

n Удобство: С этим возникает больше всего сложностей при использовании закодированных изображений. Нам придется сделать больше действий, чем при использовании самого изображения.

n Поддержка браузерами: Закодированные изображения не поддерживаются в браузерах Internet Explorer 6 и 7. Но браузер Internet Explorer 9 должен их поддерживать.

n Internet Explorer 8: Размер кода в нем ограничен 32768 байтами.

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

Вот пример, показывающий, как использовать этот способ. В этом случае мы создадим «шумную» текстуру. Изображение ниже покажет, как это выглядит.

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

Сначала нам понадобится «шумная» текстура c прозрачностью в формате PNG. К счастью, чтобы создать ее, есть удобный инструмент NoisePNG. Мы можем настроить размеры вывода, интенсивность шума и прозрачность изображения.

В этом случае мы задаем значение цвета фона как #333333, затем уменьшаем значение прозрачности до 50 и, наконец, преобразовываем текстуру изображения в черно-белое. И скачиваем получившееся изображение.

2. Преобразование «шума» в код

Теперь заходим на сайт Duri.me. Перетаскиваем на него скачанное ранее изображение в формате PNG и затем выбираем опцию «copy code as CSS» (копировать код как CSS), это вторая кнопка.

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 с соответствующими стилями. Если мы загрузим оба варианта в браузере и посмотрим в журнал запросов, будет видно, что у варианта, использующего закодированное изображение, меньше HTTP-запросов, чем у указывающего на изображение напрямую.

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

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

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

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

Опубликовано в css, августа 7, 2014
Метки: css, верстка, урок css, урок верстка, фоновое изображение, фоновое изображение css

�

Ugputu
7 августа 2014 в 12:51
0

Точно так-же можно регулировать отступ подчеркивсния у текста. (iteye.ru/1776/nizhnij-ots...e-bloka-i-border) А еще можно base64 делать в фотошопе (iteye.ru/1780/photoshop-to-base64)
brv
7 августа 2014 в 15:47
+4

для тех кто использует Sublime + Emmet — комбинация клавиш Ctrl+' кодирует картинку
Loolz
7 августа 2014 в 22:28
0

а то, что трафик увеличивается, никто и не сказал.

Michael Danilov Ответ:
августа 10, 2014 at 2:58 дп

0

Он не намного увеличивается. Но зато исчезает время на отдельный запрос для небольшой картинки.
Из минусов — отсутствие кеширования самой картинки.

ЕстьЧе? Ответ:
августа 11, 2014 at 9:03 пп

0

А потом сеошники ругаются на битые сслыки