Я нашел очень полезный инструмент для создания обратных спрайт-изображений. http://responsive-css.spritegen.com/Отзывчивые CSS-спрайты с фоном-изображением
К сожалению, спрайты генерируются как теги img и создают собственный HTTP-запрос. Есть ли элегантный способ, как делать отзывчивые CSS-спрайты с использованием свойства background-image?
Да, используйте данные-url. Биты изображений могут быть встроены непосредственно в таблицу стилей. Вы также можете вставить URL-адрес данных в свойство src тега изображения.
В таблице стилей, это выглядит следующим образом:
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)
Это данные URL Б.Г. изображение для 2x3 прозрачного PNG изображения (только для примера - это мало).
data-urls сделать спрайты устаревшими - вы можете вставлять несколько URL-адресов данных вместо одного спрайта, а дополнительных HTTP-звонков нет (на самом деле это один меньше).
Вы можете легко создать его из существующего изображения. Онлайн-инструмент: http://dataurl.net/#dataurlmaker
делает браузер подсчет данных: image/png как HTTP-запрос или нет? Я вижу это в списке с запросами данных в хроме, но я не вижу времени для обработки/ожидания этого. – xtomeek
Это не * make * http-запрос для URL-адреса данных. Инструменты разработчика Chrome перечислит его на вкладке сети, но будьте уверены, что на этот ресурс нет никаких обходов на сервер. – Faust
отлично, спасибо за разъяснение – xtomeek