Як я можу заохотити браузер швидше завантажувати зображення з файлу 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).

На сьогоднішній день немає можливості визначити, які файли завантажуються спочатку. FYI, зображення , зазначені в CSS - файлів в якості фонових зображень завантажити останній , ймовірно , тому , що браузер бачить їх не-контенту і , таким чином , більш низький пріоритет , тому слід уникати їх використання для важливих зображень , які ви хочете завантажити швидко.

Використовуйте спрати CSS , особливо для значків.

Зробіть свої зображення якомога меншими. Ви можете використовувати smush.it для видалення зайвих байтів.