Что такое GIF? Доступно рассказываем о формате
Формат растровой графики GIF можно с полным основанием назвать технологическим реликтом, так как свое происхождение формат GIF ведет еще из стародавних восьмидесятый годов прошлого века. Этакий цифровой крокодил, ровесник динозавров, успешно побеждающий в борьбе за существование с более современными разработками.
Например – относительно новая технология программного видео Flash почти находится на грани вымирания и готовится стать очередной записью в Красной Книге, а GIF приобретает все большую популярность, в том числе и у обычных пользователей.
Graphics Interchange Format переводится как «графический формат для обменов». Нужда именно в таком типе упаковки изображений была обусловлена отсутствием стандартизации в компьютерной технике. А вот этот тип файлов рисунков без проблем читался машинами от любых производителей. Вычислительные машины были огромными, как динозавры и питались тоже растительной пищей – перфолентами и перфокартами.
Никто из сегодняшних пользователей уже и не знает, что такое перфокарты, зато GIF почти у каждого на рабочем столе компьютера в виде анимированной заставки.
Сфера применения GIF-анимации
В формате гифок очень удобно создавать самодвижущиеся картинки из категории тех, на которые можно смотреть бесконечно.
- Текущая вода.
- Горящий огонь.
- Работающие люди.
Технологически анимированные гифки представляют собой последовательность статических картинок – в точности как кадры в мультиках либо кинофильмах.
Лет десять назад были в тренде анимированные шапки для сайтов и блогов. Потом оказалось, что это непрерывное мелькание несколько раздражает целевую аудиторию. В крайнем случае, применяется нецикличная анимация со всего одним проигрыванием при загрузке веб-страницы, а потом картинка останавливается, чтобы не отвлекать визитера от комфортного потребления полезного контента.
Тем не менее, анимация все еще применяется в рекламных баннерах – чтобы привлекать внимание потребителей к коммерческим предложениям.
GIF в контент-маркетинге
В шапках сайтов и рекламе гиф стали меньше применять, зато оказалось, что анимированные изображения очень эффективны как элемент контента в качестве украшения и для усиления текстовой информации. Пользователи с большой охотой ставят лайки и делятся изображениями типа бегущего гепарда, двигателя внутреннего сгорания в рабочем цикле.
Довольно наглядно получается – людям нравится и легче понять смысл описываемых технологий, процессов, событий, явлений природы.
Такого рода гифки с большим успехом применяются в бизнес-презентациях и для оживления лекций в образовательном процессе. Впечатляюще выглядят движущиеся звездные карты, восходы и закаты на чужих планетах. Ну, или как роботы в безлюдных цехах зарабатывают дивиденды для инвесторов.
Преимущества и недостатки графического формата GIF
В арсенале гиф «всего» 256 цветов и в этом отношении JPEG имеет колоссальные преимущества – ведь цифровые фотографии могут иметь миллионы цветов и оттенков.
Зато в GIF применена оригинальная и очень эффективная система сжатия файлов, позволяющая восстанавливать изображения совершенно без потерь в достаточном качестве. Что для упомянутого JPEG является большой проблемой.
Алгоритм сжатия Лемпеля, Зива и Велча был придумал даже еще раньше – вообще в конце семидесятых годов, в самый разгар застойного периода.
GIF-арт и Синемаграфы
Креативные пользователи быстро поняли, что гифки можно успешно использовать в народном творчестве. Так возник Cinemagraph – видеоролики, преобразованные в формат GIF и представляющие собой некую эмоционально насыщенную движущуюся картинку.
- Горящие угли гриля, полыхающий огонь в камине.
- Бесконечно гоняющийся за своим хвостом котейка.
- Баскетболист, раз за разом, в красивом прыжке загоняющий мяч в корзину.
И на этом дело не остановилось. Постепенно на такую творческую форму обратили внимание профессиональные художники.
Так возникло новое направление современного искусства – GIF-ART. В славном городе New York на постоянной основе функционирует галерея Gif-арта, причем очень популярная у американцев и туристов.
Мобильная GIF-анимация для всех
Наверно, не все в курсе, но приобщиться к искусству джиф-арт и синемаграфии может любой пользователь.
Достаточно зайти в Google Play и скачать оттуда одно из мобильных приложений, которые автоматически преобразовывают видеоролики в гифки и можно мгновенно поделиться с друзьями в социальных сетях.
Например, ваш домашний питомец что-то такое прикольное вытворяет. Вот вы его снимаете на камеру своего смартфона и конвертируете в гифку. При удачном сюжете можно заполучить миллионы лайков и прославиться по всему миру.
Как вариант, можно взять любой видеоролик или даже кинофильм, сериал и преобразовать при помощи онлайн-конвертера в GIF. Вырезать самые эффектные куски, так что вам даже и видеокамера не нужна.
online-converting.ru
что за формат и для чего он нужен веб-мастерам
Здравствуйте, уважаемые читатели блога Start Luck! Наверняка каждый пользователь, регулярно или время от времени выходящий «посерфить» в интернете, сталкивался с так называемыми гифками. Чаще всего я встречался с ними в социальных сетях — Вконтакте, Одноклассниках и т.д.
Но, конечно, используются они повсеместно. Формат не для всех понятный — то ли это видео, то ли картинка. Предлагаю вам расставить все точки над i.
Итак, давайте поговорим о gif — что за формат и для чего он нужен. Вы также узнаете где взять анимированные картинки и как на умении создавать их можно заработать.
Что это?
Что такое gif? Что за формат? Создан он был для обмена растровыми (пиксельными) картинками. Удобен и популярен он стал из-за своей особенности сжимать графические файлы без особой потери их качества. Но у всего есть предел, а лимит gif – 256 цветов.
Этого может не хватить для того чтобы передать изображение с очень насыщенной цветовой палитрой. Через пару лет после разработки этот формат был усовершенствован — появилась поддержка прозрачности и анимации.
Что за прозрачность? Чтобы не давать какому-то участку цвет (ведь количество ограничено), его делают прозрачным, и он будет приобретать цвет фона. То есть, он может быть белым, черным или красным — все зависит от того, где вы откроете гифку.
Я вот, например, как-то раз сохранил картинку в этом формате. Скачивал я черную надпись на белом фоне и что, вы думаете, я увидел в галерее? Просто черный квадрат. Это уже промах создателя гифки, можно было бы и обойтись без прозрачности — тут всего два цвета!
Теперь об анимации. Именно из-за нее многие ошибочно полагают, что gif – это формат видео. На самом деле это последовательность из статичных изображений, каждое из которых будет находиться на экране указанное время и все они беззвучны.
Поэтому на гифки с фрагментами из каких-то фильмов или сериалов на моменты с диалогами накладывают текст. Могу предложить вам статью о том, как делать надписи в фотошопе.
Как правило, анимацию делают цикличной — после последнего кадра снова воспроизводится первый. Тут прозрачность имеет свое значение. Благодаря ей, не обязательно сохранять каждый кадр полностью, достаточно сохранить лишь изменения.
Где их взять?
Исходя из вышесказанного может показаться, что самому сделать гифку сложно. Но это не так. Есть множество простых для понимания онлайн-сервисов типа Gifs.com, где с помощью подробных инструкций вы быстро создадите gif-анимацию.
Вы можете попробовать свои силы в том же фотошопе. Например, вы хотите сделать гифку с какой-то шуткой из любимого сериала. Для этого нужно открыть видео в Photoshop и выбрать нужный участок. Программа сама разобьет этот фрагмент на множество кадров, а вам нужно будет указать для каждого время, спустя которое будет происходить смена. Останется лишь сохранить файл в формате gif.
Все! Теперь можете поделиться своим творением с друзьями или оставить в своем блоге, использовать в качестве рекламного баннера на каком-нибудь сайте и многое другое.
Если вам нужны какие-то гифки, но сами вы создавать их не хотите из-за отсутствия времени или интереса, воспользуйтесь сайтами-банками. Таковых на просторах интернета полным-полно, например Giphy.com или Gifs.net.
Заработок возможен?
К превеликому сожалению, заработать на создании gif-анимации напрямую нельзя. Предназначены они для личных, некоммерческих целей. Но выгоду, как известно, можно найти везде! Например, вы можете создать группу или паблик Вконтакте с той или иной тематикой, выкладывать туда соответствующие гифки, продвигать свое сообщество и заработать на этом.
Насколько мне известно, никто не занимается продажей и покупкой gif-анимации. Возможно, это просто непопулярная биржа и поэтому она находится в тени. Но кто сказал, что вы не можете попробовать создать такой сайт?
После прохождения курса «Интернет-магазин под ключ» вы сможете продавать гиф-анимацию на созданной платформе.
Или можете найти человека, который сделает вам сайт на Kwork.ru или других биржах фрилансеров, что будет дешевле.
Кстати, если вам очень понравится работа над созданием гифок, можете податься в анимационный дизайн. Будете работать над визуальным оформлением какой-нибудь рекламы, делать баннеры. Для начала могу посоветовать вам продавать работы на
В наши дни владелец компьютера может начать зарабатывать деньги почти из ничего — нужно лишь знать, что делать. Помните, что начать можно с обычного ноутбука и прийти к большому успеху — все в ваших руках. А как выжать из ПК максимум вы сможете узнать из курса «Секреты продуктивной работы за компьютером».
Ну и мой блог, я надеюсь, вам в этом помогает. Если эта статья была полезной, подписывайтесь на мой паблик Вконтакте и рассказывайте о блоге своим друзьям! Желаю вам удачи во всех начинаниях! Пока!
start-luck.ru
Информация о файлах GIF и их конвертировании.
Все конвертеры
Формат файлов GIF Raster image
GIF — самый популярный тип файлов в Интернете благодаря тому, что он позволяет создавать анимированные изображения. Файлы GIF используют растровые изображения до 8 бит/пиксель. Такое разрешение позволяет использовать 256 цветов палитры RGB. Следует отметить, что далеко не все изображения GIF являются анимированными. Большое количество логотипов и изображений с четкими, хорошо очерченными линиями, а также прозрачные фоны сохраняются именно в формате GIF. Сжатие файлов в формат GIF происходит без потерь, т.е. размер уменьшается без снижения качества изображения. Это позволяет конвертировать файлы в другие форматы без каких-либо существенных потерь качества.
Технические сведения о файлах GIF
Компания Compuserve создала формат GIF (Graphics Interchange Format — формат графического обмена) для использования в Интернете. Именно поэтому данные о нем были открыты широкой общественности. 256 цветов файла GIF способны использовать алгоритм Лемпеля — Зива — Велча, который позволяет сжимать файлы с одновременным удалением участков с недостаточным кол-вом данных с целью минимизации потерь качества изображения. Растровая информация сжимается до минимальных размеров. Кол-во цветов, необходимых для построения изображения, снижается путем удаления цветов, которые при формировании изображения на используются. Максимальное кол-во цветов — 256, однако на изображении их может быть даже 2 — белый и черны (минимальное требование к кол-ву цветов файла GIF). Снижение кол-ва цветов уменьшает общий размер файла.
Дополнительная информация о формате GIF
www.online-convert.com
GIF — Википедия. Что такое GIF
GIF (англ. Graphics Interchange Format — «формат для обмена изображениями») — популярный растровый формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов. Не зависящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации. GIF использует LZW-компрессию, что позволяет сжимать файлы, в которых много однородных заливок (логотипы, надписи, схемы). Долгое время GIF был одним из наиболее распространённых форматов в интернете.
Произношение названия
Создатели формата произносили его название как «джиф» /dʒɪf/[1]. Тем не менее, в англоязычном мире широко используется и произношение «гиф» /gɪf/, основанное на том, что GIF — сокращение от Graphics Interchange Format[1]. Оба варианта произношения указаны как правильные словарями Oxford English Dictionary[2] и American Heritage Dictionary[3].
В русском языке файлы в формате GIF обычно называют «ги́фками».
Область применения
Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Стандарт разрабатывался только для поддержки 256-цветовой палитры.
Один из цветов в палитре может быть объявлен «прозрачным». В этом случае в программах, которые поддерживают прозрачность GIF (например, большинство современных браузеров) сквозь пиксели, окрашенные «прозрачным» цветом, будет виден фон. «Полупрозрачность» пикселей (технология альфа-канала) не поддерживается.
Анимированные изображения
Формат GIF поддерживает анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Анимацию можно сделать цикличной (англ. loop), тогда вслед за последним кадром начнётся воспроизведение первого кадра и т. д.
GIF-анимация может использовать прозрачность для того, чтобы не сохранять очередной кадр целиком, а только изменения относительно предыдущего.
Недокументированной, но поддерживаемой возможностью является сохранение большего количества цветов с помощью анимированного GIF с нулевой задержкой между кадрами. При этом преодолевается ограничение в 256 цветов: каждый кадр содержит свою палитру[уточнить][4].
Сжатие
Алгоритм сжатия LZW относится к форматам сжатия без потерь. Это означает, что восстановленные из GIF данные будут в точности соответствовать упакованным. Следует отметить, что это верно только для 8-битных изображений с палитрой, для цветной фотографии потери будут обусловлены переводом её к 256 цветам.
Метод сжатия LZW разработан в 1978 году израильтянами Абрахамом Лемпелем и Якобом Зивом, а позднее доработан в США Терри Велчем. LZW сжимает данные путём поиска одинаковых последовательностей (они называются «фразы») во всем файле. Выявленные последовательности сохраняются в таблице, им присваиваются более короткие маркеры (ключи).
Метод LZW, так же, как и RLE, лучше действует на участках однородных, свободных от шума цветов, он действует гораздо лучше, чем RLE, при сжатии произвольных графических данных, но процесс кодирования и распаковки происходит медленнее.
Чересстрочный GIF
Формат GIF допускает чересстрочное хранение данных. При этом строки разбиваются на группы, и меняется порядок хранения строк в файле. При загрузке изображение проявляется постепенно, в несколько проходов. Благодаря этому, имея только часть файла, можно увидеть изображение целиком, но с меньшим разрешением.
В чересстрочном GIF’е сначала записываются строки 1, 9, 17 и т. д. Таким образом, загрузив 1/8 данных, пользователь будет иметь представление о целом изображении. Вторым проходом следуют строки 5, 13, 21, разрешение изображения в браузере ещё вдвое увеличивается. Наконец, третий и четвёртый проход передают (3, 7, 11, 15, 19…) и (2, 4, 6, 8, …). Таким образом, задолго до окончания загрузки файла пользователь может понять, что́ внутри, и решить, стоит ли ждать полной загрузки изображения. Чересстрочная запись незначительно увеличивает размер файла, но это, как правило, оправдывается приобретаемым свойством.
Маска, используемая в GIF:
История
Существует две спецификации формата GIF — GIF 87a и GIF 89a.
Первая спецификация была создана в 1987 году компанией CompuServe для замены устаревшего формата RLE. GIF стал популярен в ходе развития интернета, так как позволял использовать более компактные (по размеру файла) по сравнению с другими форматами картинки на веб-страницах. Хотя к настоящему времени формат во многом устарел и для его замены создан формат PNG, он по-прежнему широко используется. GIF-формат востребован при создании так называемых синемаграфов.
Патенты
GIF первоначально использовал проприетарные алгоритмы, однако срок действия патентов на них истёк. В США патент на алгоритм сжатия LZW, использующийся в GIF (патент № 4 558 302) истёк 20 июня 2003 года. Срок действия канадского патента завершился 7 июля 2004 года. Действие патента для Великобритании, Франции, Германии и Италии завершилось 18 июня 2004 года, а для Японии — 20 июня 2004 года.
Срок действия последнего патента на GIF истёк 11 августа 2006 года[6].
Альтернатива
Существует формат APNG, созданный в 2004 году, использующий 24-битные цвета и 8-битную полупрозрачность, работающий в браузере Mozilla Firefox начиная с 2007 года. Некоторые программы и расширения также поддерживают APNG.
См. также
Примечания
Ссылки
wiki.sc
GIF изнутри / Habr
Вам когда-нибудь было интересно, как устроены gif-ки? В данной статье попробуем разобраться с внутренним строением GIF-формата и методом сжатия LZW.
Файл в формате GIF состоит из фиксированной области в начале файла, за которой располагается переменное число блоков, и заканчивается файл завершителем изображения.
Основные характеристики формата GIF:
- Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов;
- Поддерживается 256-цветовая палитра;
- Этот формат позволяет хранить несколько изображений в одном файле;
- GIF поддерживает анимационные изображения;
Такие изображения представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Анимацию можно сделать цикличной, тогда вслед за последним кадром начнётся воспроизведение первого кадра и т. д.
- Поддерживает «прозрачность»;
Один из цветов в палитре может быть объявлен «прозрачным». В этом случае в программах, которые поддерживают прозрачность GIF (например, большинство современных браузеров) сквозь пиксели, окрашенные «прозрачным» цветом, будет виден фон. GIF анимация может использовать прозрачность для того чтобы не сохранять очередной кадр целиком, а только изменения относительно предыдущего.
- Используется универсальный алгоритм сжатия без потерь LZW.
Рассмотрим разбор дампа анимированного GIF-изображения размера 4х4 пикселя, состоящего из двух кадров. А вот и сами кадры, увеличенные в десятки раз.
Исходное изображение
Заголовок
В начале каждого файла GIF находится заголовок. Состоит он из текста «GIF87a» или «GIF89a», в зависимости от версии. В формате GIF87a переменная область содержит исключительно описания изображения, а в формате GIF89a она может включать еще и блоки расширений.
Логический дескриптор экрана
[04 00] [04 00] – ширина и высота виртуального экрана в пикселях
[А2] –
     (1) — флаг M использования глобальной таблицы цветов. Если 1, то в файле присутствует глобальная таблица цветов.
     (010) = 2 — флаг CR. Число бит разрешения цвета = CR + 1.
     (0) – флаг S (флаг сортировки). Если 1, то цвета в глобальной карте цветов отсортированы в порядке убывающей важности.
     (010) = 2 — флаг PIXEL. Размер общей таблицы цветов. Число записей в глобальной таблице цветов: 2^(N+1).
[00] – Индекс цвета фона.
[00] – Соотношение сторон. По умолчанию — 1:1.
Глобальная таблица цветов
[0A B2 5D] —
[C8 A6 2D] —
[F3 ED 63] —  
[BA 60 A5] —
[00 80 C8] —  
[F1 60 22] —  
[00 00 00] —  
[FF FF FF] —   
После глобальной таблицы цветов располагается переменная часть GIF. Файл содержит последовательность блоков, которые иденцифицируются 1-байтовым кодом в начале блока.
Коды блоков:
    0x21 – Расширение
    0x2С – Блок изображения
    0x3B – Завершение файла GIF
Блок расширения
Коды расширения:
    0x1 – расширение простого текста
    0xF9 – расширение управления графикой
    0xFE – расширение комментария
    0xFF – расширение программы
[FF] — код расширения. В нашем случае имеем расширение программы.
[0B] — размер последующего блока в байтах.
[4E 45 54 53 43 41 50 45] — (NETSCAPE) идентификатор приложения, которому принадлежит это расширение.
[32 2E 30] — (2.0) код приложения. С его помощью приложение проверяет, действительно ли это расширение принадлежит ему.
[03] — размер последующего блока в байтах.
[01] — фиксированное значение.
[00 00] — значение 0..65535. Беззнаковое целое в формате little-endian. Определяет, сколько раз должен повторяться цикл.
            Для 0 – бесконечно.
[00] — конец блока.
[F9] — код расширения (расширение управления графикой).
[04] — размер последующего блока в байтах.
[04] —
    (000) – зарезервировано. Рекомендуется заполнять нулями.
    (001) — метод обработки. Определяет, что делать после отображения.
                0 – к картинке не будет применяться никакой обработки
                1 – картинка останется без изменений
                2 – картинка затрется фоном
                3 – восстановится изображение под картинкой
                4-7 – не определены
    (0) – флаг ввода пользователя. Если 1, то для продолжения обработки изображения требуется реакция пользователя.
    (0) – флаг цвета прозрачности. Указывает, будет ли какой-нибудь цвет использоваться как прозрачный.
[32 00] – время задержки в анимации. = 50/100 секунды = 0,5 с
[00] – индекс цвета прозрачности.
[00] — конец блока.
Блок изображения
[00 00] [00 00] — номер строки и столбца. Определяет координаты верхнего левого угла логического экрана. (0, 0).
[04 00] [04 00] — ширина и высота изображения в пикселях.
[00] —
    (0) – флаг использования локальной таблицы цветов
    (0) – флаг чересстрочной развертки. Указывает, в каком порядке считываются пиксели изображения.
                0 – по строкам слева направо, сверху вниз
                1 – порядок:0-я. 8-я, 16-я…, 4-я, 12-я, 24-я…
    (0) – флаг сортировки локальной таблицы цветов. Если 1, то цвета в локальной карте цветов отсортированы в порядке убывающей важности.
    (00) – зарезервированы.
    (000) – флаг PIXEL. Размер локальной таблицы цветов, если есть.
[03] — минимальный размер кода в LZW.
[08] — размер последующего блока в байтах.
[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW. Представлены в виде последовательности кодов, имеющих длину [мин. размер кода] + 1
[00] — окончание потока данных.
Разбор алгоритма LZW
Кадр 1
Словарь/Code Table
Словарь инициализирован по количеству цветов и кодами {clear} и {end}. Берем код с длиной текущего размера, получаем его значение из словаря. Если значение есть в словаре, то получаем готовый индекс цвета для текущего пикселя и добавляем в словарь следующее значение: полученное предыдущее + первое из текущего. Если в словаре еще нет такого значения, то добавляем по этому индексу полученное предыдущее + первое из предыдущего. Первый код должен соответствовать значению {clear}, последний — {end}.
Решим обратную задачу. Возьмем исходные данные изображения и закодируем их с использованием алгоритма LZW. Под исходными данными понимаем последовательность индексов цветов из словаря, соответствующих каждому из пикселей. Пискели рассматриваем сверху вниз, слева направо.
| Step | Action | Index Stream | New Code Table Row | Code Stream |
|---|---|---|---|---|
| 1 | Init | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 | |
| 2 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 | |
| 3 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #10 – 0 0 | #8 #0 |
| 4 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 | |
| 5 | Found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 | |
| 6 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 | |
| 7 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #11 – 0 0 0 | #8 #0 #10 |
| 8 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 | |
| 9 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #12 – 0 2 | #8 #0 #10 #0 |
| 10 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 | |
| 11 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #13 – 2 2 | #8 #0 #10 #0 #2 |
| 12 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 | |
| 13 | Found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 | |
| 14 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 | |
| 15 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #14 – 2 2 2 | #8 #0 #10 #0 #2 #13 |
| 16 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 | |
| 17 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #15 – 2 4 | #8 #0 #10 #0 #2 #13 #2 |
| 18 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 | |
| 19 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #16 – 4 4 | #8 #0 #10 #0 #2 #13 #2 #4 |
| 20 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 | |
| 21 | Found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 | |
| 22 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 | |
| 23 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #17 – 4 4 4 | #8 #0 #10 #0 #2 #13 #2 #4 #16 |
| 24 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 | |
| 25 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #18 – 4 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 |
| 26 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 | |
| 27 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 |
#19 – 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 |
| 28 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 | |
| 29 | Found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 | |
| 30 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 | |
| 31 | Not found | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #20 –5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 #19 |
| 32 | Read | 0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5 | #8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 #19 #5 #9 |
Теперь сравним результат кодирования со сжатыми данными, хранящимися в дампе. Формат GIF в данном блоке хранит многобайтовые целые числа с младшим байтом на первом месте (прямой порядок байтов).
[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW.
Аналогично поступаем со вторым кадром.
Кадр 2
Словарь/Code Table
| Step | Action | Index Stream | New Code Table Row | Code Stream |
|---|---|---|---|---|
| 1 | Init | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 | |
| 2 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 | |
| 3 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #10 – 3 6 | #8 #3 |
| 4 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 | |
| 5 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #11 – 6 1 | #8 #3 #6 |
| 6 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 | |
| 7 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #12 – 1 7 | #8 #3 #6 #1 |
| 8 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 | |
| 9 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #13 – 7 3 | #8 #3 #6 #1 #7 |
| 10 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 | |
| 11 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1#7 | |
| 12 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1#7 | |
| 13 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #14 – 3 6 1 | #8 #3 #6 #1 #7 #10 |
| 14 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 | |
| 15 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 | |
| 16 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 | |
| 17 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #15 – 1 7 3 | #8 #3 #6 #1 #7 #10 #12 |
| 18 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 | |
| 19 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 | |
| 20 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 | |
| 21 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 | |
| 22 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 | |
| 23 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #16 – 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 |
| 24 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 | |
| 25 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 | |
| 26 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 | |
| 27 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #17 – 7 3 6 | #8 #3 #6 #1 #7 #10 #12 #14 #13 |
| 28 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 #13 | |
| 29 | Found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 #13 | |
| 30 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 #13 | |
| 31 | Not found | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #18 – 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 #13 #11 |
| 32 | Read | 3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7 | #8 #3 #6 #1 #7 #10 #12 #14 #13 #11 #7 #9 |
[38 16 A7 EC 6D 9D 04] — блок данных, сжатых алгоритмом LZW.
Блок завершения файла GIF
Заключение
На этом всё. Надеемся, эта статья была полезна для вас (ну или хотя бы интересна).
Полезные ссылки:
www.w3.org/Graphics/GIF/spec-gif89a.txt
home.onego.ru/~chiezo/gif.htm
Авторы: kolyadkodarya blueberry24 anna_shunko
habr.com
GIF — формат файла. Чем открыть GIF?
Файл формата GIF открывается специальными программами. Чтобы открыть данный формат, скачайте одну из предложенных программ.
Расширение GIF является форматом для графических файлов. Хоть они и не содержат аудиоданных, такие файлы часто можно увидеть в Интернете в качестве фрагментов из видеоклипов.
Как открыть файлы .GIF
На сайтах часто используется расширение GIF для того, чтобы отображать анимированные объекты – такие, как кнопки или изображения логотипов. Поскольку файлы GIF сохраняются без потерь, качество изображения не ухудшается при конвертации в этот формат.
Почти во всех операционных системах большинство браузеров (Chrome, Firefox, Internet Explorer и т. д.) может без проблем открывать GIF — для этого не нужна никакая другая программа на вашем компьютере. Локальные GIF-файлы можно просмотреть посредством кнопки «Открыть с помощью…» или перетаскивания в окно браузера.
Другие способы открытия файлов .GIF
Другие приложения – такие, как Adobe Photoshop — технически могут открывать файлы GIF, но не отображают их в привычном виде. Вместо этого в Photoshop каждый кадр GIF открывается как отдельный слой. Растровый графический редактор отлично подходит для правки GIF, однако возможность воспроизводить файл сразу после этого есть только в специальном приложении GIF Animator.
По сравнению с браузерами установленное по умолчанию Средство просмотра фотографий в Windows — вероятно, самый простой способ открыть их в этой ОС.
Некоторые другие программы для Windows, в которых можно открывать файлы GIF — Adobe Elements и Illustrator, CorelDRAW, Corel PaintShop Pro и ACDSee, PaperPort и OmniPage Ultimate, а также Roxio Creator NXT Pro.
В Mac OS с файлами GIF можно работать в Apple Preview, Safari и упомянутых выше программах от Adobe Systems. Пользователи Linux предпочитают использовать GIMP, тогда как на устройствах с iOS и Android можно просматривать GIF-файлы на Google Диске или прямо в Галерее изображений (актуально для современных версий ОС).
www.azfiles.ru
Сравнение анимации GIF, WebP, APNG, BPG / .io corporate blog / Habr
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.Как создается анимация
Соседние кадры не должны сильно отличаться. Когда мы снимаем на видеокамеру, то это получается само собой, а вот если рисовать в редакторе, то можно об этом забыть, и Мальвина будет ходить, как Буратино.
Этот принцип используется в анимированных графических файлах. Они содержат не одно изображение, а серию картинок-кадров. Каждый кадр знает, сколько миллисекунд он должен отображаться.
И тут есть одна проблема. Размер одной секунды анимации с 24 кадрами будет весить в 24 раза больше статической картинки. Чтобы исправить ситуацию, применяют сжатие изображения.
Пример абстрактного алгоритма сжатия
Итак, есть файл. В нем только два цвета – черный и синий. Тогда цвет можно закодировать одним битом. Размер по горизонтали — 20, по вертикали — 1. Всего он занимает 20х1х1 = 20 бит.
В строке первые семь точек имеют первый цвет, затем шесть точек — второй, и оставшиеся в строке точки опять окрашены в первый цвет. Записать можно так: повторить цвет 1 — 7 раз, цвет 2 – 6 раз, цвет 1 – 7 раз (1х7 2х6 1х7).
Выгода кажется не очевидной, но если растянуть файл-строку в 1000 раз до 20 килобит, то запись увеличится совсем незначительно: 1х7000 2х6000 1х7000. С увеличением размера исходного файла выгода от сжатия будет только расти.
Сжатие применяется для каждого кадра анимации. Если в секунде 24 кадра, то оно сработает 24 раза. Без этого файлы анимации были бы очень большими.
Форматы с возможностью анимации
GIF формат
Это очень старый формат. Его показывают все браузеры. У него есть прозрачный слой, т.е. под картинкой будет виден фон, на котором она лежит. Для анимации сохраняет серию полноценных картинок. Это минус. Файл с 24 кадрами будет в 24 раза больше исходного статичного. Частично можно исправить тем, что некоторые кадры могут содержать прозрачный слой плюс изменения предыдущего кадра.
GIF показывает только 256 цветов. Это можно исправить при помощи анимации. Мы создаем две картинки с разным набором цветов. Демонстрируем их с задержкой 0. В итоге получаем 256 + 256 = 512 цветов.
Формат хорошо сжимает изображение без потерь. Для маленьких картинок это важно.
APNG формат
Этот формат (Animated PNG) является расширением распространенного формата PNG. Однако разработчики последнего не включили это расширение в спецификацию. Получилось, что немногие программы могут его правильно отображать. Большинство браузеров покажет первый кадр статичной картинкой, а про анимацию забудет.
Маловероятно, что формат будет широко использоваться. Тем более, что появились новые мощные конкуренты.
WEBP формат
Этот формат появился в 2010 году. Разработчик, компания Google, позиционирует его как замену GIF и других форматов. WEBP имеет все возможности GIF, но только в улучшенном варианте:
- Эффективней с прозрачными слоями.
- При анимации последующий кадр хранит только изменения предыдущего. А раз так, то размер анимированного файла уменьшается.
- Изображение сжимается эффективнее.
Формат поддерживается еще не везде. Например, Android умеет работать с ним, начиная с версии 4.0. браузеры Chrome – с версии 9, Opera – с версии 11.10. Другие браузеры пока формат не поддерживают (июнь 2015). Следить за его развитием можно здесь (список браузеров с поддержкой WEBP) и здесь (домашняя страница проекта).
BPG формат
BPG — самый новый. Он был предложен в конце 2014 года. Формат позиционируется как замена JPEG со значительными улучшениями. Сжатие изображения будет эффективнее, чем у предка. Появится поддержка анимации (JPEG не умеет этого делать). Но формат только начинает свое развитие, рекомендовать его для использования еще нельзя, а вот следить за ним можно.
Работа с GIF, APNG и WEBP в CLI
Есть два замечательных пакета ImageMagick и GraphicsMagic. С помощью ImageМagic создается анимация из *.gif картинок:
сonvert -delay 150 -loop 10 *.gif animated.gif
Команда convert подхватывает все файлы *.gif в директории, сортирует их по алфавиту и последовательно вставляет в новый файл animated.gif.
Проверка (запустится маленький графический контейнер с мультиком):
animate animated.gif
Конвертация мультика в APNG формат:
convert animated.gif animated.apng
Если использовать GraphicsMagic, то команды такие:
gm convert -delay 150 -loop 100 *.gif animated.webp
gm animate animated.webp
На этот раз выходной формат WEBP. Аналогично обрабатывается и BPG.
Также возможно вытащить анимацию в GIF из видеофайлов. Например, с использованием пакета libav-tools импортируется видео из MP4:
avconv -i inputfile.mp4 -pix_fmt rgb24 output.gifПосмотреть разницу между анимацией GIF, WebP и APNG в разных форматах можно тут. А вот пример.
Конспект
- Четыре формата поддерживают анимацию: GIF, APNG, WEBP и BPG.
- Генерировать гифки можно с помощью ImageMagick и GraphicsMagick.
- Пока лучше хранить анимацию в GIF и следить за развитием остальных форматов.
habr.com