Компромисс для CSS-спрайтов: сколько изображений нужно объединить в одно

Question

Интересно, как лучше всего сочетать изображения для CSS-спрайтов?

Допустим, у меня 50 изображений, но каждой странице нужно только 5. Общий размер спрайтового изображения составляет 100 КБ.

Очевидно, что существует дюжина параметров, сколько страниц посещается за одно посещение, скорость соединения пользователей, задержка. Я не ищу математическую формулу для вычисления наилучшего компромисса, поскольку не могу оценить эти параметры достаточно точно.

Итак, у вас есть какие-либо значения опыта, когда объединять изображения в спрайт, а когда не . (На самом деле, "не" интереснее ИМХО).

Помещаете ли вы все изображения на спрайт, которые "могли бы" понадобиться для одной страницы, но что-нибудь, что понадобится только второй странице на отдельном спрайте?

Answer 1

По моему мнению, только группируйте изображения в спрайте, если они актуальны.

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

Это также помогает объединять только связанные изображения - это упрощает отслеживание CSS-ссылок на файлы и упрощает использование координатных координат x / y.

Answer 2

вот мои два цента ... Я обычно пытаюсь спрайтовать изображения для заданного пути, который, как я ожидаю, получит более сильный удар, чем другие. Например; если мои сайты, поэтому я называю критический путь: пользователь входит в систему, переходит на домашнюю страницу, проверяет сегодняшние предложения, покупает одно и выходит из системы, я бы хотел, чтобы большинство распространенных изображений распределялось (логически группировалось при необходимости) по этому пути , Наличие спрайтов устранит множество лишних запросов. Если вы зайдете на google.com, вы увидите спрайт (nav_logo99.png), который содержит большинство распространенных изображений, которые вам понадобятся, на следующей странице (ах).

Также, чтобы ответить на ваш вопрос «когда не спрайтовать», повторение фона и CSS-спрайты плохо сочетаются, поэтому я буду держаться подальше от них.

Answer 3

Я учитываю, сколько страниц посетит мой пользователь.Вы должны помнить, что ваш спрайт обычно кэшируется, поэтому загружается только один раз.Если пользователь вашего сайта бегает по нескольким страницам, то лучше иметь больший файл, но вы правы, если большинство ваших пользователей посещают только вашу домашнюю страницу, тогда вы не захотите загружать все изображения своих сайтов в одном спрайте.Лучше всего просто почувствовать, что лучше оптимизировать для спрайтов