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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Когда слишком большой спрайт?

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

Ответ 4

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

Мой совет:

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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