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

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

Размер файла

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

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

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

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

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

Мое благосостояние

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

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

Мой вопрос (tl; dr)

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

Примеры

Ответ 1

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

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

Что я узнал:

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

Дополнительная информация на демо-странице JsFiddle.

Ответ 2

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

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

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

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

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

Спасибо.

Ответ 3

Update:

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

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

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Это становится все хуже, если вы учитываете совместимость между браузерами, где, как всегда, IE терпит неудачу. Я никогда не видел, чтобы сайт задыхался от множества маленьких .gifs, но я вижу, что сайты все время задыхаются от простого javascript. Я могу только представить себе, как плохо это получилось бы, когда сотни анимированных изображений css/js все время переворачивались.

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