Ограничение высоты Sprite для изображений CSS?

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

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

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

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

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