Анимированные .GIF против Spritesheet + JS / CSS

Question

Что будет лучше всего масштабироваться для производительности, размера файла (и моего здравого смысла): анимированные .gif s или таблица спрайтов с анимацией с использованием CSS (и JS, когда это необходимо)?

Размер файла

Итак, я честно не уверен, что здесь будет лучше, так как я не понимаю сжатие кадров в .gif. Я предполагаю, что они в конечном итоге будут примерно равными, если я смогу сделать это правильно, но если это не так, или если это фактор по другой причине, дайте мне знать.

Основное преимущество здесь, на мой взгляд, заключается в том, что я могу добавить несколько анимаций на одном листе (и мы говорим здесь о сотнях анимированных спрайтов). И основываясь на одном из моих предыдущих вопросов , я знаю, что могу легко вытащить один кадр в CSS, используя image-rect(). Где, как и в случае файла .gif, я действительно могу включить только одну анимацию, поскольку каждая из них, вероятно, будет иметь различную продолжительность.

Добавление: Кроме того, некоторые анимации повторяются для данного спрайта, поэтому таблица спрайтов должна иметь только одну копию фреймов, тогда как .gif должна иметь все фреймы (по крайней мере, насколько мне известно).

Производительность

Снова догадываясь, моя интуиция говорит мне, что анимированные .gif будут значительно быстрее, так как мне не придется управлять всеми анимациями одновременно, я делаю много кода JS для других вещей. , Но, я не знаю наверняка, возможно, браузеры получат значительный успех с 30+ анимационными .gif с.

Мое здравомыслие

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

С другой стороны, анимированные .gif файлы - это не торт в Photoshop (если у вас есть лучшая программа, , пожалуйста, , дайте мне знать). И каждый из них должен быть сделан вручную, и это долгий процесс. Но как только они сделаны, мне не нужно их менять. Мои спрайт-листы вряд ли изменятся очень быстро, так что, скорее всего, это будет один и готово.

Мой вопрос (тел. Др)

Что будет лучше масштабироваться до сотен анимаций с точки зрения размера файла (включая передачу заголовка HTTP, когда он будет передаваться через Интернет), производительности в современных браузерах и простоте создания (самый низкий приоритет, но если вы можете сделать моя работа легче, или поспорите с этим, я был бы признателен), анимированные .gif файлы, созданные из таблиц спрайтов, или просто с использованием CSS и таблиц спрайтов, которые у меня уже есть?

Примеры

VS

Answer 1

Как мне было любопытно, я реализовал это в javascript.

JsFiddle demo (отредактированный хост изображений согласно комментариям).

ЧтоЯ узнал:

• Работает!И лучше, чем ожидалось.
• Использование ЦП на самом деле низкое (не проверял его в IE6 динозавре, и я уверен, что это потребует «исправлений»).
• Размер можно обрезатьи / или качество может быть значительно увеличено (зависит от источника).
• В отличие от концепции Майки Г. , это работает, даже если вы увеличиваете / уменьшаете масштаб (попробуйте оба варианта).
• Он допускает переменную длительность кадра точно так же, как gif.
• С большей работой он может даже иметь подобный игроку API (пауза / возобновление, перемотка вперед, пропуск и т. Д ...).
• Использует другие форматы: 8-битный альфа-PNG, прогрессивный JPEG, <canvas>, SVG, WebP ...

Подробнее вДемонстрационная страница JsFiddle.

Answer 2

Просто хотел взвесить это. Есть много сценариев, в которых у вас есть несколько анимаций на одной странице. В сценарии есть несколько анимаций на одной странице, которые являются интерактивными. Лучше использовать спрайт-лист с CSS-анимацией, чем с GIF-файлами. Вот мои демки:

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

как вы можете видеть, спрайт-версия с легкостью обрабатывает опрокидывания, в то время как версия на основе GIF останавливается.

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

Спасибо.

Answer 3

Обновление:

Со времени, когда я впервые опубликовал это, мне повезло, что анимация спрайт-листов работала в браузерах.Улучшены ли браузеры / компьютеры или я просто ошибаюсь?Я понятия не имею.В любом случае, этот ответ немного устарел, но я оставлю его здесь для исторических целей.Есть лучшие, более новые ответы, которые более актуальны сегодня.

---

GIF-файлы довольно хорошо работают с ускорением графического процессора, поскольку частичное обновление кадра означает, что необходимо перерисовать только часть пикселей.В отличие от рисования без GPU, браузеру не нужно перерисовывать все пиксели каждого кадра.Со спрайтовым листом вы все равно заставляете последний, так как не перекрываете в основном прозрачные слои.Таким образом, GIF-файлы определенно дадут вам лучшую производительность, особенно в современных браузерах.

GIF-файлы, очевидно, имеют недостатки, заключающиеся в ограничении 256 цветами, но, исходя из вашего образца, это не должно вызывать проблем.Однако, если вы используете спрайт-листы, это, безусловно, станет проблемой, и вы не сможете использовать GIF.Скорее всего, это означает худшее сжатие.Поскольку у вас есть большие области сплошного цвета, много повторений по горизонтали и мало цветов в любой заданной области, вы получите большую выгоду от реализации в GIF Lempel-Ziv (-Welch) сжатия.

Answer 4

Я бы посмотрел на это:

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

Лично я думаю, что вы с ума сошли бы, если бы использовали спрайт-лист, но, полагаю, это зависит от того, сколько анимированных картинок вы бы принесли, иначе 1006 *

Я не знаю, каковы ваши ограничения, но вот скрипка, использующая CSS3 step() для анимации таблицы спрайтов:

http://jsfiddle.net/simurai/CGmCe/

Answer 5

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

Если вы хотите иметь качество прозрачности PNG-24, вы должны использовать анимированные спрайты.

Кроме того, анимированные спрайты работают очень хорошо, если вы рисуете их на холсте. Посмотри это: http://seb.ly/demos/bunnybench/bunnies_canvas.html

Answer 6

Еще одна проблема, связанная со спрайтами CSS, по крайней мере в современных браузерах, - это масштабирование «джиттера». Вы можете масштабировать GIF-файл до любого необходимого размера (предположительно, меньшего размера), но если вы попытаетесь масштабировать спрайт CSS, вы сталкиваетесь с дрожанием из-за ошибок округления (background-position основывается на масштабированных координатах, а не на оригинале). Если кто-то знает другой способ обработки масштабированных анимированных спрайтов, это было бы здорово узнать.

ImageMagick отлично работает над созданием анимированных GIF-файлов или спрайтов.

Answer 7

Gif-анимации могут повторять спрайты, они также могут использовать частичные обновления кадров и размещать один и тот же спрайт в разных позициях. Если вы просто хотите отобразить неинтерактивную анимацию, я бы сказал, что анимированные GIF-файлы имеют все преимущества, кроме цвета, вы вынуждены использовать палитру 256 цветов.

Я помню, как использовал Microsoft GIF Animator , который, безусловно, прост в использовании. Я ничего не знаю о Photoscape , но в сети говорят, что это хорошая, более тяжелая альтернатива.

Answer 8

Если вы говорите с сотнями спрайтов, тогда используйте .gif. Чем сложнее анимация, тем больше анимаций, тем выше нагрузка на браузер, поскольку для воспроизведения анимации «слайд за слайдом» будет использоваться больше ресурсов, а не просто воспроизводиться анимированный файл .gif.

Ситуация ухудшается, если принять во внимание совместимость между браузерами, когда, как всегда, IE часто терпит неудачу. Я никогда не видел, чтобы сайт давился множеством маленьких GIF-файлов, но я вижу, что сайты все время душат простой javascript. Я могу только вообразить, как плохо было бы с сотнями анимированных изображений css / js, постоянно переворачивающих.

Если вы не возражаете, я спрашиваю, для какого сайта предназначены эти анимации? Это какой-то портфель анимаций или ...?