Ограничение высоты спрайта для изображений CSS? - PullRequest
6 голосов
/ 04 февраля 2010

Я делаю спрайт, и его высота достигает 4000 пикселей.Существует ли общий размер для максимальной высоты спрайта, который используется в сообществе графического дизайна?

Ответы [ 2 ]

11 голосов
/ 04 февраля 2010

Браузерам придется распаковывать (и хранить в памяти) все изображение, даже если вы используете в нем только очень немного спрайтов, и даже если большая часть изображения пуста / белая. Для настольного клиента вы упустили случай стать хорошим гражданином, используя слишком много памяти (а браузер уже высасывает много памяти). Для некоторых мобильных клиентов (например, IPhone для файлов размером более 25 Кб после распаковки) это может быть более проблематичным, изображение не будет кэшироваться вообще, поэтому может быть лучше иметь 2 файла <25 КБ и два HTTP-запроса, чем один> Файл 25 КБ и один запрос никогда не кэшируются.

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

О, а также, из-за слишком большого количества спрайтов, вы можете получить слишком много разных цветов на одном изображении и упустить возможность получить приличное изображение с палитрой. Тестирование всех комбинаций этого утомительно, но если вы можете, группировка ваших спрайтов по основным цветам градиентов является хорошей эвристикой (поскольку градиентам / размытию нужно много разных цветов).

3 голосов
/ 04 февраля 2010

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

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

...