Насколько размер изображения влияет на производительность рендеринга / рисования CSS?

1

Я работаю над JS/HTML-игрой, где все объекты являются элементами HTML (в основном <img>). Их top и left CSS-атрибуты (иногда вместе с другими, такие как поля, преобразования и т.д.) Динамически изменяются кодом JS (30-80 раз в секунду). Я заметил огромное улучшение производительности, когда я переключился с использования.png файлов на.gif(22 кадра в секунду → 35 кадров в секунду), но все же:

Может ли дальнейшее уменьшение размера файлов (на 10-30%) реально заметно улучшить производительность преобразования CSS? Я бы просто протестировал его, но я говорю о ~ файлах размером ~ 250 gif; и я тоже не хочу потерять слишком много качества.

  • 0
    Любое уменьшение размера файлов улучшит производительность. Некоторые другие вещи, которые вы можете сделать, это, возможно, заменить некоторые изображения стилем CSS, если это возможно, конечно. Вы также можете протестировать с .jpeg вместо .gif, если вам не нужно максимально возможное разрешение
Теги:
performance
rendering
cross-browser

2 ответа

0

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

Об уменьшении размера файла GIF:

  • Положительным фактором здесь является то, что вы уменьшаете ширину и высоту изображения наполовину, фактический размер файла может быть уменьшен примерно на 75%.
  • При использовании изображений GIF уменьшение количества различных цветов, используемых в изображении GIF, также уменьшит размер. Часто вы можете выбрать количество цветов при экспорте gif из инструментов редактора изображений. В Photoshop у вас есть опция "Экспорт для Интернета", которая будет пытаться установить оптимальные параметры для использования на веб-страницах.

Что касается производительности игры и изображений:

  • Если вы уже знаете, как вы измените размеры изображений (фиксированные размеры, такие как +50% и +100%), использование CSS Image Sprites с предварительно измененными изображениями может создать хорошее улучшение, так как вам не придется изменять размер изображения, но просто используйте существующую часть листа спрайтов. Это уменьшит объем обработки изображений и, следовательно, повысит производительность.
  • Если вы хотите все сразу, производительность, качество и небольшой размер файла, лучший способ - заменить как можно больше растровой графики векторной графикой. Большинство современных 2D-игр используют много векторной графики.
  • Векторная графика проще изменить, поскольку только сплайны должны быть пересчитаны и заполнены, изменение размера растровой графики приводит к вычислению для каждого нового пикселя.
  • Все распространенные современные браузеры поддерживают формат svg и могут быть рассчитаны с помощью css. Если вы хотите попробовать, бесплатный инструмент с открытым исходным кодом для создания векторной графики - InkScape.

Надеюсь это поможет.

  • 0
    Что ж, это было действительно полезно, особенно идея использования спрайтов изображений - моя самая тяжелая анимация была со взрывами, так как они использовали статические файлы .png с манипуляциями над их размером и непрозрачностью. Я не знаю, как мне не пришло в голову использовать спрайты, поэтому я могу сделать так, чтобы он выглядел намного лучше И все еще повышать производительность. Спасибо!
  • 0
    круто, очень рад, что смог помочь! :)
0

Почему вы не используете JPEG? Он компактный. Да, размеры изображений влияют на производительность.

Кроме того, проверьте " CSS-спрайты ", вы можете иметь одно изображение со всеми вашими иконами/изображениями и обрабатывать представление с помощью CSS. Вы получите лучшую производительность, так как вы загружаете одно изображение.

Изображение 174551

  • 0
    Поскольку мне нужна прозрачность, мне нужно остаться в формате GIF. Я обнаружил еще один вопрос о прозрачности JPEG, но он не похож на кросс-браузерное решение. Также обратите внимание, что я говорю не о времени загрузки (времени, которое требуется браузеру для получения этих файлов с сервера), а о производительности рисования / рендеринга браузера (когда изображение уже загружено, но его необходимо переместить, преобразовать и т. Д.)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню