У меня есть лист спрайтов, который я использую в качестве фона div. Размеры:
Ширина: 105920 Высота: 240 .
Это монохромный файл png размером 620 КБ, поэтому я предполагаю, что размер здесь не проблема.
Когда я пытаюсь использовать его как background-image: url("spritesheet.png");, Firefox выдает ошибку "Изображение повреждено или усечено". Chrome не показывает никаких сообщений об ошибках, но изображение не отображается.
Если я изменяю ширину изображения с помощью GIMP до 10 000, все в порядке. но, очевидно, я больше не могу использовать его по назначению.
Существуют ли какие-либо ограничения на максимально допустимый размер изображения в CSS? Я делаю что-то неправильно ?
Ответ 1 · рейтинг 4 · Mark Simpson
Согласно ответу на этот вопрос, ваше изображение слишком большой для Safari/iOS. Другие браузеры, вероятно, имеют аналогичные ограничения, как вы обнаружили в Firefox. Размер файла 620 КБ приемлем, но размеры изображения (более 25 миллионов пикселей) слишком велики для обработки.
Тем не менее, даже если бы браузеры могли показывать ваше изображение, я бы настоятельно не советовал использовать изображение таких размеров. Один использует спрайты из соображений производительности, но изображение такого размера повлечет за собой огромное снижение производительности... вы будете стрелять себе в ногу.
Ответ 2 · рейтинг 1 · enhzflep
Не решение вашей проблемы, просто комментарий. Преимущества использования спрайт-листов могут быть потеряны или сильно уменьшены, если вы ориентируете их горизонтально. Это вызывает проблему с кэш-промахами.
Представьте, что у вас есть спрайт размером 10x10 пикселей. Чтобы загрузить часть вашего изображения, содержащую его, вам нужно загрузить (numPixels = sprite_height * src_width). В вашем случае это будет 10 x 105920 пикселей = 1 059 200 пикселей! - Только для кэширования изображения размером 100 пикселей.
Лучший способ ориентировать лист спрайтов - вертикально. Вы используете то же уравнение для определения количества пикселей, которые должны быть загружены, но получаете совсем другой результат. Результат, который теперь достаточно мал, чтобы поместиться в самый маленький (самый быстрый) кеш. В данном случае: 10 x 240 пикселей = 2400 пикселей. - Опять же, излишество всего для 100 пикселей, но решение лучше, чем дает предыдущий пример.
Изменение ориентации листа с горизонтальной на вертикальную приводит к уменьшению размера памяти, необходимой для кэширования этого спрайта, в 441 раз. Не совсем то, что я бы охарактеризовал как незначительное.
Эффект от внесения этого изменения будет наиболее заметен при многократном рисовании одного и того же спрайта или спрайтов, расположенных рядом друг с другом на листе спрайтов.
Учитывая, что браузер работает с полноцветными изображениями на экране, вполне разумно предположить, что из соображений производительности браузер преобразует ваше монохромное изображение в изображение, совместимое с остальной частью экрана, т. пиксель, хотя и с (относительно) небольшим изменением значения. Если бы изображение действительно было преобразовано в 24-битное, требования к памяти были бы огромными 105920 * 240 * 3 = 76262400 байт. Да!! Это 72,73 мегабайта!! Добавьте еще 1/3, если оно преобразовано в изображение rgba (32 бита).
Итак, у меня есть два предложения.
- Расположите ваши изображения вертикально
- Используйте несколько листов спрайтов.
