какой особенностью обладают файлы с расширением gif

Что такое GIF

Сфера применения GIF-анимации

В формате гифок очень удобно создавать самодвижущиеся картинки из категории тех, на которые можно смотреть бесконечно.

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

GIF в контент-маркетинге

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

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

Преимущества и недостатки графического формата GIF

В арсенале гиф «всего» 256 цветов и в этом отношении JPEG имеет колоссальные преимущества – ведь цифровые фотографии могут иметь миллионы цветов и оттенков.
Зато в GIF применена оригинальная и очень эффективная система сжатия файлов, позволяющая восстанавливать изображения совершенно без потерь в достаточном качестве. Что для упомянутого JPEG является большой проблемой.

Алгоритм сжатия Лемпеля, Зива и Велча был придумал даже еще раньше – вообще в конце семидесятых годов, в самый разгар застойного периода.

GIF-арт и Синемаграфы

Креативные пользователи быстро поняли, что гифки можно успешно использовать в народном творчестве. Так возник Cinemagraph – видеоролики, преобразованные в формат GIF и представляющие собой некую эмоционально насыщенную движущуюся картинку.

И на этом дело не остановилось. Постепенно на такую творческую форму обратили внимание профессиональные художники.

Так возникло новое направление современного искусства – GIF-ART. В славном городе New York на постоянной основе функционирует галерея Gif-арта, причем очень популярная у американцев и туристов.

Мобильная GIF-анимация для всех

Наверно, не все в курсе, но приобщиться к искусству джиф-арт и синемаграфии может любой пользователь.
Достаточно зайти в Google Play и скачать оттуда одно из мобильных приложений, которые автоматически преобразовывают видеоролики в гифки и можно мгновенно поделиться с друзьями в социальных сетях.
Например, ваш домашний питомец что-то такое прикольное вытворяет. Вот вы его снимаете на камеру своего смартфона и конвертируете в гифку. При удачном сюжете можно заполучить миллионы лайков и прославиться по всему миру.
Как вариант, можно взять любой видеоролик или даже кинофильм, сериал и преобразовать при помощи онлайн-конвертера в GIF. Вырезать самые эффектные куски, так что вам даже и видеокамера не нужна.

GIF в социальных сетях и бизнесе

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

Многие крупные бренды в наши дни используют формат GIF, чтобы добавить захватывающий момент в Интернет для своей целевой аудитории, эти мерцающие картинки определенно делают чудеса. На самом деле популярность GIF и их способность доставлять контент в интерактивном режиме произвели революцию в мире. Вот почему в настоящее время GIF используются для определения лексикона Интернета, и Оксфордский словарь недавно решил добавить «GIF» в свой список слов. В мире искусства изображения GIF привлекли большое внимание, и большинство художественных галерей или популярных учреждений используют GIF-изображения для демонстрации невероятных произведений своих талантливых художников-графиков.

Источник

Особенности изображений GIF формата.

Файлы формата GIF (Graphic Interchange Format — формат для обмена изображениями) чаще всего используются для веб-страниц. Несмотря на то что он не был создан специально для Всемирной паутины, этот формат быстро приняли за его универсальность, небольшой размер файлов и межплатформенную совместимость. Также GIF предполагает прозрачность и способен содержать простую анимацию. Прошло более двадцати лет, но он, бесспорно, остается наиболее широко используемым форматом изображений для Всемирной паутины.

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

Чтобы правильно сохранить файл в формате GIF, важно знать, как он работает и что он может сделать.

8 бит, индексированный цвет.
Говоря техническим языком, файлы в формате GIF — это изображения с индексированным цветами, которые содержат 8-битную информацию о цвете (их также можно сохранить с более низкой разрядностью цвета). Расшифруем эти термины. 8 бит означает, что файл GIF может содержать до 256 цветов — максимальное количество, которое могут описать 8 бит информации (28=256). Использование меньшей глубины цвета ведет к меньшему количеству воспроизводимых цветов, а также сокращает размер файла.

Индексированный цвет означает, что набор цветов изображения, его палитра, хранится в таблице цветов (которую также называют картой цвета). Каждый пиксел в изображении содержит цифровую ссылку (или «индекс») на позицию в таблице цветов.

Когда открываете файл формата GIF в программе Photoshop, вы способны видеть (и даже редактировать) его таблицу цвета, выбрав команду меню Изображение > Режим > Таблица цветов (Image > Mode > Color Table). Вы сможете просмотреть таблицу цветов изображения, если в программе Photoshop выберете команду меню Файл > Сохранить для Web и устройств (File > Save for Web & Devices), чтобы экспортировать изображение в формат GIF. В программе Fireworks таблица цветов находится на панели Оптимизировать (Optimize).

Большинство исходных изображений (отсканированные, иллюстрации, фотографии и т. д.) имеют исходный формат RGB, поэтому их нужно конвертировать в режим индексированного цвета, чтобы потом можно было сохранить в формате GIF. Когда изображение переходит из формата RGB в индексированный режим, количество цветов в изображении сокращается до 256 или меньшего. В программах Photoshop и Fireworks конверсия имеет место, когда вы сохраняете или экспортируете документ в формат GIF. Другие программы для редактирования изображений могут потребовать, чтобы вы сначала конвертировали его вручную в индексированный цвет, а затем, в качестве второго шага, экспортировали в формат GIF.

В любом случае вам нужно будет выбрать палитру для изображения с индексированным цветом. Я рекомендую вам использовать селективную или перцепционную палитру в программе Photoshop, адаптивную — в программе Fireworks, и режим Оптимизированный медианный вырез (Optimized Median Cut) в программе PaintShop Pro для получения лучшего результата для большинства изображений.

Сжатие файлов формата GIF.
Сжатие файлов формата GIF осуществляется без потерь, это означает, что никакая информация об изображении при этом не теряется (хотя некоторая информация об изображении все же может быть потеряна, если изображение формата RGB конвертируется в файл с индексированным цветом). Кроме того, этот формат использует схему сжатия (называемую LZW — алгоритм Лемпеля-Зива-Велча), применяющую повторение данных. При обнаружении строки пикселов идентичного цвета строка сжимается в одно описание данных. Вот почему изображения с большими областями равномерного цвета легче поддаются сжатию, чем текстурные.

Объясню это на упрощенном примере: когда при сжатии находится ряд из 14 идентичных пикселов синего цвета, выполняется сокращенная запись «14 синих пикселов». В следующий раз, когда встречаются 14 синих пикселов, используется только кодовое сокращение. И наоборот, если встречается ряд с плавным переходом от синего к голубому и зеленому, необходимо сохранить описание каждого пиксела, для чего требуется больше данных. То, что происходит, в технических терминах объяснить сложнее, но этот пример представляет собой рекомендацию, о которой нужно помнить, когда вы создаете изображения в формате GIF и хотите добиться максимального сжатия.

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

Чересстрочная загрузка.
Чересстрочная загрузка заставляет файл в формате GIF загружаться в несколько стадий. Каждая демонстрирует более ясное изображение, чем предыдущее, до того момента, пока изображение полностью не загрузится в окне браузера. Без чересстрочной загрузки некоторые браузеры могут ожидать окончания загрузки изображения до того, как покажут его. Другие могут выводить по несколько строк изображения за раз, сверху вниз, до того момента, пока оно не появится полностью.

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

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

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

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

Программы Adobe Photoshop и Fireworks имеют инструменты для создания анимированных GIF-файлов. В программе Photoshop CS5 и более ранних версиях используйте окно Анимация (Animation). В CS6 используйте окно Шкала времени (Timeline) и выберите команду Создать анимацию кадра (Create Frame Animation). Во Всемирной паутине для работы с анимированными файлами GIF можно найти множество специализированных инструментов, многие из которых бесплатные.
Для оплаты необходимо пройти быструю регистрацию с правильным указанием своего Email адреса. На него будет выслан оплаченный товар.

Автор: Саков | Просмотров: 5 396 | 2016-05-22

Источник

Сравнение анимации GIF, WebP, APNG, BPG

Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 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, но только в улучшенном варианте:

BPG формат

BPG — самый новый. Он был предложен в конце 2014 года. Формат позиционируется как замена JPEG со значительными улучшениями. Сжатие изображения будет эффективнее, чем у предка. Появится поддержка анимации (JPEG не умеет этого делать). Но формат только начинает свое развитие, рекомендовать его для использования еще нельзя, а вот следить за ним можно.

Работа с GIF, APNG и WEBP в CLI

Есть два замечательных пакета ImageMagick и GraphicsMagic. С помощью ImageМagic создается анимация из *.gif картинок:

Команда convert подхватывает все файлы *.gif в директории, сортирует их по алфавиту и последовательно вставляет в новый файл animated.gif.

Проверка (запустится маленький графический контейнер с мультиком):

Конвертация мультика в APNG формат:

Если использовать GraphicsMagic, то команды такие:

На этот раз выходной формат WEBP. Аналогично обрабатывается и BPG.

Также возможно вытащить анимацию в GIF из видеофайлов. Например, с использованием пакета libav-tools импортируется видео из MP4:

Посмотреть разницу между анимацией GIF, WebP и APNG в разных форматах можно тут. А вот пример.

Источник

GIF изнутри

Вам когда-нибудь было интересно, как устроены gif-ки? В данной статье попробуем разобраться с внутренним строением GIF-формата и методом сжатия LZW.

Структура GIF

Файл в формате GIF состоит из фиксированной области в начале файла, за которой располагается переменное число блоков, и заканчивается файл завершителем изображения.

Основные характеристики формата GIF:

Пример разбора

Рассмотрим разбор дампа анимированного GIF-изображения размера 4х4 пикселя, состоящего из двух кадров. А вот и сами кадры, увеличенные в десятки раз.

Заголовок

В начале каждого файла GIF находится заголовок. Состоит он из текста «GIF87a» или «GIF89a», в зависимости от версии. В формате GIF87a переменная область содержит исключительно описания изображения, а в формате GIF89a она может включать еще и блоки расширений.

Логический дескриптор экрана

[04 00] [04 00] – ширина и высота виртуального экрана в пикселях
[А2] –
&nbsp&nbsp&nbsp&nbsp&nbsp(1) — флаг M использования глобальной таблицы цветов. Если 1, то в файле присутствует глобальная таблица цветов.
&nbsp&nbsp&nbsp&nbsp&nbsp(010) = 2 — флаг CR. Число бит разрешения цвета = CR + 1.
&nbsp&nbsp&nbsp&nbsp&nbsp(0) – флаг S (флаг сортировки). Если 1, то цвета в глобальной карте цветов отсортированы в порядке убывающей важности.
&nbsp&nbsp&nbsp&nbsp&nbsp(010) = 2 — флаг PIXEL. Размер общей таблицы цветов. Число записей в глобальной таблице цветов: 2^(N+1).
[00] – Индекс цвета фона.
[00] – Соотношение сторон. По умолчанию — 1:1.

Глобальная таблица цветов

[0A B2 5D] —
[C8 A6 2D] —
[F3 ED 63] — &nbsp
[BA 60 A5] —
[00 80 C8] — &nbsp
[F1 60 22] — &nbsp
[00 00 00] — &nbsp
[FF FF FF] — &nbsp&nbsp

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

Коды блоков:
&nbsp&nbsp&nbsp&nbsp0x21 – Расширение
&nbsp&nbsp&nbsp&nbsp0x2С – Блок изображения
&nbsp&nbsp&nbsp&nbsp0x3B – Завершение файла GIF

Блок расширения

Коды расширения:
&nbsp&nbsp&nbsp&nbsp0x1 – расширение простого текста
&nbsp&nbsp&nbsp&nbsp0xF9 – расширение управления графикой
&nbsp&nbsp&nbsp&nbsp0xFE – расширение комментария
&nbsp&nbsp&nbsp&nbsp0xFF – расширение программы

[FF] — код расширения. В нашем случае имеем расширение программы.
[0B] — размер последующего блока в байтах.
[4E 45 54 53 43 41 50 45] — (NETSCAPE) идентификатор приложения, которому принадлежит это расширение.
[32 2E 30] — (2.0) код приложения. С его помощью приложение проверяет, действительно ли это расширение принадлежит ему.
[03] — размер последующего блока в байтах.
[01] — фиксированное значение.
[00 00] — значение 0..65535. Беззнаковое целое в формате little-endian. Определяет, сколько раз должен повторяться цикл.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspДля 0 – бесконечно.
[00] — конец блока.

[F9] — код расширения (расширение управления графикой).
[04] — размер последующего блока в байтах.
[04] —
&nbsp&nbsp&nbsp&nbsp(000) – зарезервировано. Рекомендуется заполнять нулями.
&nbsp&nbsp&nbsp&nbsp(001) — метод обработки. Определяет, что делать после отображения.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp0 – к картинке не будет применяться никакой обработки
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp1 – картинка останется без изменений
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2 – картинка затрется фоном
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp3 – восстановится изображение под картинкой
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp4-7 – не определены
&nbsp&nbsp&nbsp&nbsp(0) – флаг ввода пользователя. Если 1, то для продолжения обработки изображения требуется реакция пользователя.
&nbsp&nbsp&nbsp&nbsp(0) – флаг цвета прозрачности. Указывает, будет ли какой-нибудь цвет использоваться как прозрачный.
[32 00] – время задержки в анимации. = 50/100 секунды = 0,5 с
[00] – индекс цвета прозрачности.
[00] — конец блока.

Блок изображения

[00 00] [00 00] — номер строки и столбца. Определяет координаты верхнего левого угла логического экрана. (0, 0).
[04 00] [04 00] — ширина и высота изображения в пикселях.
[00] —
&nbsp&nbsp&nbsp&nbsp(0) – флаг использования локальной таблицы цветов
&nbsp&nbsp&nbsp&nbsp(0) – флаг чересстрочной развертки. Указывает, в каком порядке считываются пиксели изображения.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp0 – по строкам слева направо, сверху вниз
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp1 – порядок:0-я. 8-я, 16-я…, 4-я, 12-я, 24-я…
&nbsp&nbsp&nbsp&nbsp(0) – флаг сортировки локальной таблицы цветов. Если 1, то цвета в локальной карте цветов отсортированы в порядке убывающей важности.
&nbsp&nbsp&nbsp&nbsp(00) – зарезервированы.
&nbsp&nbsp&nbsp&nbsp(000) – флаг PIXEL. Размер локальной таблицы цветов, если есть.

[03] — минимальный размер кода в LZW.
[08] — размер последующего блока в байтах.
[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW. Представлены в виде последовательности кодов, имеющих длину [мин. размер кода] + 1
[00] — окончание потока данных.

Разбор алгоритма LZW

Кадр 1

Словарь инициализирован по количеству цветов и кодами и . Берем код с длиной текущего размера, получаем его значение из словаря. Если значение есть в словаре, то получаем готовый индекс цвета для текущего пикселя и добавляем в словарь следующее значение: полученное предыдущее + первое из текущего. Если в словаре еще нет такого значения, то добавляем по этому индексу полученное предыдущее + первое из предыдущего. Первый код должен соответствовать значению , последний — .

Решим обратную задачу. Возьмем исходные данные изображения и закодируем их с использованием алгоритма LZW. Под исходными данными понимаем последовательность индексов цветов из словаря, соответствующих каждому из пикселей. Пискели рассматриваем сверху вниз, слева направо.

Теперь сравним результат кодирования со сжатыми данными, хранящимися в дампе. Формат GIF в данном блоке хранит многобайтовые целые числа с младшим байтом на первом месте (прямой порядок байтов).

[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW.

Аналогично поступаем со вторым кадром.

Кадр 2

[38 16 A7 EC 6D 9D 04] — блок данных, сжатых алгоритмом LZW.

Блок завершения файла GIF

Заключение

На этом всё. Надеемся, эта статья была полезна для вас (ну или хотя бы интересна).

Источник