CSS - чрезмерное использование спрайтов изображений

Question

Я недавно начал использовать спрайты изображений, и они определенно отлично подходят для уменьшения http запросов. Есть ли момент, когда это становится плохой практикой?

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

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

Я действительно ищу мнение о двух описанных здесь ситуациях + любые другие общие соображения / рекомендации по использованию спрайтов.

Answer 1

Они часто могут вызывать проблемы с производительностью на мобильных устройствах. Я не уверен на 100%, почему (никогда не углублялся в проблему), но я предполагаю, что это потому, что мобильный webkit загружает новую копию относительно большого изображения в память для каждого его экземпляра на странице. Поскольку мобильные устройства часто имеют очень мало ОЗУ, это может привести к быстрому замедлению страницы.

Раньше я сталкивался с этой проблемой, когда на странице было около 300 спрайтов значков, каждый из которых извлекал изображение спрайта, содержащее около 50 различных значков. Возвращаясь к "обычным" методам с одним значком на изображение (или 2-3 для состояний при наведении), удалось решить проблемы с производительностью на этой конкретной странице.

Кроме того, многие браузеры (мобильные и другие) часто не на 100% учитывают ограничение спрайтов, когда вы слегка изменяете размер содержимого страницы (например, используя «Увеличение / Уменьшение» в самом браузере). Вы часто будете видеть маленькие кусочки спрайта рядом с тем, который хотите использовать.

Что касается вашего примера пули, вам не нужно больше, чем один дополнительный div / span. Вы бы установили margin-left на li и поместили бы ваш "bullet div" в пустое пространство, которое он создает.

При этом я использую спрайты все время, потому что они удобны, просто имейте в виду несколько проблем с ними. Как правило, у меня есть sprites.png, sprites_h.png и sprites_v.png для горизонтально и вертикально повторяющихся фигур.

Answer 2

Я бы разделил спрайты по связанным элементам, таким как навигация и спрайты, связанные с контентом, чтобы вы могли извлечь выгоду из спрайтов и сохранить логический порядок в своем коде.Не забывайте, что читаемый и понятный код должен быть приоритетом (особенно в CSS, он может стать очень грязным), если вы не работаете над проектом масштаба Google.

Answer 3

Напишите две простые тестовые страницы, используйте спрайты на одной, а не на другой. Используйте инструмент типа http://www.webpagetest.org/ для измерения производительности в нескольких разных браузерах. Если у вас есть данные, вы можете принимать решения.