Какова идея позади спрайтов изображения, как приблизиться к ней?
Как Вы приближаетесь к использованию спрайтов изображения в CSS?
Я должен взять все изображения в своем веб-сайте и объединить их к одному спрайту изображения? Это действительно настолько выгодно?
Как трудно это должно поддержать те изображения и изменить их позже?
4 ответа
Должен ли я взять все изображения на моем сайте и объединить их в один спрайт?
Конечно, нет. Вы воспринимаете это слишком буквально.
Я считаю, что спрайты лучше всего использовать для групп похожих изображений. Примеры:
- Все состояния графической кнопки
- Состояния иконок
- Все перестановки фона (если только он не должен быть двухсторонним)
Действительно ли это так полезно?
Если у вас их много на загруженном сайте, то очень. Это экономит запрос для каждого изображения, что экономит время пользователя, а вашему серверу - целую кучу одновременных соединений.
Насколько сложно поддерживать эти изображения и менять их в дальнейшем?
Если вы использовали их логично, то довольно просто. Если вам нужно добавить еще один элемент навигации, вы открываете свой навигационный спрайт и расширяете его. Для таких вещей, как навигация, это может быть проще в обслуживании, потому что у вас есть сравнения рядом с вами в одном документе.
Редактирование, увидев один из более экстремальных примеров, я добавлю, что я бы никогда не пошел так далеко, потому что:
Это 60k для загрузки. Не очень много, но на медленных соединениях это 60k, которые должны быть загружены, прежде чем что-то появится. Если все ваши визуальные активы связаны, это может привести к тому, что время загрузки будет казаться больше.
Ваш CSS становится бессмысленной мешаниной из
background-positionкоманд. Если вы захотите внести изменения, вам придется вернуться к спрайту и все измерить. И снова, и снова, и снова.Господи, помилуй вашу душу, если вам нужно увеличить что-то в левом верхнем углу спрайта. Скорее всего, вы просто добавите новый спрайт ниже текущих.
А это может привести к раздуванию. Действительно, загрузка всех этих изображений может привести к загрузке большого количества материала, который некоторые пользователи никогда не увидят. Загрузка неиспользуемых данных вероятно хуже, чем накладные расходы на соединение (учитывая, как легко статический контент может обслуживаться несколькими дешевыми серверами или CDN)
Другие примеры гораздо более просты и достойны внимания (IMO).
Спрайты хорошо работают, когда у вас есть элемент, по крайней мере, с одним фиксированным размером (шириной или высотой), и вы хотите, чтобы у него было другое фоновое изображение в разных обстоятельствах.
Когда я попробовал это, я обнаружил, что файлы изображений спрайтов, как правило, меньше, чем общий размер отдельных файлов изображений, из которых они сделаны, поэтому вы можете сэкономить полосу пропускания, а также получить два других преимущества. :
- меньше HTTP-запросов
- без задержки ожидания загрузки другого изображения при изменении состояния изображения при наведении курсора
Это действительно зависит от содержимого изображений.
Лично я бы не стал объединять несвязанные изображения в один спрайт, так как я думаю, что это делает обслуживание слишком неочевидным. Кроме того, как упоминалось в Спрайт или не спрайт , действительно большие изображения спрайтов могут использовать довольно много памяти браузера. (Плохо ли это на самом деле, зависит от контекста.)
Идея заключается в том, чтобы избежать ненужных HTTP-запросов. Это особенно актуально, если у вас много маленьких иконок (скажем, для редактора WYSIWYG, как тот, что используется на этом сайте). Если у вас двадцать иконок размером 16x16 пикселей, это не займет много полосы пропускания, но все равно будет означать двадцать дополнительных запросов при каждой загрузке страницы.
Другими кандидатами на спрайты являются состояния кнопок и все, что чисто декоративно, но является частью макета.
Если вы используете смену фоновых изображений, вы также обнаружите, что вам придется либо предварительно загружать изображение состояния перехода (либо с помощью JS, либо с помощью глупого жесткого кодирования), либо столкнуться с некоторой задержкой, когда браузер запрашивает ранее неиспользуемое изображение. Спрайты могут облегчить эту проблему.
Вещи, из которых, вероятно, не стоит делать спрайты, - это изображения, которые НЕ являются просто графическими элементами (например, графики, иллюстрации, аватары, реклама) или которые будут часто меняться (например, аватары или реклама).
Изменить спрайты не невозможно, но в зависимости от того, насколько тщательно вы продумали расположение спрайтов, это может быть очень трудно сделать. Ничто не заставляет вас делать спрайт-лист сверхсжатым, но для размера файла будет лучше, если в нем не будет много ненужного пробельного пространства (см. Google).
Обратите внимание, что дополнительные запросы могут не стать для вас проблемой, если у вас относительно малопосещаемый сайт (что есть почти у всех, если вы не Google или Amazon). Однако спрайты все же могут улучшить производительность для мобильных устройств, так как это означает меньшую вероятность ошибок и, следовательно, меньшую задержку.
Спрайты - это отличный способ сократить время загрузки графики (иногда), и всегда способ сократить запросы к серверу. Вообще говоря, они могут потребовать серьезного планирования, поскольку вы не хотите просто набросать кучу изображений на холст и экспортировать в jpeg. Я бы посоветовал вам изучить некоторые спрайты, используемые в настоящее время крупными компаниями, такими как Amazon. Получите представление о том, как они располагают свои элементы, и какие типы изображений они рассматривают для использования в спрайтах.
Вы также захотите оценить свой сайт и убедиться, сможете ли вы успешно реализовать их или нет. Если вы не планировали использовать их с самого начала, то может потребоваться значительная переработка и обновление, чтобы подготовиться к их использованию.
