Какие альтернативы для анимированных GIF файлов существуют?

Почему эти надоедливые GIF файлы все еще доминируют, когда дело касается анимационных фотографий? Я уверен, что в наши дни есть лучшие альтернативы, но почему они не набирают тягу?

Ответ 1

Анимированный png или APNG (http://en.wikipedia.org/wiki/APNG). Они могут быть сделаны в GIMP с APNG Plug-in Но анимированный Gif на самом деле является основным из них - вспышка рода взяла на себя, хотя, но это не действительно образ как таковой.

Кроме того, другие альтернативы с той же страницы wikipedia: формат файла MNG является более мощной альтернативой APNG, хотя он более сложный и имеет меньшую поддержку веб-браузера.

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

SVG в сочетании со сценарием или SMIL может анимировать векторную графику и может включать растровую графику. (См. Анимацию SVG.)

Динамическая графика, созданная с помощью холста HTML 5, также может быть анимирована.

Альтернативным методом анимации на веб-страницах является использование обычных статических изображений и их анимация с использованием JavaScript, [22] Adobe Flash, Microsoft Silverlight, Java или других технологий с плагинами.

Ответ 2

WebP - это формат изображения, использующий сжатие с потерями и без потерь. В настоящее время он разработан Google.

Преимущества анимированного WebP по сравнению с анимированным GIF

WebP поддерживает 24-битный цвет RGB с 8-битным альфа-каналом, по сравнению с 8-битным цветом GIF и 1-битной альфа.
WebP поддерживает сжатие с потерями и без потерь; на самом деле, одна анимация может сочетать потери и потери кадров. GIF поддерживает только сжатие без потерь. Методы сжатия с потерей WebP хорошо подходят для анимированных изображений, созданных из реальных видеороликов, все более популярного источника анимированных изображений.
WebP требует меньше байтов, чем GIF1. Анимированные GIF файлы, конвертированные в потерянные WebP, на 64% меньше, в то время как без потерь WebPs на 19% меньше. Это особенно важно для мобильных сетей.
WebP требует меньше времени для декодирования при поиске. В Blink прокрутка или изменение вкладок могут скрывать и показывать изображения, в результате чего анимация приостанавливается, а затем пропускается в другую точку. Чрезмерное использование ЦП, которое приводит к отбрасыванию кадров анимации, также может потребовать от декодера поиска вперед в анимации. В этих сценариях анимированный WebP занимает 0,57x столько же времени декодирования, сколько GIF, что приводит к уменьшению вогнутости во время прокрутки и более быстрого восстановления от всплесков использования процессора.

Недостатки анимированного WebP по сравнению с анимированным GIF

При отсутствии поиска прямолинейное декодирование WebP более интенсивно требует процессора, чем GIF. Lossy WebP занимает в 2,2 раза больше времени декодирования, чем GIF, в то время как без потерь WebP занимает в 1,5 раза больше.
Поддержка WebP не так широко распространена, как поддержка GIF, которая является практически универсальной.
Добавление поддержки WebP для браузеров увеличивает площадь экрана и поверхность атаки. В Blink это примерно 1500 дополнительных строк кода (включая библиотеку demux WebP и декодер изображений Web-формата Blink). Обратите внимание, что эта проблема может быть уменьшена в будущем, если WebP и WebM будут использовать более общий код декодирования или если возможности WebP включены в WebM.

https://developers.google.com/speed/webp

Ответ 3

Я хотел бы предложить использовать видео для анимированных изображений. В настоящее время существует широкая поддержка тега video в HTML5 и почти равная поддержка MPEG4.

<video autoplay loop src="sample.mp4">

С атрибутами autoplay и loop легко реплицировать поведение анимированного GIF.

Я соглашусь, что прозрачность в видео все еще проблема.

Ответ 4

Я использовал плагин jquery для анимации серии PNG. См. http://blog.shynet.nl/post/2010/08/28/Alternative-to-animated-GIFs-AnimateImages-jQuery-Plugin.aspx

Я не уверен в производительности плагина с большим набором изображений. Я использовал его только для значков мерцания

Ответ 5

Как уже напомнил Натан и другие, существует много способов анимации графики.

Лично я предпочитаю

(1) создание графического объекта в Illustrator или Inkscape и т.д.

(2) сохранить графику в формате .SVG

(3) встроенный SVG-код (т.е. все между и) на вашей веб-странице и

(4) используйте snap.svg(javascript libary), чтобы анимировать встроенный графический файл svg. Самый современный браузер поддерживает SVG

Ответ 6

С jquery я могу повернуть 6 jpgs линзообразной последовательности вперед и назад, чтобы достичь того же результата анимированного gif; например, http://www.vicgi.com. Общий размер файла для 6 изображений составляет всего 233 КБ. Если бы это был анимированный gif, будет 11 кадров, и файл мог бы быть более 1 МБ. Не говоря уже о том, что количество цветов ограничено 256 для GIF.

HTML

<!-- Reserve a div for showing the images with id=banner -->
<div class="row">
    <img id="banner" src="images/first_image.jpg" class="img-responsive">
</div>

Javascript: Добавьте этот код до конца тега body, предположите, что вы связались с jquery cdn или загружаете.

var images = [
"first_image.jpg",
"second_image.jpg",
"third_image.jpg",
"forth_image.jpg",
"fifth_image.jpg",
"sixth_image.jpg",
"fifth_image.jpg",
"forth_image.jpg",
"third_image.jpg",
"second_image.jpg",
];   // add the images if necessary

numImages = images.length,
index = 1;  // start from the second image because first image is already in the HTML

function cycleImages() {
    image = "images/" + images[index];   // assume all the images are store in the images sub-directory
    $("#banner").attr("src", image);     // set the src attribute of the <img tag to the image to be shown
    index++;                             // advanced to the next image
    if (index == numImages) index = 0;   // recycle to the first image
}

$(function() {                          // start the rotation when document is ready
    setInterval("cycleImages()", 800)
});

Ответ 7

Формат MNG является PNG-подобным форматом для анимаций, но, похоже, он не получил большой популярности. Так что это просто вопрос усыновления - поскольку анимированные GIF файлы работают нормально (и не имеют прежних патентных ограничений), почему бы им не использовать их? Зачем исправлять то, что не сломалось?

Ответ 8

Это было, очевидно, довольно давно, но времена меняются и . webm кажется хорошим соперником.

Короче говоря, это формат СМИ, который должен быть бесплатным. Он будет использоваться с тегом видео HTML5 (см. Ответ от @KeithShaw), и для этого потребуется браузер, поддерживающий соответствующий кодек. Тем не менее, YouTube является одним из усыновителей, а также ряда других отраслей, о которых я не буду упоминать здесь.

Это сайт проекта: WebM Project

Ответ 9

Мое предложение: посмотрите, что комитет HTML принимает по этому вопросу. До тех пор, GIF работает для низкокачественного изображения pic и HTML5, так или иначе, будет отображаться на веб-страницах. В любом случае, родной материал (не веб-сайт) всегда следил за сайтом в форматах мультимедиа.