Формат графических файлов: Форматы графических файлов: RAW, JPG, PNG, TIFF,

Основными форматами веб-файлов являются файлы gif (произносится как «jiff»), jpeg («jay-peg») и, в гораздо меньшей степени, файлы png («ping»). Все три распространенных веб-графических формата — это так называемая растровая графика, состоящая из шахматной сетки из тысяч крошечных цветных квадратных элементов изображения или пикселей. Растровые файлы представляют собой файлы знакомых типов, создаваемые сотовыми телефонами и цифровыми камерами, и их легко создавать, редактировать, изменять размер и оптимизировать для использования в Интернете с помощью таких широко доступных инструментов, как Adobe Photoshop или Elements, Corel Paint Shop Pro и Painter и других. программы для редактирования фотографий.

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

• Характер изображения (является ли изображение «фотографической» коллекцией плавных тональных переходов или схематичным изображением с резкими краями и линиями?)
• Влияние различных видов сжатия файлов на качество изображения
• Эффективность техники сжатия при получении файла наименьшего размера, который выглядит хорошо

GIF Графика

Информационная служба CompuServe в 1980-х годах популяризировала формат обмена графическими данными (gif) как эффективное средство передачи изображений по сетям передачи данных.В начале 1990-х годов дизайнеры World Wide Web приняли GIF за его эффективность и широкое знакомство. Многие изображения в Интернете представлены в формате GIF, и практически все веб-браузеры, поддерживающие графику, могут отображать файлы GIF. GIF-файлы включают в себя схему сжатия «без потерь», позволяющую поддерживать минимальный размер файла без ущерба для качества. Тем не менее, файлы GIF представляют собой 8-битную графику и, следовательно, могут вместить только 256 цветов.

Формат файла gif использует относительно базовую форму сжатия файлов (Lempel Ziv Welch, или lzw), которая устраняет недостатки в хранении данных без потери данных или искажения изображения.Схема сжатия lzw лучше всего подходит для сжатия изображений с большими полями однородного цвета, такими как логотипы и диаграммы. Он гораздо менее эффективен при сжатии сложных «фотографических» изображений с множеством цветов и сложных текстур (рис. 11.4).

Рис. 11.4. Сжатие LZW, встроенное в графический формат GIF, очень эффективно для сохранения схематической графики (справа), но плохо при сжатии более сложных фотографических изображений (слева).

Дизеринг

Полноцветные фотографии могут содержать практически бесконечный диапазон цветовых значений; GIF-изображения могут содержать не более 256 цветов.Процесс уменьшения количества цветов до 256 или менее называется дизерингом. При сглаживании пиксели двух цветов совмещаются, чтобы создать иллюзию присутствия третьего цвета. Размывание фотографического изображения до 256 цветов приводит к неприятно зернистому изображению (рис. 11.5). В прошлом этот метод был необходим для создания изображений, которые выглядели бы приемлемыми на 256-цветных компьютерных экранах, но с сегодняшними полноцветными дисплеями редко возникает необходимость размывать изображение. Если вам нужен более широкий диапазон цветов, чем может обрабатывать формат gif, попробуйте использовать редактор изображений, чтобы сохранить изображение в форматах jpeg и png (описано ниже), сравнить полученные размеры файлов и качество изображения и выбрать оптимальный баланс размер файла и качество изображения.

Рисунок 11.5 — Сглаживание полноцветной фотографии (слева) до 256-цветного изображения (справа) приводит к изображению с большим количеством визуального шума и резкими переходами между пикселями разных цветов. К счастью, такие компромиссы в настоящее время остались в прошлом, поскольку большинство пользователей теперь имеют мониторы «настоящих цветов», которые могут отображать тысячи или миллионы цветов.

Улучшение сжатия GIF

Вы можете воспользоваться характеристиками сжатия lzw, чтобы повысить его эффективность и тем самым уменьшить размер вашей GIF-графики.Стратегия состоит в том, чтобы уменьшить количество цветов в вашем GIF-изображении до минимально необходимого количества и удалить цвета, которые не требуются для представления изображения. Графическое изображение не может иметь более 256 цветов, но может иметь меньше. Изображения с меньшим количеством цветов будут сжиматься более эффективно при сжатии lzw. Например, при создании GIF-графики в Photoshop не сохраняйте каждый файл автоматически с 256 цветами. Простое изображение в формате gif может хорошо выглядеть при 8, 16 или 32 цветах, а экономия размера файла может быть значительной.Для максимальной эффективности в графике GIF используйте минимальное количество цветов, которое дает хороший визуальный результат.

чересстрочный GIF

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

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

Прозрачный GIF

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

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

Рисунок 11.6 — Страшный «белый ореол» в прозрачной графике GIF.

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

JPEG графика

Другим форматом графических файлов, обычно используемым в Интернете для минимизации размеров графических файлов, является схема сжатия Joint Photographic Experts Group (jpeg). В отличие от графики gif, изображения в формате jpeg представляют собой полноцветные изображения, которые выделяют не менее 24 бит памяти для каждого пикселя, в результате чего изображения могут содержать 16,8 миллиона цветов.

jpeg широко используются фотографами, художниками, графическими дизайнерами, медицинскими специалистами, историками искусства и другими группами, для которых важно качество изображения и точность цветопередачи.Форма файла JPEG под названием «прогрессивный JPEG» дает графику JPEG такой же постепенно построенный дисплей, как в чересстрочных гифках. Как и чересстрочные GIF-изображения, изображения в прогрессивном формате JPEG часто загружаются на страницу дольше, чем стандартные изображения JPEG, но они предлагают пользователю более быстрый предварительный просмотр.

использует сложную математическую технику, называемую дискретным косинусным преобразованием, для получения скользящей шкалы сжатия графики. Вы можете выбрать степень сжатия, которую хотите применить к изображению в формате JPEG, но при этом вы также определяете качество изображения.Чем больше вы сжимаете изображение с помощью сжатия JPEG, тем больше вы ухудшаете его качество. jpeg может достигать невероятных коэффициентов сжатия, сжимая графику до целых ста раз меньше, чем исходный файл. Это возможно потому, что алгоритм jpeg отбрасывает «ненужные» данные при сжатии изображения и поэтому называется техникой сжатия с «потерями». Обратите внимание на рис. 11.7, как увеличение сжатия JPEG постепенно ухудшает детали изображения. Клетчатый рисунок и темные «шумовые» пиксели в сжатом изображении — это классические артефакты сжатия JPEG.Обратите внимание на сильный шум сжатия и искажения, представленные на изображении ниже, особенно вокруг переднего края головы рыбы.

Рисунок 11.7 — Сжатие JPEG обходится дорого: значительное увеличение визуального шума и других артефактов сжатия, которые ухудшают качество изображения при чрезмерном использовании.

Сохраните ваши оригинальные несжатые изображения!

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

PNG графика

Portable Network Graphic (png) — это формат изображения, разработанный консорциумом разработчиков графического программного обеспечения в качестве непатентованной альтернативы формату изображения GIF. Как уже упоминалось выше, CompuServe разработал формат gif, а gif использует запатентованную схему сжатия lzw, которая была запатентована Unisys Corporation, а это означает, что любой разработчик графического инструмента, создающий программное обеспечение, сохраненное в формате gif, должен был платить роялти Unisys и CompuServe.Срок действия патента истек, и разработчики программного обеспечения могут свободно использовать формат GIF.

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

PNG поддерживает полноцветные изображения и может использоваться для фотографических изображений. Однако, поскольку он использует сжатие без потерь, результирующий файл намного больше, чем при сжатии JPEG с потерями. Как и gif, png лучше всего справляется с штриховыми рисунками, текстом и логотипами — изображениями, которые содержат большие области однородного цвета с резкими переходами между цветами. Изображения этого типа, сохраненные в формате png, выглядят хорошо и имеют такой же или даже меньший размер файла, чем при сохранении в формате GIF. Однако широкое распространение формата png было медленным.Частично это связано с несовместимой поддержкой в ​​веб-браузерах. В частности, Internet Explorer не полностью поддерживает все функции PNG-графики. В результате большинство изображений, подходящих для сжатия в формате png, используют вместо этого формат gif, который имеет преимущество полной и согласованной поддержки браузера.

Ian’s Graphics Site — форматы файлов компьютерной графики

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

Введение в растровую графику

Что такое растровая графика?

Растровое изображение (или «растровое» изображение) — это изображение, состоящее из строк и столбцов отдельных цветных точек, называемое пикселей (= элементы изображения).Этот пример фото Улуру состоит из сетки 57 600 пикселей (ширина 240 × 240 высокий).

Растровые графические данные

Кто бы ни придумал фразу — «Картина стоит тысячи слов» — вероятно, никогда не понимал, насколько это будет правдой по отношению к компьютерной графике. При хранении в виде несжатого растрового изображения файл, этот образ занимает 172 854 байт дискового пространства. Чтобы поместить это в контекст, это о 50 страниц письма (более 25 000 слов!)

Сжатие растрового изображения

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

Сжатие растровых графических данных

Существует много способов сжатия данных изображения. Ниже приводится краткое нетехническое описание некоторых распространенных методы сжатия.

Кодировка длины пробега

(красный: зеленый: зеленый: зеленый: зеленый: синий) → (КРАСНЫЙ: 4 × ЗЕЛЕНЫЙ: СИНИЙ)

Одно простое сжатие графики использует то, что называется «Run Length Encoding».Если есть несколько точек одного цвета сразу друг за другом данные можно сжать, сохранив «Длина цикла» (количество точек) с последующим цветом стоимость.

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

Кодировка на основе токенов

(КРАСНЫЙ: ЯНТАРЬ: ЗЕЛЕНЫЙ: КРАСНЫЙ: ЯНТАРЬ: ЗЕЛЕНЫЙ) → (Фары: фары)

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

Например, если бы я знал, что мне нужно написать «Персональный компьютер» несколько раз в одном абзаце, я бы сначала написал: «Персональный компьютер (ПК)», далее используйте только аббревиатуру: «ПК».

Кодирование на основе визуальных деталей

(НЕБО: НЕБО: НЕБО: ТРАВА: ТРАВА: ТРАВА) → (НЕБО: ТРАВА: ТРАВА)

Современные методы сжатия изображений намного более математически интенсивны и не были действительно жизнеспособными до компьютеров стало достаточно быстро.Обычно они делят изображение на маленькие блоки (обычно 8 × 8 пикселей), а затем сохраняют только как столько, сколько «визуально» необходимо.

Например, если блок содержит только небо, может быть отброшено довольно много данных, потому что есть только незначительный цвет вариации между соседними синими пикселями. Если блок содержит траву, потребуется гораздо больше данных, потому что трава более подробный. Это все равно что читать кому-то документ и говорить: «и т. Д. И т. Д.» на неважных разделах, затем чтение важные детали в полном объеме.

Уменьшение цвета

(РУБИНОВЫЙ КРАСНЫЙ: ИЗУМРУДНО-ЗЕЛЕНЫЙ: САПФИР-СИНИЙ) → (КРАСНЫЙ: ЗЕЛЕНЫЙ: СИНИЙ)

Альтернативой сжатию является уменьшение объема данных, необходимых для хранения каждой точки. С фотографическими изображениями, каждый точка нуждается в трех байтах данных, что позволяет этой точке иметь один из 16,7 миллионов цветов. Если вы уменьшите количество допустимые цвета, вы уменьшаете необходимое хранилище данных. Два байта данных допускают 65 536 цветов, один байт позволяет 256 цветов, в то время как для 16 цветов требуется только половина байта.С человеческой точки зрения это похоже на написание предложения с слова из 5 букв или меньше.

ПРИМЕЧАНИЕ. Большинство форматов сжатых файлов теряют качество исходного изображения. Если вы будете работать над изображением (например, ретуширование для удаления пятен), вы должны сохранять его в несжатом формате (например, .BMP = формат растрового изображения), пока не получите завершил работу над этим. В противном случае вы будете постепенно терять качество при каждой загрузке и повторном сохранении изображения (аналогично когда вы делаете ксерокопию фотокопии).

Расширения растровых графических файлов

растровые файлы в основном идентифицируются по добавочных . Например, файл с именем «Image.bmp» является файлом «BMP» (Bitmap), в то время как другой файл называется «Image.gif» это файл «GIF», а другой файл с именем «Image.jpg» является файлом «JPG» (или «JPEG»). Кроме того, сообщая нам формат, в котором данные хранятся в файле (т. е. как они сжаты), они также сообщают системе, какую программу использовать с этим файлом и, следовательно, какой значок отображать для этого файла.

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

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

Обеспечение отображения расширений графического файла

• Windows 95:
  1. Пуск> Программы> Windows Explorer;
  2. Нажмите в меню «Вид» и выберите «Параметры»;
  3. Снимите флажок «Скрыть расширения файлов MS-DOS …» и нажмите «ОК».
• Windows 98:
  1. Пуск> Программы> Windows Explorer;
  2. Нажмите в меню «Вид» и выберите «Параметры папки»;
  3. Нажмите на вкладку «Вид»;
  4. Снимите флажок «Скрыть расширения файлов для известных типов файлов» и нажмите «ОК».
• Windows XP:
  1. Пуск> Программы> Windows Explorer;
  2. Откройте меню «Инструменты», меню «Параметры папки»;
  3. Нажмите на вкладку «Вид» и выберите «Параметры»;
  4. Снимите флажок «Скрыть расширения для известных типов файлов» и нажмите «ОК».

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

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

GIF (произносится «Jiff»)

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

Образец GIF-файла

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

Пример сжатия файлов GIF

Вот статистика сжатия для образца логотипа справа:

• 240 × 240 пикселей, до 16 цветов;

• Несжатый растровый файл = 28 918 байт;

• Сжатый файл GIF = 3447 байт = степень сжатия 88%.

Типичное Использование

Логотипы, заголовки, кнопки, границы, простые диаграммы, анимация.

Дополнительные функции

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

JPG (произносится «Jay-Peg»)

Этот формат был разработан специально для обработки фотографий фотографического типа с разрешением до 16.7 миллионов цветов. куда предыдущие форматы файлов редко достигают сжатия даже 40%, JPG регулярно достигает от 80 до 90% или лучше! Это сжатие «с потерями» (т. е. при получении изображение потеряло некоторые детали оригинала) с выбираемым «качеством» настройка, позволяющая найти компромисс между качеством изображения и размером файла.

Образец файла JPG

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

Образец сжатия файлов JPG

Вот статистика сжатия для образца фотографии справа:

• 240 × 240 пикселей, до 16,7 миллионов цветов;

• Несжатый растровый файл = 172 854 байта;

• Сжатый файл JPG = 26 838 байт = сжатие 84%.

Типичное Использование

Фотографии, изделия, декорации, лица, текстуры, фоны.

PNG (произносится «Пинг»)

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

Образцы файлов PNG

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

Образец сжатия файлов PNG — логотип

Вот статистика сжатия для образца логотипа справа:

• 240 × 240 пикселей, до 16 цветов;

• Несжатый растровый файл = 28 918 байт;

• Сжатый файл PNG = 2769 байт = сжатие 90%.

Это работает чуть лучше , чем эквивалентное сжатие GIF-файла на 88%.

Образец сжатия файлов PNG — Фото

Вот статистика сжатия для образца фотографии справа:

• 240 × 240 пикселей, до 16,7 миллионов цветов;

• Несжатый растровый файл = 172 854 байта;

• Сжатый файл PNG = 116 163 байта = 33% сжатия.

Это намного хуже , чем эквивалентное сжатие файла JPG на 84%.

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

Дополнительные функции

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

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

Введение в векторную графику

Что такое векторная графика?

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

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

Увеличенная растровая графика

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

увеличенная векторная графика

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

общих форматов файлов векторной графики

Несмотря на то, что форматы файлов векторной графики существуют уже много лет — и сегодня их несколько (особенно в издательской индустрии) — существует только один формат, который в настоящее время поддерживается веб-браузерами: недавно представленный SVG (= масштабируемая векторная графика).

SVG = Масштабируемая векторная графика

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

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

Метод 1: Отдельный файл SVG

Это изображение флага хранится в отдельном файле:

FlagOfAustralia.svg

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

Метод 2: встроенное изображение SVG

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

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

Дополнительные функции

Каждый элемент изображения SVG может быть анимирован или иным образом изменен веб-браузерами.Это открывает некоторые экстраординарные возможности — которые только сейчас начинают изучать веб-разработчики.

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

Сводка форматов графических файлов

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

— Ян Фигген, 18 января 2018 года

png — Как работают графические типы файлов?

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант

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

Существует ряд различных типов графических форматов файлов. каждый Тип хранит графические данные по-другому. Растровое изображение, вектор и форматы метафайлов на сегодняшний день являются наиболее часто используемыми форматами, и мы сосредоточиться на них. Тем не мение, Есть и другие типы форматов — сцена, анимация, мультимедиа, гибрид, гипертекст, гипермедиа, 3D, виртуальное моделирование язык реальности (VRML), аудио, шрифт и страница язык описания (PDL).Увеличивающийся Популярность Всемирной паутины сделала некоторые из этих форматов более популярны, и мы ожидаем повышения интереса к ним в будущем. Хотя большинство этих типов файлов выходят за рамки этой книги, мы представим их в этом разделе.

растровых форматов

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

Microsoft BMP, PCX, TIFF и TGA являются примерами часто используемых растровых форматов. Глава 3 описывает построение растровых файлов в некоторых деталях.

Векторные форматы

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

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

AutoCAD DXF и Microsoft SYLK — примеры часто используемых векторов форматы.Глава 4, Векторные файлы , описывает конструкцию вектора файлы в некоторых деталях.

Форматы метафайлов

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

WPG, Macintosh PICT и CGM являются примерами часто используемых метафайлов форматы. Глава 5, Метафайлы , описывает конструирование метафайлов в некоторые детали.

Форматы сцены

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

Форматы анимации

Форматы анимации существуют уже давно. Основная идея это из флипбуков, с которыми ты играл в детстве; с этими книгами ты быстро отображать одно изображение поверх другого, чтобы сделать его появляются, как будто объекты на изображении движутся. Очень примитивно форматы анимации хранят целые изображения, которые отображаются в последовательности, обычно в цикле.Чуть более продвинутые форматы хранят только один изображение, но несколько цветных карт для изображения. При загрузке в новый цвет карта, цвета на изображении меняются, и объекты появляются шаг. Расширенные форматы анимации хранят только различия между два соседних изображения (называемые кадров ) и обновление только пиксели, которые фактически изменились, поскольку каждый кадр отображается. Скорость отображения 10-15 кадров в секунду является типичной для мультипликационных анимаций.Видео анимация обычно требует скорость отображения 20 кадров в секунду или лучше для получения более плавного движение.

TDDD и TTDDD являются примерами форматы анимации.

Мультимедийные форматы

Мультимедийные форматы относительно новые, но их становится все больше важный. Они предназначены для хранения данных разные типы в одном файле. Мультимедийные форматы обычно позволяют включение графики, аудио и видео информации.от Microsoft RIFF, Apple QuickTime, MPEG и FLI Autodesk хорошо известны примеры и другие, вероятно, появятся в ближайшем будущем. Глава 10, Мультимедиа , описывает различные вопросы, касающиеся мультимедийных форматов.

Гибридные форматы

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

Гипертекст и Гипермедиа Форматы

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

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

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

Гипертекстовые и гипермедиа системы, такие как World Wide Web, содержат миллионы информационных ресурсов хранятся в виде GIF, JPEG, PostScript, MPEG и AVI файлы.Многие другие форматы также используются.

3D форматы

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

Приложения рендеринга, которые могут использовать трехмерные данные, обычно моделируют и анимационные программы, такие как NewTek’s Lightwave и Autodesk 3D Студия. Они предоставляют возможность настроить внешний вид рендеринг изображения с помощью изменений и дополнений в освещении, текстуры, применяемые к элементам сцены, и относительные положения элементы сцены. Кроме того, они позволяют пользователю анимировать или назначать движения, элементы сцены. Затем приложение создает серию растровые файлы или кадры, взятые в последовательности, могут быть собраны в фильм.

Важно понимать, что векторные данные исторически были 2D в природа. То есть приложение-создатель, с которого были получены данные, не пытаться моделировать 3D-дисплей с помощью приложения перспектива. Примеры векторных данных включают чертежи САПР и большинство клип-артов, предназначенных для использования в настольных издательских приложениях. На рынке существует определенная путаница относительно того, что представляет собой 3D-рендеринг. Это осложняется тем фактом, что 3D-данные теперь поддерживаются по ряду форматов, в которых ранее сохранялись только 2D векторные данные. Примером этого является формат Autodesk DXF. Форматы как DXF иногда называют расширенным векторные форматы .

Форматы языка моделирования виртуальной реальности (VRML)

VRML (произносится как «Vermel») можно рассматривать как гибрид трехмерной графики и HTML. VRML v1.0 по сути подмножество формата файла Silicon Graphics Inventor и добавляет к нему поддержка ссылок на унифицированные указатели ресурсов URL-адреса во всемирной паутине.

VRML кодирует 3D-данные в формате, подходящем для обмена через Интернет с использованием протокола передачи гипертекста (HTTP). Данные VRML, полученные из Интернета сервер отображается в веб-браузере, который поддерживает VRML языковая интерпретация. Мы ожидаем, что VRML на основе 3D графика скоро будет очень распространена в World Wide Web.

Эта книга не содержит углубленного обсуждения VRML по тем же причинам, по которым мы не предоставляем подробного описания гипертекст, гипермедиа и 3D форматы.VRML спецификация является движущейся целью, но вы можете не отставать от нее, посмотрев на следующие ресурсы в интернете:

http://www.oki.com/vrml/VRML_FAQ.html

VRML FAQ

http://www.sdsc.edu/vrml/
http://www.vrml.org
http://vrml.wired.com

Информационные репозитории VRML

Аудио форматы

Аудио обычно хранится на магнитной ленте в виде аналоговых данных.Для аудио данные для хранения на носителе, таком как CD-ROM или жесткий диск, он должен сначала закодировать с использованием процесса цифровой выборки, аналогичного используемому хранить цифровые видеоданные. После кодирования аудиоданные могут быть записывается на диск в виде потока необработанных цифровых аудиоданных или, чаще, хранится в формате аудио файла.

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

Где форматы аудио файлов сильно различаются в методах данных сжатие они используют.Кодирование Хаффмана обычно используется как для 8-битных графические и аудиоданные. 16-битные аудиоданные, однако, требуют алгоритмы, специально адаптированные к задачам сжатия звука данные. Такие схемы сжатия включают CCITT (Международный телеграфно-телефонный консультативный комитет) рекомендации G.711 (uLAW), G.721 (ADPCM 32) и G.723 (ADPCM 24), и Федеральные стандарты США FIPS-1016 (CELP) и FIPS-1015 (КЛП-10E).

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

http://cuiwww.unige.ch/OSG/AudioFormats/

Руководство по форматам аудио файлов

ftp://rtfm.mit.edu/pub/usenet/news.answers/audio-faq/part[1-2]

FAQ по форматам аудиофайлов

ftp: // rtfm.mit.edu/pub/usenet/news.answers/compression-faq/part[1-3]

comp.compression FAQ

ftp://rtfm.mit.edu/pub/usenet/news.answers/dsp-faq/part[1-4]

comp.dsp FAQ

ftp://rtfm.mit.edu/pub/usenet/news.answers/mpeg-faq/part[1-6]

MPEG FAQ

Форматы шрифтов

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

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

Исторически существовало три основных типа файлов шрифтов: растровые, обводка и сплайн-контуры, описанные в следующем разделы.

Мы решили не включать файлы шрифтов в эту книгу, потому что технология шрифтов это мир для себя, с другой терминологией и проблемами.Многие из форматы файлов шрифтов по-прежнему являются собственностью и зашифрованы, а в На самом деле, не доступны для широкой публики. Хотя есть несколько старых форматов шрифтов на основе сплайнов все еще используются, данные о шрифтах в Форматы TrueType и Adobe Type 1 легко доступны на всех основные платформы и хорошо документированы в других публикациях легко доступны для разработчиков. Мы рекомендуем вам проверить из следующих ресурсов в интернете:

ftp: // rtfm.mit.edu/pub/usenet/news.answers/fonts-faq/part[1-17]

Шрифты FAQ

http://www.adobe.com
http://www.eworld.com
http://microsoft.com
http://jasper.ora.com/compfont

Шрифты информационных хранилищ

Растровые шрифты

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

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