Когда CSS Sprite слишком велик?

Question

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

Наверное, я спрашиваю: когда спрайт слишком велик?

Answer 1

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

Answer 2

Если вы используете PNG для типа изображения спрайта, полезно помнить, что каждая строка обычно сжимается (сдавливается) независимо от других строк.

Таким образом, чтобы помочь сбалансировать количество спрайтов / размер изображения, попробуйте разместить похожие спрайты рядом друг с другом по горизонтали, а не по вертикали, чтобы воспользоваться преимуществами сжатия.

PNG также поддерживает «предикторы», которые сохраняют дельты только между прогнозируемым значением (на основе предыдущих строк и предыдущих пикселей в той же строке) и фактическим значением.

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

Answer 3

Является ли основным назначением спрайтов уменьшение количества http-запросов к серверу для графических элементов на странице?

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

когда спрайт слишком велик?

Это действительно сумма всех запросов, на которые вы хотите посмотреть. Единственный способ для спрайта быть слишком большим, если сумма его частей (что и является спрайтом ) слишком велика для начала.

Answer 4

Что касается спрайтов, вам обязательно следует ознакомиться с обсуждением использования памяти в этом посте: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

Мой совет:

• Только строки значков спрайтов, кнопки и повторяющиеся изображения (например, градиентный блок со скругленными углами).
• Оставь все остальное в покое
• Держите изображения размером менее 500x500 или 100 КБ и оставляйте как можно меньше неиспользуемого пространства. Используйте .png или .gif в зависимости от ситуации

Answer 5

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

Конечно, если у вас есть 10-мегапиксельные фотографии на вашем веб-сайте, их упаковка будет безумием.

Answer 6

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

Answer 7

Да, основная цель - уменьшить количество запросов (и, следовательно, время загрузки). Еще одним преимуществом является то, что вам нужно беспокоиться только об одном изображении, которое будет кэшировано правильно. Совет: используйте изображения PNG, поскольку их сжатие лучше всего обрабатывает большие белые («пустые») области.

Answer 8

Карты Google используют изображения [256x256] px.