управления
Вы не имеете никакого контроля над анимированными GIF-файлов. Вы не можете их запускать, вы не можете остановить их. Они просто оживают, как только они загружаются.
С помощью спрайтов вы можете управлять анимацией. Вы можете запускать, останавливаться и реагировать на события браузера, панорамировать анимацию. Например, Google Doodles обычно активируются, когда вы нажимаете на них.
Элегантная система управления GIF может быть найдена в 9gag. Вы можете запустить их, добавив их в DOM и остановить их, удалив их и заменив их предварительно созданным «представлением первого кадра». Но это касается GIF.
Независимые Инстансы
При загрузке нескольких экземпляров одного и того же GIF, все эти экземпляры используют один и тот же образ всей страницы и двигаться одновременно. Если у вас есть ряд танцующих единорогов GIF, они будут танцевать одновременно. Синхронные танцы!
Но с спрайтами, даже если вы используете одни и те же изображения, анимация основывается на базовом скрипте. Поэтому, если один спрайт анимируется одним сценарием, а другой - другим, обе анимации могут выполняться независимо друг от друга и иначе друг от друга.
Это избавляет вас от создания другого GIF и его легко изменить, так как вы только меняете сценарий.
Обеспечение гладкой анимация
анимированные GIF анимация только во время загрузки, и когда Интернет медленный, анимация замерзнуть, пока больше изображений не загружается.
Напротив, преимущество спрайтов заключается в том, что вы можете предварительно загрузить их, чтобы все изображения загружались заранее. Это гарантирует, что ресурсы, используемые для этой анимации, уже загружены до анимации, чтобы убедиться, что она анимируется как можно более гладко.
Однако GIF - это неподвижные изображения. Вы можете динамически загружать их из DOM и прослушивать событие загрузки, прежде чем добавлять их в DOM.
Частичное оказание
С PNG спрайтов, вы можете сделать «парциальных» в анимации, разбивая анимационную сцену на части. Например, когда персонаж стоит на месте, но руки размахивают. Вам не нужно анимировать весь персонаж или всю сцену. Вы можете поместить элемент, изображающий спрайт тела персонажа в состоянии «замораживания», в то время как руки - это другой элемент, который оживляет. Это сохраняет пространство и размер листа спрайтов. Хорошим примером для этого был Doodle Day of the Mother 2012 от Google.
В отличие от этого, большую часть времени, каждый кадр в анимации GIF является целым изображением и оживляет, движется ли что-либо в нем. Чем больше кадров, тем больше размер GIF.
GIFs просто не масштабируются
GIFs предназначались для значков. Отношение размера файла к размеру изображения не масштабируется в GIF по сравнению с PNG и JPG.
Вот хороший пробой, как Apple, сделал это на странице iPhone 5 - https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI –