Gif формат это: что за формат и для чего он нужен веб-мастерам

что за формат и для чего он нужен веб-мастерам

Здравствуйте, уважаемые читатели блога Start Luck! Наверняка каждый пользователь, регулярно или время от времени выходящий «посерфить» в интернете, сталкивался с так называемыми гифками. Чаще всего я встречался с ними в социальных сетях — Вконтакте, Одноклассниках и т.д.

Но, конечно, используются они повсеместно. Формат не для всех понятный — то ли это видео, то ли картинка. Предлагаю вам расставить все точки над i.

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

Что это?

Что такое gif? Что за формат? Создан он был для обмена растровыми (пиксельными) картинками. Удобен и популярен он стал из-за своей особенности сжимать графические файлы без особой потери их качества. Но у всего есть предел, а лимит gif – 256 цветов.

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

Что за прозрачность? Чтобы не давать какому-то участку цвет (ведь количество ограничено), его делают прозрачным, и он будет приобретать цвет фона. То есть, он может быть белым, черным или красным — все зависит от того, где вы откроете гифку.

Я вот, например, как-то раз сохранил картинку в этом формате. Скачивал я черную надпись на белом фоне и что, вы думаете, я увидел в галерее? Просто черный квадрат. Это уже промах создателя гифки, можно было бы и обойтись без прозрачности — тут всего два цвета!

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

Поэтому на гифки с фрагментами из каких-то фильмов или сериалов на моменты с диалогами накладывают текст. Могу предложить вам статью о том, как делать надписи в фотошопе.

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

Где их взять?

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

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

Все! Теперь можете поделиться своим творением с друзьями или оставить в своем блоге, использовать в качестве рекламного баннера на каком-нибудь сайте и многое другое.

Если вам нужны какие-то гифки, но сами вы создавать их не хотите из-за отсутствия времени или интереса, воспользуйтесь сайтами-банками. Таковых на просторах интернета полным-полно, например Giphy.com или Gifs.net.

Заработок возможен?

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

Насколько мне известно, никто не занимается продажей и покупкой gif-анимации. Возможно, это просто непопулярная биржа и поэтому она находится в тени. Но кто сказал, что вы не можете попробовать создать такой сайт?

После прохождения курса «Интернет-магазин под ключ» вы сможете продавать гиф-анимацию на созданной платформе.

Или можете найти человека, который сделает вам сайт на Kwork.ru или других биржах фрилансеров, что будет дешевле.

Кстати, если вам очень понравится работа над созданием гифок, можете податься в анимационный дизайн. Будете работать над визуальным оформлением какой-нибудь рекламы, делать баннеры. Для начала могу посоветовать вам продавать работы на Videohive.net, а там уж как пойдет. Может таких успехов добьетесь в этом деле, что будете работать на какие-нибудь именитые компании!

В наши дни владелец компьютера может начать зарабатывать деньги почти из ничего — нужно лишь знать, что делать. Помните, что начать можно с обычного ноутбука и прийти к большому успеху — все в ваших руках. А как выжать из ПК максимум вы сможете узнать из курса «Секреты продуктивной работы за компьютером».

Ну и мой блог, я надеюсь, вам в этом помогает. Если эта статья была полезной, подписывайтесь на мой паблик Вконтакте и рассказывайте о блоге своим друзьям! Желаю вам удачи во всех начинаниях! Пока!

Графический формат GIF — описание, достоинства и недостатки

Всем привет! Сегодня мы рассмотрим графический формат GIF, его описание, достоинства и недостатки.

изображение с горизонтальными линиями сжимается лучше, чем с вертикальными.

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

Черно-белые фотографии, GIF может хранить без какой-либо потери качества. Если вы выбираете палитру 256 цветов, способ подавления цвета «оттенки серого», «без разложения», то возможности GIF формата будут равны JPEG. Формат JPEG тоже сохраняет черно-белые изображения только в 256 оттенках серого. Больше серых оттенков с 24 разрядной глубиной цвета (8 бит/канал) JPEG использовать не умеет. GIF-файл будет больше, потому что он использует сжатие без потерь LZW, в отличие от JPEG, который использует сжатие с потерями.

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

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

Хотя графический формат GIF использует сжатие без потерь, однако, Adobe Photoshop позволяет установить и сжатие с потерями. Сумма «потерь» указывается в процентах и вызывает достаточно выраженную деградацию изображения. Поэтому целесообразно ставить ползунок потерь в 0 % или максимум до 40 %. Кроме того, уменьшение размера файла не столь критично.

Графический формат GIF и анимация

Графический GIF формат позволяет хранить даже простую анимацию, что делает его очень популярным в интернете. Более сложные анимации типа «кино» в GIF формате также можно создать, но размер файла будет уже значительно увеличен. Таким образом, для более сложной анимации используется, например, Flash, который может создавать и векторную анимацию и, следовательно, является намного более экономичным. GIF формат, в принципе, может сохранить даже реальный фильм, но это слишком расточительное решение, чаще применяется такой формат как MPEG. Простая анимация, по-прежнему является прерогативой GIF формата, потому что она очень простая и данные вполне приемлемы.

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

При создании анимации процесс происходит так, что отдельные фазы анимации создаются, как обычные изображения (в любом редакторе), и вы тогда в соответствующей программе (например, Adobe Image Ready) их добавляете в своеобразную ленту. Иногда тот факт, что GIF содержит анимации, подчеркивается словами «анимированный GIF».

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

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

1. Сохранения с помощью палитры цветов может быть очень выгодно — особенно для графики, логотипа, иконки и т.п. и часто приводит к значительно лучшему результату при меньшемразмере файла.
2. Поддерживает сжатие без потерь.
3. Позволяет сохранять прозрачность.
4. Поддерживает анимацию.

Недостатки графического формата GIF:

1. Хранение цветов с помощью палитры для многих приложений невыгодно (фото).
2. Прозрачность только «да/нет», формат не допускает плавную прозрачность.
3. Анимация значительно увеличивает размер результирующего файла.
4. Сжатие без потерь относительно расточительно и часто приводит к очень большим файлам, особенно для больших изображений.
5. GIF формат не поддерживает Exif и, таким образом, эти данные всегда теряются.
6. Графический GIF формат не поддерживает управление цветом (ICC профиль), но из-за использования палитры цветов это не столь большая проблема.
7. GIF не поддерживает эффективного хранения изображения, содержащего несколько слоев.
8. GIF не поддерживает векторную графику.

Формат gif что это такое

GIF (англ. Graphics Interchange Format «формат для обмена изображениями») — популярный растровый формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов. Не зависящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) на фирме CompuServe [en] для передачи растровых изображений по сетям. В 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] .

Сжатие [ править | править код ]

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

Алгоритм сжатия 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 имеет распространение в сфере создания баннеров, а также графической оболочки видео-контента.

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

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

Если вам необходимо отредактировать или изменить изображения в формате GIF, вы можете воспользоваться популярными утилитами на подобии Adobe Photoshop, Paint Net либо Corel PaintShop и так далее. Описываемое расширение, является одним из самых распространенных в сети Интернет среди аналогов, потому как оживляет не только сами страницы веб-ресурсов, но и наделяет пользователей возможностью обмена анимациями, к примеру, в социальных сетях и коммуникационных приложениях.

Формат файлов GIF Raster image

GIF — самый популярный тип файлов в Интернете благодаря тому, что он позволяет создавать анимированные изображения. Файлы GIF используют растровые изображения до 8 бит/пиксель. Такое разрешение позволяет использовать 256 цветов палитры RGB. Следует отметить, что далеко не все изображения GIF являются анимированными. Большое количество логотипов и изображений с четкими, хорошо очерченными линиями, а также прозрачные фоны сохраняются именно в формате GIF. Сжатие файлов в формат GIF происходит без потерь, т.е. размер уменьшается без снижения качества изображения. Это позволяет конвертировать файлы в другие форматы без каких-либо существенных потерь качества.

Технические сведения о файлах GIF

Компания Compuserve создала формат GIF (Graphics Interchange Format — формат графического обмена) для использования в Интернете. Именно поэтому данные о нем были открыты широкой общественности. 256 цветов файла GIF способны использовать алгоритм Лемпеля — Зива — Велча, который позволяет сжимать файлы с одновременным удалением участков с недостаточным кол-вом данных с целью минимизации потерь качества изображения. Растровая информация сжимается до минимальных размеров. Кол-во цветов, необходимых для построения изображения, снижается путем удаления цветов, которые при формировании изображения на используются. Максимальное кол-во цветов — 256, однако на изображении их может быть даже 2 — белый и черны (минимальное требование к кол-ву цветов файла GIF). Снижение кол-ва цветов уменьшает общий размер файла.

GIF-анимация в письмах: плюсы и минусы, функции и особенности — Еmail маркетинг

Время чтения: 5 минут

Текст, дизайн, адаптивность, интригующая тема — да, всё это работает. Но как сделать рассылки ещё лучше? Есть идея — добавить в письма GIF-анимацию. Хотя такой формат изображений не нов, он остаётся популярным в сфере email-дизайна.

Давайте вместе разберёмся, каковы плюсы и минусы, функции и особенности GIF в письмах. Также рассмотрим, как добавить анимацию в ваши рассылки.

Преимущества и недостатки

Плюсы:

1. В отличие от Flash- и CSS-анимации, корректно отображается в большинстве почтовиков.
2. Двигающийся элемент привлекает внимание и задерживает подписчика в письме.
3. Поддерживает прозрачный слой.
4. Идеален для картинок с небольшим количеством цветов.

Минусы:

1. Может весить слишком много. Например, если итоговый файл большой или в нём 100500 кадров. А для рассылок это критично. В таких случаях часто жертвуют качеством гифок ради лучшей доставляемости рассылок.
2. Поддерживает всего 256 цветов. Красивые фотографии могут потерять часть яркости, если перевести их в gif-формат.

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

Функции GIF

• Акцентировать внимание. Подписчик чётко видит то, что ему интересно, а второстепенные элементы размываются. Анимация привлекает, потому что глаз реагирует на движение. 

Гифкой можно выделить, например, блок со скидкой или её конкретный размер. Вот отличный пример от Vichy.

• Объяснить работу программы, приложения или любого другого продукта.

В письме Перекрёстка есть маленький, но полезный гиф-блок. Он объясняет преимущества онлайн-покупок в супермаркете.

• Развлечь, отвлечь от рутины.

Aviasales любит смешные анимации.

• Сымитировать видео.

Гифка в рассылке La Roche Posay, имитирующая видео.

• Показать ассортимент товаров.

Free People продемонстрировали каталог купальников и заодно показали, как их можно сочетать. Ну, или покупатель может выбрать верх и низ самостоятельно.

• Включить в игру.

Отличная идея от Amediateka — гифка в виде барабана. Вовлекает и развлекает.

Что учесть, если вы решили использовать гифки в письмах?

Помните о размерах

Анимация воспроизведётся только после полной загрузки. Потому чем меньше весит картинка, тем лучше. Допустимый размер GIF — до 600 кБ.

Не перебарщивайте

Не нужно заваливать рассылку анимацией, пользователя может укачать 😄 Одной-двух картинок будет достаточно. Рекомендуем придерживаться такого правила: одна прокрутка — одна анимация.

Нужна помощь в создании писем?

Сделайте первый кадр самым информативным

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

Следите за качеством

Картинка не должна быть чересчур зернистой (если, конечно, вы не стремились к такому эффекту). Низкое качество изображения вряд ли вызовет у клиента желание быстро-быстро оформить заказ.

Не оформляйте гифками таймер

Мало ли, вдруг человек откроет ваше письмо через месяц, а там бац — и обратный отсчёт. Чтобы этого не случилось, прочитайте нашу статью о таймерах или используйте сервис типа Sendtric или MotionMail. 

Проверьте, несёт ли анимация смысловую нагрузку

Мерцание и переливы — это, конечно, хорошо. Но так ли они нужны вашему письму, если в них нет смысла?

Используйте цельную идею

Конечно, можно просто взять разные картинки и слепить из них gif. Но лучше отдать предпочтение одной анимации, которая «рассказывает» историю, то есть несёт конкретную идею.

Где брать гифки?

Вот три варианта:

1. Скачать готовую. Ищите подходящую на Gipfy.com, Gifs.com и подобных сайтах.
2. Сделать самому (для начинающих). Подойдут сервисы iLoveIMG, gifmaker.me или gifius.ru. Просто загрузите последовательность кадров, выставьте скорость и размеры и получите готовую анимацию. GIF также можно сделать из видео.
3. Сделать самому (для продвинутых). Это сложно и может быть долго, но зато картинка будет уникальной. Анимировать изображения можно в Adobe After Effects, Adobe Animate (сложно) или Adobe Photoshop (проще). Подробнее о том, как самому сделать GIF, читайте в нашей статье «Gif-картинки и анимация в письмах. Как создать и добавить в письмо».

Как добавить гифку в email-рассылку?

Очень просто: так же, как и обычную картинку. Перенесите её в письмо, и она сама встанет на нужное место. Готово, вы восхитительны!

Что в итоге?

Гиф-анимации — отличный способ разнообразить ваши рассылки. Они привлекают и задерживают внимание, развлекают, информируют и расставляют акценты.

Что важно помнить:

• размеры файла — не больше 600 кБ;
• одна гифка — одна идея;
• обязательна смысловая нагрузка;
• первый кадр — самый информативный;
• качество — наше всё;
• не заваливать письмо 100500 анимаций, лучше использовать одну-две, но тематически.

Нужна помощь с гифками или рассылками в целом? Напишите нам на [email protected] или позвоните 8 (800) 770-70-23. Подскажем, как создать email-рассылки, которые принесут вам продажи, а подписчикам — удовольствие.

Читайте нас на Яндекс.Дзен

Рекомендуемые статьи

Что такое формат jpg gif или png. Графический формат. JPEG, GIF и PNG

15.06.2014

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

Какой формат файла выбрать?

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

Формат PNG
является форматом, в котором сжатие происходит без потерь. В этом форматена каждый пиксел приходится 3 цветовых канала (RGB — красный, зеленый, синий), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения формат PNG может превосходить JPG, но по размеру файла будет также больше. Формат PNG поддерживает разные уровни прозрачности (полупрозрачность). За счет особенностей алгоритма, он очень хорошо сжимает изображения, в котором есть горизонтальные линии. И когда стоит задача выбрать сохранение файла в формате GIF или PNG, для случаев, когда картинка представляет из себя примитивные линии, стоит обращать внимание на положение этих линий — т.е. в формате GIF стоит сохранять изображения с вертикальными линиями
, в PNG — горизонтальными. PNG является хорошим выбором для хранения чертежей, текст и знаковых графики в небольшом размере файла.

Формат JPG
является форматом, в котором есть потери цвета. Алгоритм работы в этом формате такой, что в нем очень хорошо сжимаются изображения с градиентами (сохраняются цвета первого пикселя в градиенте и последнего, а при выводе изображения — все промежуточные цвета между этими точками вычисляются), что делает его полезным для хранения изображений в меньшем размере, чем в формате BMP. Фотографии, переливы, логотипы, бекграунды и пр. лучше сохранять в формате JPG.

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

Понравился материал — нажмите, пожалуйста, на кнопку =)

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

Краткий анализ графических форматов файлов

1. JPG / JPEG / JFIF
2. TIF / TIFF

Растр против вектора

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

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

Сжатие файлов

Кроме того, форматы файлов изображений можно различать на основе эффектов сжатия, называемых компрессией. Разновидностей схем сжатия достаточно большое количество, но суть их существования можно свести в одну задачу — сжать растровый файл как можно эффективней. Сжимать графический файл нет смысла, так как его размер зависит не от масштаба, а от количества путей в нём.

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

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

Изображения JPG / JPEG / JFIF

Аббревиатура от
: Joint Photographic Experts Group — Объединённая группа экспертов по фотографиям.

Расширения файлов
: .jpg / .jpeg

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

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

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

Формат изображения PNG

Аббревиатура от
: Portable Network Graphics — портативная сетевая графика.

Расширение файлов
: .png

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

Минусы
: Больше всего подходит для файлов больших размеров. Сам формат PNG не поддерживает анимированную графику.

Применяемость
: редактирование изображений, веб-изображения, изображения с учётом слоев, таких как прозрачность или эффекты затухания.

Расширение файла TIF

Аббревиатура от
: Tagged Image File Format — формат для хранения растровых графических изображений.

Расширение файлов
: .tif / .tiff

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

Минусы
: Не идеальны для веб-браузеров.

Применяемость
: Начальный этап фотографических файлов в печати. Программные пакеты OCR.

Формат файла GIF

Аббревиатура от
: Graphics Interchange Format — формат для обмена изображениями.

Расширение файлов
: .gif

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

Минусы
: формат ограничен 8-битной палитрой (256 цветов) и не подходит для фотографических изображений или сглаживания.

Применяемость
: Графика, которая требует нескольких цветов, например упрощенные диаграммы, логотипы и анимации, которые состоят на более чем 50% из одного цвета.

Формат файла изображения BMP

Аббревиатура от
: Bitmap Picture — дословно формат для хранения растровых изображений

Расширение файлов
: .bmp

Этот формат разработан компанией Microsoft и предназначен для хранения больших несжатых файлов внутри ОС Windows.

Минусы
: этот формат не использует сжатие.

Применяемость
: упрощенная структура формата делает файлы bmp идеальными для программ Windows.

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

Gif анимация что это такое

GIF (англ. Graphics Interchange Format «формат для обмена изображениями») — популярный растровый формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов. Не зависящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) на фирме CompuServe [en] для передачи растровых изображений по сетям. В 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] .

Сжатие [ править | править код ]

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

Алгоритм сжатия 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 это сокращение от полного названия Graphics Interchange Format. Стандарт этого изображения поддерживает только 8-битную палитру, из-за чего для отображения изображения может быть использовано только 256 цветов. Но за счет такой узкой палитры цветов удается добиться небольших размеров файлов с изображениями по сравнению с другими форматами.

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

GIF анимация может быть создана множеством программ. Ulead® System’s GIF Animator считается наиболее старой и одной из популярных программ, в которой легче всего сделать GIF анимацию. Самый известный всем редактор изображений Photoshop® Elements (PE) также может быть использован для создания GIF анимации, где его отельные созданные слои могут быть сгруппированы в формат GIF.

Формат GIF использует LZW-компрессию, которая была запатентована в середине 1980-ых компанией Unisys Corporation. За использование этого алгоритма сжатия компания долгое время взымала лицензионный платеж, патент на использование которого истек в 2003 году. В 1989-м году этот формат был доработан, была добавлена возможность установки прозрачности и, собственно, самой анимации. Хотя это формат уже сильно устарел и для его замены был создан формат PNG, GIF анимация до сих пор пользуется большой популярностью при создании анимированных изображений.

С помощью некоторых программ можно даже из видео фильма сделать 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. Вырезать самые эффектные куски, так что вам даже и видеокамера не нужна.

PNG, JPG, TIFF и GIF (которого так не хватало)

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

Первое, что вам нужно понять о форматах изображений, — это различие между растровыми и векторными форматами. Растровые фотографии представляют собой набор пикселей, или отдельных блоков, для создания изображения. Самые популярные форматы изображений — JPG, GIF и PNG — это растровые изображения. Каждая фотография, найденная в Интернете или в печати, относится к этой категории.

Пиксели имеют определенную пропорцию, определяемую их качеством (высокое или низкое разрешение). 

Когда они расширяются, чтобы заполнить пространство, для которого они изначально не предназначались, они искажаются. Это приводит к нечеткому или неясному изображению. Невозможно изменить размер растрового изображения без ухудшения его разрешения. Поэтому настоятельно рекомендуется сохранять и хранить растровые изображения именно в тех размерах, которые предназначены для его применения по умолчанию.

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

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

Форматы файлов изображений

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

Хотя существует масса форматов, используемых для сохранения и отображения фотографий, есть те, которые считаются «тяжеловесами» в фотоиндустрии. Это наиболее широко используемые сегодня форматы изображений. Большинство людей сталкивались и использовали по крайней мере один из них, если не все.

1. JPG

JPEG, он же JPG, расшифровывается как Joint Photographic Experts Group (Объединенная группа экспертов по фотографии). С момента своего появления в 1994 году файл JPG считается стандартным форматом графических файлов. Это, пожалуй, самый популярный формат изображений в Интернете.

Файлы JPG содержат потери. Это означает, что из исходной фотографии теряется много информации, когда она превращается в файл JPG. Этот формат избавляется от большей части информации, чтобы сохранить изображение в небольшом файле. Это также означает, что в некоторой степени снижается качество исходного изображения.

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

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

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

Преимущества JPG:

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

Недостатки JPEG:

• Имеет тенденцию терять много информации
• Могут появиться артефакты после сжатия
• Не может быть анимирован

2. GIF

GIF расшифровывается как Graphics Interchange Format (Формат обмена графикой). Он сокращает количество цветов (потенциально тысячи и сотни тысяч) в изображении до 256. В отличие от JPG, GIF поддерживают прозрачность. Они обладают уникальной способностью отображать серию изображений, подобно видео, называемую анимированным GIF. Последовательность отдельных изображений GIF, соединенных вместе, создает действие или анимацию.

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

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

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

Этот формат изображений является относительно старым. В 2012 году он отметил свой серебряный юбилей с момента появления GIF. И хотя этот формат по-прежнему широко используется, дизайнеры, как правило, откладывают его в сторону в пользу формата PNG.

Преимущества GIF:

• Поддерживает прозрачность
• Выполняет скромные анимации
• Качество без потерь
• Хорошо подходит для графики с ограниченным количеством цветов

Недостатки GIF:

• Ограничивает графику до 256 цветов
• Считается несколько устаревшим по сравнению с другими форматами

3. PNG

PNG расшифровывается как Portable Network Graphics (Портативная сетевая графика). Это формат сжатия изображений, который, как ожидается, в какой-то момент заменит формат GIF. В отличие от последнего, PNG был создан интернет-группой специально для того, чтобы не иметь патента. PNG также предлагает множество усовершенствований и лучших возможностей по сравнению с GIF.

Но, как и GIF, PNG-файл сжимается без потерь. Он не предназначен для замены файла JPG, а скорее позволяет пользователю найти компромисс между размером файла и качеством изображения при его сжатии. В целом, графическое изображение, сохраненное в формате PNG, обычно сжимается на 10-30% сильнее, чем изображение, сохраненное в формате GIF.

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

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

Преимущества PNG:

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

Недостатки PNG:

• Создает очень большие файлы, требующие слишком много места (иногда даже больше, чем JPG)
• Невозможность поддержки анимации
• Не подходит для всех браузеров

4. TIFF

TIFF расшифровывается как Tagged Image File Format (Формат файла изображения с метками). Он широко используется профессионалами фотоиндустрии, которые предпочитают использовать сжатие без потерь. Как ни странно, он наименее популярен в этой категории «тяжеловесов». Возможно, это связано с тем, что он редко признается веб-сайтами как тип файла. Кроме того, существует несколько типов файлов TIFF, но ни один ридер не может сканировать и читать их все. Это приводит к проблемам с различными форматами. Но с точки зрения печати формат TIFF считается одним из лучших вариантов с его прекрасным конечным результатом.

TIFF был разработан компанией Aldus для целей настольной издательской деятельности. К 2009 году ключевое управление было передано системе Adobe. Форматы TIFF нравятся обычным пользователям, но настоящее признание они получили у графических дизайнеров и фотоэкспертов, занятых в любой визуальной нише. Кроме того, исследования показывают, что TIFF — популярный формат среди пользователей Apple.

Этот формат изображений легко использовать в программах, которые занимаются версткой, размещением страниц и работой с фотографиями. TIFF — чрезвычайно универсальный формат, поскольку он может быть с потерями, как JPG, или без потерь, как GIF и PNG. Это также полноценный формат изображений, который поддерживается различными программами обработки изображений. Он способен записывать полутоновые графические данные с различной интенсивностью пикселей, что делает его идеальным для обработки, хранения и печати графики. Когда речь идет о формате растровых изображений, TIFF считается королем.

TIFF также является наиболее распространенным форматом файлов, используемым в фотопрограммах, таких как Photoshop, а также в программах верстки, таких как Quark и InDesign.

Преимущества TIFF:

• Универсальность
• Поддерживает различные форматы сжатия (включая нулевое сжатие)
• Создает высококачественные изображения со всеми сохраненными цветами и информацией
• Сохраняет форматы со слоями

Недостатки TIFF:

• Очень большие размеры файлов
• Требуется длительное время передачи
• Требуется значительное потребление дискового пространства

Другие известные форматы изображений

5. RAW

Файлы изображений RAW обычно содержат информацию, полученную непосредственно с цифровой камеры. Изображения называются raw (что в переводе означает «сырой») по той простой причине, что они еще не обработаны. А поскольку они еще не обработаны, их нельзя редактировать, манипулировать ими или печатать. Существует множество таких форматов. Каждая марка фотоаппарата обычно имеет свой собственный формат raw.

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

6. BMP

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

Растровые изображения состоят из миллионов точек, называемых пикселями, различных цветов и расположения для создания картинки или паттерна. Файл может быть 8-битным, 16-битным или 24-битным изображением. Поэтому, когда вы редактируете изображение BMP, чтобы сделать его меньше или больше, вы фактически делаете отдельные пиксели меньше или больше. В результате формы выглядят неровными и иногда нечеткими.

Файлы BMP не очень популярны, поскольку они не подходят для работы в Интернете и используются только в программах Windows.

7. SVG

SVG расшифровывается как Scalable Vector Graphics (Масштабируемая векторная графика). Файлы SVG — это веб-стандарты, основанные на XML, которые определяют фиксированную графику и анимацию с двумя измерениями. Этот формат существует уже более десяти лет. Но с нынешним прорывом HTML5 он, наконец, получает то внимание, которого заслуживает. На данный момент формат SVG позволяет пользователям создавать особенно качественную статичную и/или анимированную графику, которая не теряет данные при изменении размера. Это означает, что с помощью SVG можно создать изображение, которое будет одинаково хорошо смотреться как на маленьком дисплее телефона, так и на 60-дюймовом экране телевизора.

8. EPS

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

9. PDF

PDF — самый универсальный из всех форматов файлов. Его можно редактировать, использовать совместно, копировать, печатать и т.д. В него помещаются все данные файла, которые могут включать изображения, текст и макет, независимо от того, какая программа используется для создания файла. Это также один из самых удобных в использовании форматов, поскольку он довольно прост. Что еще более важно, он совместим со всеми операционными системами и приложениями, даже с бесплатными программами, доступными в Интернете.

Выбор правильного формата изображения очень важен

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

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

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

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

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

Что такое GIF?

GIF — это сокращение от Graphics Interchange Format, формат изображения без потерь, изобретенный американским ученым-компьютерщиком Стивом Уилхитом. Стив Уилхайт создал это в 1987 году, пытаясь найти способ анимировать изображения с минимально возможным размером файла. Формат файла gif поддерживает как анимированные, так и неподвижные изображения. Эти изображения зацикливаются бесконечно и не требуют нажатия кнопки воспроизведения.

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

Что такое GIF-файл?

Файлы GIF — это файлы изображений в простейших формах, похожие на форматы файлов изображений PNG или JPEG, а изображения в формате GIF можно использовать для создания неподвижных изображений. Но у него есть одна дополнительная особенность. В формате GIF можно также создавать анимированные GIF-файлы или анимированные GIF-файлы, как показано ниже.

Стоит отметить, что они называются анимированными изображениями, а не видео, потому что GIF-файлы не являются видео, хотя большинству людей они кажутся таковыми.Как вы, наверное, уже заметили, в файлах GIF нет звука или звука. Текст используется в формате Gif для передачи сообщения. Формат файла gif может содержать несколько изображений (анимированное изображение в случае анимированных gif), и, как и флипбук, эти изображения можно загружать последовательно. Расшифровка происходит определенным образом.

Истоки формата обмена графикой

Формат обмена графикой изначально не разрабатывался для анимации; просто так сложилось.Формат gif был опубликован 15 июня 1987 года компанией CompuServe и последний раз обновлялся в 1989 году.

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

Если вы посмотрите на начальные 6 байтов файла gif, вы заметите ASCII-код GIF87a для 87a и GIF89a для 89a.

Несмотря на то, что файл gif устарел, 8-битные файлы, в которых можно использовать только 256 цветов, по-прежнему очень популярны. Многие пытались заменить их, но не смогли. Ниже перечислены три основные причины:

1. Различные браузеры: Некоторые браузеры до недавнего времени не поддерживали формат файлов изображений APNG. Таким образом, если браузер не поддерживает формат, никто ничего не может сделать.С другой стороны, формат файла Gif уже давно поддерживается многими браузерами.
2. Видео не поддерживается HTML Стандарт: До 2014 года стандартный HTML не помогал с видео, поэтому было проще делиться файлами GIF, и они оставались в использовании.
3. Легко сделать: GIF-файлов существуют уже довольно давно, и есть много программного обеспечения, такого как Motionbox, где вы можете удобно создавать анимированные GIF-файлы. Так зачем искать другие форматы.

Для чего используются гифки?

GIF используются во многих доменах, одна из причин — их всемирное признание.Некоторые из причин, по которым используются гифки, указаны ниже:

Чат

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

Мемы

Не секрет, что в наши дни многие люди используют гифки в качестве мемов.Культурные ссылки и эмоциональные выражения позволяют пользователям выражать свои взгляды в юмористической и увлекательной форме. Таким образом, гиф-мемы обычно более предпочтительны, чем статические. Платформы социальных сетей, такие как Facebook, Twitter и Pinterest, позволяют легко использовать файлы GIF, за исключением Instagram и LinkedIn. Instagram требует, чтобы вы преобразовали анимированный файл GIF в формат видео, после чего он будет зацикливаться и воспроизводиться как GIF. LinkedIn, однако, воспроизводит любое видео продолжительностью менее 15 секунд в виде gif и продолжает цикл для формата MP4.

Маркетинг / имидж бренда

Формат Gif имеет ограничение на количество цветов, которые можно использовать, и по этой причине они подходят для сплошной графики с меньшим количеством цветов, то есть для логотипов. Это еще одно использование сжатия без потерь, предлагаемое неанимированными / анимированными файлами gif.

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

Как создавать анимированные GIF

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

Ниже приведены краткие инструкции по созданию gif с помощью Motionbox:

1. Зарегистрируйтесь или войдите в свою учетную запись Motionbox
2. Я выбрал функцию редактора Gif из списка функций, которые предлагает Motionbox. У вас будет возможность установить размеры в соответствии с типом социальной сети, в которую вы хотите загрузить свой gif. Например, Youtube и т. Д.
3. У вас также будет много шаблонов, доступных в виде изображений, видео, текстов. , и элементы, и вы можете выбрать и перетащить их из панели поиска GIF, чтобы начать создавать свой анимированный GIF.
4. Вы можете управлять временным конвейером вашего gif с помощью панели, представленной ниже.
5. После того, как вы создали свой анимированный gif, вы можете экспортировать его, используя опцию экспорта gif, доступную в Motionbox.

Итоги файлов GIF

Итак, что такое гифка? Это сжатие без потерь статических изображений, например видеоклипов с низким разрешением, но без звука. Это очень приемлемо для всех веб-браузеров, а приложения социальных сетей позволяют пользователям широко и легко использовать анимированные гифки.Вот почему гифки никуда не делись, и никакой формат не заменит гифку в ближайшее время. Тем более, что широкая публика до сих пор не зациклилась на анимированных гифках. Они используются в чатах, в маркетинговых целях, для повышения узнаваемости бренда и в мемах. Учитывая такое широкое использование, Motionbox вас обеспечил. Вы можете создать свой собственный GIF за 5 простых шагов. Он сам делает всю тяжелую работу и предоставляет вам максимально простой в использовании интерфейс приложения.

Формат файла GIF

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

Общая информация

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

Существует две версии формата GIF; версии 87a и 89a. Эти версии были выпущены в 1987 и 1989 годах соответственно.

• GIF 87a: исходная версия формата файлов GIF поддерживала сжатие файлов LZW, чересстрочную развертку, 256-цветовые палитры и хранение нескольких изображений.
• Версия 89a добавила прозрачность фона и несколько других дополнений, таких как время задержки и параметры замены изображения, чтобы сделать функцию хранения нескольких изображений более полезной для анимации.

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

Особенности формата GIF

Это обзор различных функций формата файлов GIF с точки зрения оператора допечатной подготовки.

Ограниченная цветовая палитра

Изображение GIF может содержать 2, 4, 8, 16, 32, 64, 128 или 256 цветов, которые хранятся в цветовой палитре или таблице поиска цветов в файле изображения.Каждый цвет в таблице цветов GIF описывается в значениях RGB, причем каждое значение имеет диапазон от 0 до 255. Цвета CMYK в GIF невозможны. Хотя формат GIF имеет доступ к более чем 16,8 миллионам цветов, в одном изображении GIF можно указать не более 256 цветов. Хотя эта ограниченная палитра снижает размер файла и вполне приемлема для просмотра на экране, она приводит к постеризованным изображениям при печати. Большинство инструментов предварительной проверки, таких как PitStop, могут генерировать предупреждение при обнаружении изображений с фиксированной цветовой палитрой.

Дитеринг

Ограниченное количество цветов в GIF используется для ограничения размера файла изображений. В то время как небольшое изображение с использованием 256 цветов может занимать 9,5 Кбайт, то же изображение, использующее 32 цвета, занимает всего 4,4 Кбайт, а снижение до 16 цветов снижает его до 1,9 К. Другой трюк, который используется для ограничения размера файла, — это дизеринг. Этот метод используется для создания иллюзии большей глубины цвета путем смешивания меньшего количества цветных «точек» вместе. Когда может быть отображено меньше цветов, чем присутствует в исходном изображении, тогда шаблоны соседних пикселей используются для имитации появления недостаточно представленных цветов.Дизеринг на самом деле не является особенностью GIF, это просто метод, который часто используется в изображениях GIF. Дизеринг добавляет к изображению шум и снижает резкость.

LZW сжатие

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

Прозрачная пленка

Прозрачность — это функция формата GIF89a, которая позволяет игнорировать указание одного из цветов в палитре при обработке изображения для вашего устройства отображения.Хотя эта функция отлично работает в Интернете, она не поддерживается приложениями для макетов, которые полагаются на файлы PSD или изображения EPS с включенной маской для достижения той же функциональности (но с гораздо более гладкими краями вокруг изображений).

переплетение

Interlacing — еще одна веб-функция GIF. Это механизм, который заставляет изображения быстрее появляться на экране, сначала отображая версию изображения с низким разрешением и постепенно показывая полную версию. Физически чересстрочный GIF содержит строки развертки в необычном порядке:

• Первый проход содержит строки пикселей 1, 9, 17 и т.д. (каждая восьмая строка)
• Второй проход содержит строки 5, 13, 21 и т.д.(каждая оставшаяся четвертая строка)
• Третий проход содержит строки 3, 7, 11, 15 и т.д. (каждая оставшаяся нечетная строка)
• Последний проход имеет строки 2, 4, 6 и т.д. (все четные строки ряды).

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

Анимация

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

Разрешение

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

Спецификация

Имя: GIF
Разработчик: CompuServe
Дата выпуска: 1987
Тип данных: растровое изображение
Количество цветов: 2, 4, 8, 16, 32, 64, 128 или 256
Цветовые пространства: RGB
Алгоритмы сжатия: LZW
Идеальное использование: Интернет-публикация
Расширение на платформе ПК: .gif
Тип файла для Macintosh: ?
Особенности: поддержка прозрачности, чересстрочной развертки и анимации
Примечания: —

G I F (тм)

Формат обмена графикой ™

Стандарт, определяющий механизм

для хранения и передачи

растровой графической информации

15 июня 1987 г.

(c) CompuServe Incorporated, 1987 г.

Все права защищены

Хотя этот документ защищен авторским правом, информация

содержащийся внутри, доступен для использования в компьютере

программное обеспечение без лицензионных отчислений или лицензионных ограничений.GIF и Graphics Interchange Format являются товарными знаками

CompuServe, Incorporated.

компания H&R Block

5000 Arlington Center Blvd.

Колумбус, Огайо 43220

(614) 457-8600

Страница 2

Спецификация формата обмена графикой (GIF)

Оглавление

ВВЕДЕНИЕ .. . . . . . . . . . . . . . . . стр. 3

ОБЩИЙ ФОРМАТ ФАЙЛА. . . . . . . . . . . . . стр. 3

ПОДПИСЬ GIF. . . . . . . . . . . . . . . . стр. 4

ОПИСАНИЕ ЭКРАНА. . . . . . . . . . . . . . стр. 4

ГЛОБАЛЬНАЯ ЦВЕТНАЯ КАРТА. . . . . . . . . . . . . . . стр. 5

ОПИСАНИЕ ИЗОБРАЖЕНИЯ. . . . . . . . . . . . . . . стр. 6

МЕСТНАЯ ЦВЕТНАЯ КАРТА. . . . . . . . . . . . . . . стр.7

РАСТРОВЫЕ ДАННЫЕ. . . . . . . . . . . . . . . . . стр.7

GIF-ТЕРМИНАТОР.. . . . . . . . . . . . . . . стр. 8

БЛОКИ РАСШИРЕНИЯ GIF. . . . . . . . . . . . . стр. 8

ПРИЛОЖЕНИЕ А — ГЛОССАРИЙ. . . . . . . . . . . . стр.9

ПРИЛОЖЕНИЕ B — ИНТЕРАКТИВНЫЕ ПОСЛЕДОВАТЕЛЬНОСТИ. . . . . . стр.10

ПРИЛОЖЕНИЕ C — УПАКОВКА И СЖАТИЕ ИЗОБРАЖЕНИЙ. . стр.12

ПРИЛОЖЕНИЕ D — ОБРАБОТКА НЕСКОЛЬКИХ ИЗОБРАЖЕНИЙ. . . . стр.15

Формат обмена графикой (GIF) Стр. 3

Спецификация

ВВЕДЕНИЕ

‘GIF’ ™ — это стандарт CompuServe для определения общего цвета.

растровые изображения.Этот «формат обмена графическими данными» ™ позволяет

высококачественная графика с высоким разрешением для отображения на различных

графическое оборудование и предназначено как механизм обмена и отображения

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

разработан для поддержки нынешних и будущих технологий изображения и будет

Дополнения послужат основой для будущих графических продуктов CompuServe.

Основное внимание в этом документе уделяется техническим

информация, необходимая программисту для реализации кодировщиков GIF и

декодеры.Таким образом, сделаны некоторые предположения относительно терминологии, относящейся к

графике и программированию в целом.

В первом разделе этого документа описывается формат данных GIF.

и его компоненты и применяется ко всем декодерам GIF, либо как автономные

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

раздел, относящийся к декодерам, которые являются частью коммуникационного программного обеспечения

пакет и описывает требования протокола для входа и выхода

Режим GIF и ответы на вопросы хоста.Глоссарий в Приложении

A определяет некоторую терминологию, используемую в этом документе. Приложение C

дает подробное объяснение того, как само графическое изображение

упакованы как серия байтов данных.

Определение данных формата обмена графикой

ОБЩИЙ ФОРМАТ ФАЙЛА

+ ———————— +

| + ——————- + |

| | Подпись GIF | |

| + ——————- + |

| + ——————- + |

| | Дескриптор экрана | |

| + ——————- + |

| + ——————- + |

| | Глобальная цветовая карта | |

| + ——————- + |

.. . . . .

| + ——————- + | — +

| | Дескриптор изображения | | |

| + ——————- + | |

| + ——————- + | |

| | Местная цветовая карта | | | — Повторяется от 1 до n раз

| + ——————- + | |

| + ——————- + | |

| | Растровые данные | | |

| + ——————- + | — +

. . . . . .| — GIF Терминатор — |

+ ———————— +

Формат обмена графикой (GIF) Стр. 4

Спецификация

ПОДПИСЬ GIF

Следующая подпись GIF идентифицирует следующие данные как

допустимый поток изображений в формате GIF. Он состоит из следующих шести символов:

G I F 8 7 а

Последние три символа «87a» можно рассматривать как номер версии.

для этого конкретного определения GIF и будет использоваться в целом как

ссылка в документах на GIF, относящихся к любой версии

зависимости.ОПИСАНИЕ ЭКРАНА

Дескриптор экрана описывает общие параметры для всех GIF.

изображения следующие. Он определяет общие размеры пространства изображения.

или требуется логический экран, наличие информации о цветовом отображении,

цвет фона экрана и информация о глубине цвета. Эта информация

хранится в серии 8-битных байтов, как описано ниже.

биты

7 6 5 4 3 2 1 0 Байт #

+ ————— +

| | 1

+ -Ширина экрана — + Ширина растра в пикселях (сначала младший бит)

| | 2

+ ————— +

| | 3

+ -Высота экрана- + Высота растра в пикселях (сначала младший бит)

| | 4

+ — + —— + — + —— + M = 1, глобальная цветовая карта следует за дескриптором

| M | cr | 0 | пиксель | 5 cr + 1 = # бит цветового разрешения

+ — + —— + — + —— + пиксель + 1 = # бит / пиксель в изображении

| фон | 6 background = Цветовой индекс фона экрана

+ ————— + (цвет определяется из глобального цвета

| 0 0 0 0 0 0 0 0 | 7 карта или карта по умолчанию, если не указано иное)

+ ————— +

Логическая ширина и высота экрана могут быть больше, чем

физический дисплей.Насколько изображения больше физического дисплея

обрабатывается зависит от реализации и может использовать преимущества оборудования

характеристики (например, прокручиваемые окна Macintosh). В противном случае изображения

могут быть прикреплены к краям дисплея.

Значение пикселя также определяет максимальное количество цветов.

внутри изображения. Диапазон значений для «пикселя» от 0 до 7, что

представляет от 1 до 8 бит. Это соответствует диапазону от 2 (черно-белый) до 256

цвета.Бит 3 слова 5 зарезервирован для будущего определения и должен быть

нуль.

Формат обмена графикой (GIF) Стр. 5

Спецификация

ГЛОБАЛЬНАЯ ЦВЕТНАЯ КАРТА

Глобальная цветовая карта не является обязательной, но рекомендуется для изображений, в которых

желательна точная цветопередача. Существование этой цветовой карты

указывается в поле «M» байта 5 дескриптора экрана. Цвет

карту также можно связать с каждым изображением в файле GIF, как описано

позже.Однако эта глобальная карта обычно используется из-за

аппаратные ограничения в имеющемся сегодня оборудовании. В индивидуальном

Дескрипторы изображений флаг «M» обычно равен нулю. Если глобальный

Цветовая карта присутствует, ее определение сразу следует за экраном

Дескриптор. Количество записей цветовой карты после экрана

Дескриптор равен 2 ** (# бит на пиксель), где каждая запись состоит

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

и синий соответственно.Структура блока Color Map:

биты

7 6 5 4 3 2 1 0 Байт #

+ ————— +

| красный интенсивность | 1 Значение красного для индекса цвета 0

+ ————— +

| интенсивность зеленого | 2 Значение зеленого для индекса цвета 0

+ ————— +

| интенсивность синего | 3 Значение синего для индекса цвета 0

+ ————— +

| красный интенсивность | 4 Значение красного для индекса цвета 1

+ ————— +

| интенсивность зеленого | 5 Значение зеленого для индекса цвета 1

+ ————— +

| интенсивность синего | 6 Значение синего для индекса цвета 1

+ ————— +

:: (Продолжение для остальных цветов)

Каждое полученное значение пикселя изображения будет отображаться в соответствии с его

наиболее близкое совпадение с доступным цветом дисплея на основе этого цвета

карта.Компоненты цвета представляют собой дробное значение интенсивности от

от нуля (0) до полного (255). Белый будет представлен как (255,255,255),

черный как (0,0,0) и средне-желтый как (180,180,0). Для отображения, если

устройство поддерживает менее 8 бит на компонент цвета, более высокий порядок

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

запись с оборудованием, поддерживающим менее 8 бит на компонент,

значения компонентов для оборудования должны быть преобразованы в 8-битные

формат со следующим расчетом:

= * 255 / (2 ** -1)

Это гарантирует точный перевод цветов для всех дисплеев.В

случаи создания изображений в формате GIF на оборудовании без цветовой палитры

возможности, должна быть создана фиксированная палитра на основе доступных

отображать цвета для этого оборудования. Если глобальная цветовая карта не указана,

внутренняя цветовая карта по умолчанию, которая отображает все возможные

входящий индекс цвета для того же аппаратного индекса цвета по модулю, где

количество доступных цветов оборудования.

Формат обмена графикой (GIF) Стр. 6

Спецификация

ОПИСАНИЕ ИЗОБРАЖЕНИЯ

Дескриптор изображения определяет фактическое размещение и размеры

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

map и для определения последовательности отображения пикселей. Каждый дескриптор изображения

вводится символом-разделителем изображений. Роль образа

Разделитель просто предоставляет символ синхронизации, чтобы ввести

дескриптор изображения. Это желательно, если файл GIF содержит

более одного изображения. Этот символ определяется как шестнадцатеричный 0x2C или ‘,’

(запятая). Когда этот символ встречается между изображениями, изображение

Дескриптор последует немедленно.Любые символы, встречающиеся между концом предыдущего изображения и

символ-разделитель изображений следует игнорировать. Это позволяет в будущем GIF

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

старыми программными декодерами.

биты

7 6 5 4 3 2 1 0 Байт #

+ ————— +

| 0 0 1 0 1 1 0 0 | 1 ‘,’ — символ-разделитель изображений

+ ————— +

| | 2 Начало изображения в пикселях от

+ — Изображение слева — + левая сторона экрана (сначала младший бит)

| | 3

+ ————— +

| | 4

+ — Верх изображения — + Начало изображения в пикселях от

| | 5 вверху экрана (сначала младший бит)

+ ————— +

| | 6

+ — Ширина изображения — + Ширина изображения в пикселях (сначала младший бит)

| | 7

+ ————— +

| | 8

+ — Высота изображения — + Высота изображения в пикселях (сначала LSB)

| | 9

+ — + — + — + — + — + —— + M = 0 — Использовать глобальную цветовую карту, игнорировать ‘пиксель’

| M | I | 0 | 0 | 0 | пиксель | 10 M = 1 — следует локальная цветовая карта, используйте пиксель

+ — + — + — + — + — + —— + I = 0 — Изображение отформатировано в последовательном порядке

I = 1 — изображение отформатировано в чересстрочном порядке

pixel + 1 — # бит на пиксель для этого изображения

Требования к положению и размеру изображения должны быть ограничены.

до размеров, определенных дескриптором экрана.С другой стороны

не обязательно, чтобы изображение занимало весь заданный экран.

МЕСТНАЯ ЦВЕТНАЯ КАРТА

Формат обмена графикой (GIF) Стр. 7

Спецификация

Локальная цветовая карта не является обязательной и определяется здесь для использования в будущем. Если

устанавливается бит ‘M’ байта 10 дескриптора изображения, затем цветовая карта

следует за дескриптором изображения, который применяется только к следующему изображению.

В конце изображения цветовая карта вернется к той, которая была определена после

дескриптор экрана.Обратите внимание, что поле ‘pixel’ байта 10

Дескриптор изображения используется только в том случае, если указана локальная цветовая карта. Этот

определяет параметры не только для размера пикселя изображения, но и определяет

количество последующих записей цветовой карты. Число битов на пиксель

также вернется к значению, указанному в дескрипторе экрана, когда

обработка изображения завершена.

РАСТРОВЫЕ ДАННЫЕ

Формат фактического изображения определяется как серия пикселей

значения индекса цвета, составляющие изображение.Пиксели сохраняются слева

последовательно вправо для ряда изображений. По умолчанию каждая строка изображения

пишутся последовательно, сверху вниз. В случае, если чересстрочная или

Бит I устанавливается в байте 10 дескриптора изображения, затем порядок строк

отображение изображения следует четырехступенчатому процессу, в котором изображение

заполнены широко расставленными рядами. Первый проход записывает каждую 8-ю строку,

начиная с верхнего ряда окна изображения. Второй проход пишет

каждый 8-й ряд, начиная с пятого ряда сверху.Третий проход

записывает каждую 4-ю строку, начиная с третьей строки сверху. Четвертый

pass завершает изображение, записывая каждую вторую строку, начиная с

второй ряд сверху. Графическое описание этого процесса приводится ниже:

Изображение

Строка Передача 1 Передача 2 Передача 3 Передача 4 Результат

————————————————— —

0 ** 1a ** ** 1a **

1 ** 4а ** ** 4а **

2 ** 3а ** ** 3а **

3 ** 4b ** ** 4b **

4 ** 2а ** ** 2а **

5 ** 4c ** ** 4c **

6 ** 3b ** ** 3b **

7 ** 4д ** ** 4д **

8 ** 1b ** ** 1b **

9 ** 4д ** ** 4д **

10 ** 3c ** ** 3c **

11 ** 4ф ** ** 4ф **

12 ** 2b ** ** 2b **

.. .

Значения пикселей изображения обрабатываются как серия показателей цвета.

которые соответствуют существующей цветовой карте. Результирующее значение цвета из

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

количество которых равно ширине изображения * пикселям высоты изображения, являются

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

упакован в соответствии с версией алгоритма сжатия LZW как

определено в Приложении C.

Формат обмена графикой (GIF) Стр. 8

Спецификация

ТЕРМИНАТОР GIF

Чтобы обеспечить синхронизацию для завершения GIF

файл изображения, декодер GIF обработает конец режима GIF, когда

шестнадцатеричный символ 0x3B или ‘;’ находится после обработки изображения.По соглашению программа декодирования приостанавливает работу и ожидает действия.

означает, что пользователь готов продолжить. Это может быть карета

возврат введен с клавиатуры или щелчком мыши. Для интерактивного

приложения, это действие пользователя должно быть передано на хост как

символ возврата каретки, чтобы хост-приложение могло продолжить работу.

Программное обеспечение декодирования обычно выходит из графического режима и возобновляет работу.

любой предыдущий процесс.

БЛОКИ РАСШИРЕНИЯ GIF

Чтобы обеспечить упорядоченное расширение определения GIF, механизм

для определения упаковки расширений в потоке данных GIF

необходимый.Конкретные расширения GIF должны быть определены и задокументированы

CompuServe, чтобы обеспечить управляемый путь улучшения.

Блоки расширения GIF упакованы аналогично используемому

по растровым данным, хотя и без сжатия. Базовая структура:

7 6 5 4 3 2 1 0 Байт #

+ ————— +

| 0 0 1 0 0 0 0 1 | 1 ‘!’ — Представитель блока расширения GIF

+ ————— +

| код функции | 2 Код функции расширения (от 0 до 255)

+ ————— + — +

| количество байтов | |

+ ————— + |

:: + — Повторяется столько раз, сколько необходимо

| байтов данных func | |

:: |

+ ————— + — +

.. . . . .

+ ————— +

| 0 0 0 0 0 0 0 0 | нулевой счетчик байтов (завершает блок)

+ ————— +

Блок расширения GIF может непосредственно предшествовать любому дескриптору изображения.

или произойти до GIF Terminator.

Все декодеры GIF должны распознавать существование GIF.

Блоки расширения и прочитайте их, если не можете обработать функцию

код. Это гарантирует, что старые декодеры смогут обрабатывать расширенные

Файлы изображений в формате GIF в будущем, но без дополнительных

функциональность.Формат обмена графикой (GIF) Стр. 9

Приложение А — Глоссарий

ГЛОССАРИЙ

Пиксель — наименьший элемент изображения графического изображения. Это обычно

соответствует одной точке на графическом экране. Разрешение изображения

обычно указывается в пикселях. Например довольно стандартный

формат графического экрана — 320 пикселей в ширину и 200 пикселей в высоту.

Каждый пиксель может отображаться как один из нескольких цветов в зависимости от

возможности графического оборудования.Растр — горизонтальный ряд пикселей, представляющий одну строку изображения. А

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

работать наиболее эффективно таким образом.

LSB — младший байт. Относится к соглашению о двухбайтовых числовых

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

значащий байт. Это соглашение типично для многих микрокомпьютеров.

Цветовая карта — список определений каждого цвета, используемого в изображении GIF.Эти желаемые цвета преобразуются в доступные цвета с помощью таблицы.

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

к индексу цвета вывода (оборудования). Пока цветная карта

определены в изображении GIF, цвета выходных пикселей будут

варьироваться в зависимости от используемого оборудования и его способности соответствовать определенным

цвет.

Чересстрочная развертка — метод отображения изображения GIF, в котором несколько проходов

создаются, выводя растровые строки, разнесенные друг от друга, чтобы обеспечить возможность

визуализация общего содержания всего изображения перед всеми

данные обработаны.Протокол B — разработанный CompuServe протокол передачи файлов с исправлением ошибок.

доступны в открытом доступе и реализованы в CompuServe VIDTEX

продукты. Этот механизм проверки ошибок будет использоваться при передаче

GIF-изображения для интерактивных приложений.

LZW — сложный алгоритм сжатия данных, основанный на работе, выполненной

Lempel-Ziv & Welch, который отличается очень эффективной однопроходной

кодирование и декодирование. Это позволяет распаковать изображение и

отображается одновременно.Исходная статья, из которой это

была адаптирована техника:

Терри А. Велч, «Методика высокопроизводительных данных

Сжатие », IEEE Computer, том 17 № 6 (июнь 1984 г.)

Этот базовый алгоритм также используется в файле ARC, являющемся общественным достоянием.

утилиты сжатия. CompuServe адаптировал LZW для GIF.

описано в Приложении C.

Формат обмена графикой (GIF) Стр. 10

Приложение B — Интерактивные последовательности

Обмен последовательностями GIF для интерактивной среды

Следующие последовательности определены для использования в опосредованном контроле.

между отправителем GIF и получателем GIF по интерактивной связи

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

загрузка статических файлов GIF, которые не считаются частью GIF

файл.

ЗАПРОС ВОЗМОЖНОСТЕЙ GIF

Последовательность GCE выдается с хоста и запрашивает интерактивный

Декодер GIF для возврата ответного сообщения, определяющего графику

параметры для декодера. Это включает в себя возврат информации о

доступные размеры экрана, количество поддерживаемых бит / цвет и количество

поддерживается цветовая детализация.Управляющая последовательность для GCE определяется как:

ESC [> 0 g (g — строчные буквы, для ясности вставлены пробелы)

(0x1B 0x5B 0x3E 0x30 0x67)

GIF ВОЗМОЖНОСТИ ОТВЕТ

Ответное сообщение о возможностях GIF возвращается интерактивным

GIF-декодер и определяет возможности отображения декодера для всех

графические режимы, поддерживаемые программным обеспечением. Обратите внимание, что это может

также включают графические принтеры, а также экран монитора. Генерал

формат этого сообщения:

#version; protocol {; dev, ширина, высота, биты цвета, разрешение цвета}…

‘#’ — символ идентификатора GCR (числовой знак)

версия — номер версии формата GIF; первоначально «87a»

protocol = ‘0’ — сквозной протокол не поддерживается декодером

Передача как прямой 8-битный поток данных.

protocol = ‘1’ — может использовать протокол исправления ошибок для передачи данных GIF.

интерактивно с хоста прямо на дисплей.

dev = ‘0’ — следующий набор параметров экрана

dev = ‘1’ — следующий набор параметров принтера

width — максимальная поддерживаемая ширина дисплея в пикселях

height — Максимальная поддерживаемая высота дисплея в пикселях

color-bits — Поддерживаемое количество битов на пиксель.Номер

поэтому поддерживаемые цвета — 2 ** цветовых бита.

color-res — Количество битов на компонент цвета, поддерживаемое в

цветовая палитра оборудования. Если разрешение цвета ‘0’, то нет

Таблица палитры оборудования доступна.

Обратите внимание, что все значения в GCR возвращаются как десятичные ASCII.

числа, и сообщение заканчивается символом возврата каретки.

Формат обмена графикой (GIF) Стр. 11

Приложение B — Интерактивные последовательности

Следующее сообщение GCR описывает три стандартных EGA

конфигурации без принтера; поток данных GIF можно обрабатывать

в протоколе исправления ошибок:

# 87a; 1; 0,320,200,4,0; 0,640,200,2,2; 0,640,350,4,2

ВОЙТИ В РЕЖИМ ГРАФИКИ GIF

В настоящее время определены две последовательности для вызова интерактивного GIF

декодер в действие.Единственная разница между ними в том, что разные

выбраны средства вывода. Эти последовательности:

ESC [> 1 g Отображение изображения GIF на экране

(0x1B 0x5B 0x3E 0x31 0x67)

ESC [> 2 g Отображение изображения непосредственно на подключенном графическом принтере.

При желании изображение может отображаться на экране как

Что ж.

(0x1B 0x5B 0x3E 0x32 0x67)

Обратите внимание, что символ ‘g’, завершающий каждую последовательность, находится в нижнем

кейс.ИНТЕРАКТИВНАЯ СРЕДА

Предполагаемая среда для передачи данных изображения GIF из

интерактивное приложение — это полный 8-битный поток данных от хоста к

микро. Все 256-символьные коды должны быть передаваемыми. Создание

8-битного тракта данных для связи, как правило, позаботятся о

прикладными программами хоста. Однако это зависит от получения

коммуникационные программы, поддерживающие GIF, чтобы иметь возможность получать и передавать

все 256 8-битных кодов для программного обеспечения декодера GIF.Формат обмена графикой (GIF) Стр. 12

Приложение C — Упаковка и сжатие изображений

Поток растровых данных, представляющий фактическое выходное изображение, может

быть представленным как:

7 6 5 4 3 2 1 0

+ ————— +

| размер кода |

+ ————— + — +

| количество байтов блока | |

+ ————— + |

:: + — Повторяется столько раз, сколько необходимо

| байты данных | |

:: |

+ ————— + — +

.. . . . .

+ ————— +

| 0 0 0 0 0 0 0 0 | нулевой счетчик байтов (завершает поток данных)

+ ————— +

Преобразование изображения из серии значений пикселей в

передаваемый или сохраненный символьный поток состоит из нескольких этапов. Вкратце

эти шаги:

1. Установите размер кода — определите количество битов, необходимых для

представляют фактические данные.

2. Сжатие данных — сжатие серии пикселей изображения в серию

кодов сжатия.3. Создайте серию байтов. Возьмите набор кодов сжатия и

преобразовать в строку из 8-битных байтов.

4. Упакуйте байты — упакуйте наборы байтов в блоки, которым предшествует

количество символов и вывод.

УСТАНОВИТЬ РАЗМЕР КОДА

Первый байт потока растровых данных GIF — это значение, указывающее

минимальное количество бит, необходимое для представления набора фактических пикселей

ценности. Обычно это то же самое, что и количество цветовых битов.

Однако из-за некоторых алгоритмических ограничений черно-белые изображения

которые имеют бит одного цвета, должны быть обозначены как имеющие размер кода 2.Это значение размера кода также подразумевает, что коды сжатия должны начинаться

на один немного дольше.

СЖАТИЕ

Алгоритм LZW преобразует серию значений данных в серию

коды, которые могут быть необработанными значениями или кодом, обозначающим серию значений.

По аналогии с текстовыми символами выходной код состоит из

символ или код, представляющий строку символов.

Формат обмена графикой (GIF) Стр. 13

Приложение C — Упаковка и сжатие изображений

Алгоритм LZW, используемый в GIF, алгоритмически совпадает с

стандартный алгоритм LZW со следующими отличиями:

1.Определен специальный код очистки, который сбрасывает все

параметры сжатия / распаковки и таблицы до состояния запуска.

Значение этого кода 2 ** . Например, если код

Указанный размер был 4 (изображение было 4 бита / пиксель) значение кода очистки

будет 16 (10000 двоичных). Код очистки может появиться в любой момент

в потоке данных изображения и, следовательно, требует, чтобы алгоритм LZW

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

поток данных.

2. Определен код конца информации, который явно указывает

конец потока данных изображения. Обработка LZW прекращается, когда это

код встречается. Это должен быть последний код, выводимый кодировщиком.

для изображения. Значение этого кода +1.

3. Первое доступное значение кода сжатия +2.

4. Выходные коды имеют переменную длину, начиная с +1.

бит на код, до 12 бит на код.Это определяет максимальный код

значение 4095 (шестнадцатеричный FFF). Всякий раз, когда значение кода LZW превысит

текущая длина кода, длина кода увеличивается на единицу. В

упаковка / распаковка этих кодов должна быть изменена, чтобы отразить

новая длина кода.

СОЗДАТЬ 8-БИТНЫЕ БАЙТЫ

Поскольку сжатие LZW, используемое для GIF, создает серию

коды переменной длины, от 3 до 12 бит каждый, эти коды должны

преобразовать в серию 8-битных байтов, которые будут символами

фактически хранится или передается.Это обеспечивает дополнительное сжатие

изображение. Коды формируются в поток битов, как если бы они были

упаковывается справа налево, а затем снимается по 8 бит за раз для вывода.

Предполагая массив символов из 8 бит на символ и используя 5-битные коды

для упаковки пример макета будет похож на:

байт n байт 5 байт 4 байт 3 байт 2 байт 1

+ -.....----- + -------- + -------- + -------- + -------- + - ------- +

| и так далее | hhhhhggg | ggfffffe | eeeedddd | dcccccbb | bbbaaaaa |

+ -.....----- + -------- + -------- + -------- + -------- + ---- ---- +

Обратите внимание, что физическая компоновка упаковки будет меняться по мере того, как

количество бит на изменение кода сжатия, но концепция остается

такой же.

УПАКОВКА БАЙТОВ

После создания байтов они группируются в блоки для

вывод, предшествующий каждому блоку от 0 до 255 байтов с количеством символов

байт. Блок с нулевым счетчиком байтов завершает поток растровых данных.

для данного изображения. Эти блоки - это то, что на самом деле выводится для

Формат обмена графикой (GIF) Стр. 14

Приложение C - Упаковка и сжатие изображений

Изображение в формате GIF.Этот формат блока имеет побочный эффект, позволяющий декодировать

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

чтение количества блоков с последующим пропуском данных.

Формат обмена графикой (GIF) Стр. 15

Приложение D. Обработка нескольких изображений

Поскольку поток данных GIF может содержать несколько изображений, он

необходимо для описания обработки и отображения такого файла. Так как

дескриптор изображения позволяет размещать изображение внутри

логический экран, можно определить последовательность изображений, которые могут

каждый будет частичным экраном, но в целом заполнит весь экран.В

Рекомендации по работе с ситуациями с несколькими изображениями:

1. Между изображениями нет паузы. Каждый обрабатывается немедленно как

видит декодер.

2. Каждое изображение явно перезаписывает любое изображение, уже находящееся на экране.

внутри своего окна. Единственная очистка экрана в начале

и конец процесса изображения GIF. См. Обсуждение GIF

терминатор.

.


GIF или PNG? — Качественные веб-советы

Черновик — GIF или PNG

PNG в сравнении с GIF

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

• GIF (сокращение от Graphics Interchange Format) был разработан в конце 1980-х годов и до сих пор широко используется.
• PNG (переносимая сетевая графика) была разработана примерно в 1995 году, стала рекомендацией W3C в 1996 году и была широко реализована в большинстве веб-браузеров уже в 1998 году.

GIF

Формат GIF — это формат, который сжимает файлы с помощью алгоритма LZW, который сохраняет следы цветов и помогает уменьшить размер файла.

Сильной стороной

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

Одна из проблем, связанных с форматом GIF, заключается в том, что алгоритм LZW был защищен в США патентом, принадлежащим компании Unisys. Срок действия патента Unisys LZW в США истек 20 июня 2003 г.Патенты LZW: с истекшим сроком действия в Канаде, Франции, Италии, Германии, Великобритании и Японии.

PNG

PNG (Portable Network Graphics), расширяемый формат файлов для портативного, хорошо сжатого хранилища растровых изображений без потерь. PNG обеспечивает бесплатную замену GIF, а также может заменить многие распространенные варианты использования TIFF. Поддерживаются изображения с индексированными цветами, оттенками серого и истинными цветами, а также дополнительный альфа-канал. Глубина дискретизации составляет от 1 до 16 бит.

Для Интернета у PNG действительно есть три основных преимущества перед GIF:

• альфа-каналов (переменная прозрачность),
• кроссплатформенная гамма-коррекция (управление яркостью изображения) и цветокоррекция
• двухмерное чересстрочное отображение (метод прогрессивного отображения).

PNG также сжимает лучше, чем GIF почти во всех случаях (от 5% до 25% в типичных случаях).

Хотя в некоторых случаях важно отметить, что PNG может плохо поддерживать старые браузеры или определенные функции, такие как прозрачность. Чтобы узнать об уровне поддержки PNG в различных браузерах, прочтите:

Дополнительная литература

О «Советы по обеспечению качества»

W3C QA Tips — это короткие документы, объясняющие полезные
кусочки знаний для веб-разработчиков или дизайнеров, размещенные и произведенные службой контроля качества
Группа интересов в W3C.

Пока подсказки внимательно изучаются участниками группы, их не следует видеть
как ничего, кроме информативной мудрости, и особенно, они , а не
нормативные технические характеристики W3C.

Узнайте больше о советах, как представить свои собственные жемчужины мудрости и найти всех других QA
советы в Указателе советов.

Какие есть альтернативы анимированному GIF? APNG, WebP, AVIF, MNG, FLIF?

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

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

Изображение GIF, 781 Кб, 67 кадров

APNG

Анимированная переносимая сетевая графика

https://en.wikipedia.org/wiki/APNG

APNG — это расширение формата PNG (хотя оно официально отклонено группой PNG). Он работает аналогично GIF, поддерживая 24-битные изображения (что позволяет использовать намного больше цветов, чем GIF), 8-битный альфа-канал (частичная прозрачность) и лучшее сжатие.

Он разработан в 2008 году, но долгое время его адаптация была невысокой, только Mozilla поддерживала APNG. В последнее время он получил более широкую адаптацию с Safari, Chrome и Opera, добавив поддержку APNG.
В настоящее время он имеет самую широкую поддержку в веб-браузерах среди альтернатив GIF — он поддерживается Firefox, Safari, Opera, Chrome и Edge, оставляя только IE и некоторых пользователей мобильных браузеров. Он также обеспечивает некоторую степень обратной совместимости в приложениях, которые не поддерживают APNG, позволяя отображать первый кадр как обычное изображение PNG.

Актуальная диаграмма текущей поддержки APNG в браузерах: https://caniuse.com/#search=apng.

Ezgif позволяет создавать файлы APNG и редактировать APNG с помощью большинства наших инструментов.

Изображение APNG, 2.33 МБ, 67 кадров

WebP

Современный формат изображений, разработанный Google

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

WebP — это немного более новый формат изображений, впервые анонсированный в 2010 году. Подобно APNG, он также поддерживает 24-битные изображения и 8-битную прозрачность.Он поддерживает сжатие с потерями и без потерь, что позволяет в некоторых случаях достичь очень небольшого размера файла или получить полное качество без потерь, что делает его очень универсальным форматом. Будучи совершенно новым форматом, он также не выходит из строя, отображая только неработающее изображение или замещающий текст. Как и APNG, в последнее время он получил поддержку почти во всех основных веб-браузерах, за исключением IE.

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

Поддержка WebP в браузерах: https://caniuse.com/#search=webp.

Ezgif позволяет создавать, редактировать и конвертировать файлы WebP.

Изображение WebP, 1,5 МБ, 67 кадров

WebP, более сжатый, 531 КБ, 67 кадров

AVIF

Формат файла изображения AV1

https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)

AVIF — это спецификация формата файла изображения для хранения изображений или последовательностей изображений, сжатых с помощью AV1, в формате файла HEIF.Спецификация AVIF была завершена в феврале 2019 года, так что это новейший формат в списке, но он уже поддерживается Google Chrome и Opera. Поддержка Firefox в настоящее время находится в разработке. Этот формат выглядит очень многообещающим со значительным уменьшением размеров файлов. Он также поддерживает сжатие с потерями и без потерь.

Актуальная диаграмма текущей поддержки AVIF в браузерах: https://caniuse.com/#search=avif.

Ezgif позволяет создавать, конвертировать, разбивать и редактировать файлы AVIF с помощью большинства наших инструментов.

Изображение AVIF, 87,4 Кб, 67 кадров

MNG

Сетевая графика с несколькими изображениями

https://en.wikipedia.org/wiki/Multiple-image_Network_Graphics/

MNG — это еще один формат анимированных изображений, связанный с PNG. Он появился раньше APNG, и некоторые поставщики браузеров экспериментировали с ним в прошлом, но в настоящее время он изначально не поддерживается ни одним из основных веб-браузеров. Тем не менее, что интересно, он имеет довольно хорошую поддержку инструментов, в основном благодаря поддержке imagemagick, которая используется в качестве библиотеки обработки изображений или бэкэнда во многих других программах.

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

Демонстрационное изображение MNG: https://ezgif.com/images/format-demo/butterfly.mng, 2,9 МБ, 67 кадров.

FLIF

Free Lossless Image Format

https: // flif.Информация/

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

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

Изображение FLIF, 699 КБ, 67 кадров
(с использованием элемента и Poly FLIF)

Формат подписи изображения GIF: пример документации и восстановления

Формат подписи GIF: пример документации и восстановления

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

Формат

GIF поддерживает до 8 бит на пиксель для каждого изображения, позволяя одному изображению ссылаться на его собственную палитру, содержащую до 256 различных цветов, выбранных из 24-битного цветового пространства RGB.

Он поддерживает анимацию и позволяет использовать отдельную палитру до 256 цветов для каждого кадра.

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

Файлы

GIF начинаются с заголовка фиксированной длины ( GIF87a или GIF89a ), где 7a и 9a указывают версию, за которой следует логический дескриптор экрана фиксированной длины, дающий размер и другие характеристики логического дисплея .Дескриптор экрана также может указывать наличие и размер следующей таблицы глобального цвета (если она есть).

После этого файл делится на сегменты, каждый из которых представлен 1-байтовым префиксом:

• Изображение — введено шестнадцатеричным значением: 2C, знаком запятой (, )
• Блок расширения — вводится шестнадцатеричным значением: 21, восклицательным знаком (! )
• Трейлер — один байт шестнадцатеричного значения: 3B, точка с запятой (; ), который должен быть последним байтом файла

Изображение начинается с дескриптора изображения фиксированной длины, который может определять наличие и размер локальной таблицы цветов (которая следует за следующей, если она есть).Далее следуют данные изображения: один байт, указывающий разрядность незакодированных символов (которая должна быть не менее 2 битов, даже для двухцветных изображений), за которым следует связанный список субблоков, содержащих данные в кодировке LZW.

Блоки расширения (блоки, которые «расширяют» определение 87a с помощью механизма, уже определенного в спецификации 87a) состоят из префикса, дополнительного байта, определяющего тип расширения, и связанного списка субблоков с данными расширения .

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

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

Разберем образец

При проверке двоичных данных файла sample.gif с помощью любого Hex Viewer, например Active @ Disk Editor.
мы видим, что он начинается с подписи GIF8 (шестнадцатеричный: 47 49 46 38), затем идет версия 9a (шестнадцатеричный: 39 61), затем идет логическая ширина экрана: 280 пикселей (шестнадцатеричное 18 01)
и высотой 90 пикселей (шестнадцатеричное: 5a 00).Все многобайтовые значения в структурах GIF находятся в обратном порядке (младший байт идет первым).

Байт флагов со смещением 0A (шестнадцатеричный) равен E6 (шестнадцатеричный), установлен старший бит, который показывает, что глобальная таблица цветов следующая, ее размер рассчитывается как:
(1 << (( 0xE6 & 0x07) + 1)) * 3 = 384 байта. Добавьте 13 (размер заголовка GIF) к 384 (размер GCT), результат будет 397. Таким образом, при смещении 397 (шестнадцатеричное: 018D) начинается первый блок данных.

Первый блок начинается с восклицательного знака (! или 21 шестнадцатеричный), что означает, что это блок расширения.Размер блока расширения фиксированный и составляет 8 байтов.

Добавьте 8 байтов к 397 и перейдите к следующему блоку со смещением 405 (шестнадцатеричное: 0195).

Второй блок начинается со знака запятой (, или 2C шестнадцатеричный), что означает, что это блок изображения. Он имеет заголовок фиксированного размера (11 байт).

Последний байт заголовка изображения (по смещению 019F в шестнадцатеричном формате) является флагом GCT: 07 . Размер GCT рассчитывается так же, как и в первичном заголовке GIF. Старший бит (шестнадцатеричный: 80) НЕ установлен, поэтому GCT не выполняется и вычисления для таблицы цветов не требуются.После заголовка изображения следуют подблоки. Первый подблок имеет размер в первом байте, который равен 255 (шестнадцатеричное значение FF со смещением: 01A0 шестнадцатеричное).

Смещение следующего субблока — 672 (405 + 11 + 1 + 255). Продолжайте повторять блоки и подблоки. Этот образец имеет 4 субблока по 255 байтов каждый со смещениями: 01A0, 02A0, 03A0, 04A0 в шестнадцатеричном формате и один субблок 126 байтов (шестнадцатеричный: 7E) со смещением 05A0 шестнадцатеричный. По смещению 061F hex (05A0 + 7E hex) есть нулевой байт 00 , который говорит, что в текущем блоке больше нет субблоков.

Переход к следующему байту (шестнадцатеричное смещение 0620). Следующий блок начинается с точки с запятой (; или 3B в шестнадцатеричном формате), которая указывает на конец файла. Таким образом, размер этого файла изображения GIF составляет 1569 байтов (шестнадцатеричное: 0620 + 1).

Дополнительная информация: Спецификация формата GIF

Заголовок файла GIF:

struct _gif_header
{
    uint32 SignatureHi; // "GIF8"
    uint16 SignatureLo; // Версия GIF: «7a» или «9a»
    uint16 Ширина; // логическая ширина экрана в пикселях
    uint16 Высота; // логическая высота экрана в пикселях
    uint8 Flags; // Спецификация глобальной таблицы цветов
    uint8 Фон; //  фоновый цвет
    uint8 Range; // соотношение сторон пикселя по умолчанию
};
 

форматов файлов изображений | Форматы файлов GIF, JPG и PNG

Путь // www.yourhtmlsource.com → Изображения → ФОРМАТЫ ФАЙЛОВ ИЗОБРАЖЕНИЯ

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

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

Навигация по страницам:
GIF — формат обмена графикой
| JPEG — Объединенная группа экспертов по фотографии
| PNG — переносимая сетевая графика

Эта страница последний раз обновлялась 21.08.2012

GIF — формат обмена графикой

8-битный формат GIF

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

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

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

GIF-файлы

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

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

GIF-файлов (произносятся по-разному: «gif» или «jif») — очень хороший формат для большей части графики, которую вы будете использовать на своем сайте, хотя PNG ниже во многих отношениях лучше. Экспериментирование — ключ к успеху.

Примеры GIF

Это первое изображение указывает на оптимальные свойства изображения в формате GIF — маленькое, с низким содержанием цветов и с большими областями непрерывного цвета.

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

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

Наконец-то у нас есть довольно хламовый анимированный GIF, который я создал за десять минут. Ура. Этот единственный файл GIF просто содержит множество кадров анимации, которые ваш браузер просматривает.

JPEG — Объединенная группа экспертов по фотографии

16-битный формат JPEG (обычно пишется без E) был разработан с учетом фотографий . Это , способный отображать миллионы цветов одновременно, без необходимости в дизеринге, обеспечивая сложное смешение оттенков, которое встречается на фотографических изображениях.

JPG используют сложный алгоритм сжатия, который можно применять по скользящей шкале. Сжатие достигается за счет «забвения» определенных деталей изображения, которые JPG затем попытается заполнить позже, когда оно отображается. Вы можете сохранить JPG с 0% сжатием для получения идеального изображения с большим размером файла; или со сжатием 80% для небольшого, но заметно ухудшенного изображения. При практическом использовании настройка сжатия около 60% приведет к оптимальному балансу качества и размера файла , не допуская, чтобы сжатие с потерями нанесло слишком большой ущерб.

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

Формат »JPEG (« jay-peg »), вероятно, в какой-то момент будет заменен обновленным форматом JPEG2000.

Примеры JPEG

PNG — переносимая сетевая графика

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

Одна из версий формата PNG-8 аналогична формату GIF. Он может быть сохранен с максимум 256 цветами и поддерживает 1-битную прозрачность. Размеры файлов при сохранении в соответствующем редакторе изображений, таком как FireWorks, будут заметно меньше, чем у аналога в формате GIF, поскольку PNG-файлы сохраняют свои данные о цвете более эффективно.

PNG-24 — это еще одна разновидность PNG с поддержкой 24-битного цвета, позволяющая использовать диапазоны цветов, аналогичные полноцветному JPG.PNG-24 никоим образом не является заменой для JPG, потому что это формат сжатия без потерь. Это означает, что размеры файлов могут быть довольно большими по сравнению с сопоставимым JPG.

Основная черта

PNG — альфа-каналы. Вместо рудиментарных опций прозрачности в других форматах (где пиксель либо прозрачный, либо непрозрачный), альфа-канал может указывать непрозрачность любого пикселя из диапазона 0–255 , где 0 — полностью прозрачный, а 255 — полностью непрозрачный. Это позволяет создавать графику, которую можно разместить поверх любого цвета фона, и при этом сохранится эффект полупрозрачности, при этом фон будет виден через непрозрачные пиксели.

Проблема с этим — и должна была быть одна — в том, что IE6 не поддерживает альфа-каналы. Как только выйдет новая версия IE с этой жизненно важной поддержкой, вы должны будете увидеть, как этот эффект проявляется на сайтах модных дизайнеров в Интернете.

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

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

.