Как я могу побудить браузер быстрее загружать изображения из файла CSS?

Я использую CSS для размещения большого количества своих изображений (в качестве фонов <div>) и часто обнаруживаю, что они загружаются очень медленно. Кажется, они загружаются последними. Даже маленькие маленькие изображения значков требуют некоторого времени, чтобы появиться таким образом. Есть ли способ указать браузеру приоритет для изображений? Или заставить его загружать изображения в файле CSS ранее и отображать их раньше?

CSS для стиля, а не для контента. Браузеры (справедливо) пытаются отобразить контент перед добавлением стилей, поэтому причина, по которой изображения в таблицах стилей обычно загружаются в последнюю очередь. Если изображения важны для вашего контента, добавьте их с помощью стандартных <IMG>тегов HTML .

Используйте абсолютные URI из таблицы стилей и добавляйте изображения из тегов IMG в скрытые <div>на странице (предполагается, что вы используете одни и те же изображения на каждой странице; в идеале в нижнем колонтитуле, чтобы они все загружались и кэшировались при любом вызове страницы ).

Изображения на странице получают приоритет, и, как только изображения кэшируются, они будут отображаться немедленно при последующих запросах страницы.

Для браузеров, которые поддерживают тип URI данных (см. Http://en.wikipedia.org/wiki/Data_Uri для информации), чтобы включить изображение в сам CSS.

Это имеет несколько недостатков:

• Данные перезагружаются, когда CSS не кэшируется отдельно, хотя, если ваш CSS не меняется регулярно, это не является большой проблемой.
• Отсутствие наследования в CSS и это означает, что могут быть случаи (потеря пропускной способности), когда вам приходится включать одну и ту же графику несколько раз или изменять классы, используемые в вашем документе.
• При использовании этого способа изображения кодируются в формате base64, что означает, что они занимают большую полосу пропускания (хотя проблема с полосой пропускания гораздо менее значительна, если вы отправляете сжатые данные).
• Вам нужно будет предоставить альтернативные стили для браузеров, которые не поддерживают URI данных, некоторые из которых весьма распространены (например, IE6 и IE7).

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

Используйте CSS-спрайты , особенно для иконок.

Сделайте ваши изображения как можно меньше. Вы можете использовать smush.it для удаления ненужных байтов.