Какие форматы изображений наиболее важные для веб-графики

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

 

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

Какие форматы изображений существуют?

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

 

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

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

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

Формат JPG

JPG, также известный как JPEG, является одним из самых известных форматов и фактически является стандартом (ISO / IEC 10918-1), опубликованным в 1992 году, в котором описываются различные способы сжатия изображений. Поскольку сам стандарт не содержит точных критериев для сохранения изображения, для этой цели необходим дополнительный формат, несмотря на то, что формат обмена файлами JPEG (JFIF) зарекомендовал себя как стандарт для всех браузеров. Менее используются альтернативы файлов формата обмена изображениями (SPIFF) и графический формат JPEG Network Graphics (JNG).

 

Формат JPG сжимается и изменяет обычную структуру пиксельной графики, так что каждые 8 ​​x 8 пикселей сгруппированы в блок и вычисляются шаг за шагом. Во время этого процесса, например, преобразование цвета происходит из модели RGB в модель YCbCr и так называемый фильтр нижних частот , в котором высокие частоты блокируются для уменьшения размера файла. В зависимости от выбранной степени сжатия этот процесс связан с потерей данных, поскольку не все данные изображения могут храниться. Согласно статистике W3Techs три четверти всех веб-сайтов используют изображения в формате JPG. Причина заключется в том, что в результате  вы получаете небольшой размер файла, вопрос, связанный с сжатием.

 

Рекомендуемое использование : сохранение и публикация фотографий

Формат PNG

Формат PNG ( Portable Network Graphics ), графический формат файла, общепризнанный консорциумом World Wide Web (W3C), впервые появился в 1996 году на экранах компьютеров. В качестве бесплатной и в то же время более современной альтернативы GIF (Graphic Interchange Format), PNG характеризуется возможностью подвергаться сжатию без потерь и максимальной глубине цвета до 24 бит на пиксель (16,7 млн. цвета), что с альфа-каналом даже достигает 32 бит. Однако, в отличие от GIF, невозможно создать анимацию с NPC.


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

 

Даже после сжатия изображения не теряют качество и поэтому остаются довольно тяжелыми по сравнению с другими форматами, поэтому объектом для веб контента более подходит фотография  формата JPG. Тем не менее, существует возможность уменьшения цветового поля (от 1 до 32 бит на пиксель).

 

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

Формат GIF

В 1987 году онлайн-портал CompuServe представил формат обмена графикой , сокращенно GIF, в качестве хроматической альтернативы используемому в черно-белом формате X BitMap (XBM). В отличие от других современных решений, таких как PCX или MacPaint, GIF-файлы требуют гораздо меньше пространства благодаря эффективному сжатию LZW (сжатие данных с помощью алгоритма L empel Z iv W elch), поэтому формат получил большой успех с самого начала. Однако, как формат для фотографий и графики, JPG и PNG гораздо более продвинуты: из версии GIF89a 1989 года формат может, однако, объединить несколько изображений в файл и по этой причине он по-прежнему используется сегодня для создания коротких анимаций.

 

Все цветовые комбинации в GIF присутствуют в таблице, цветовой спектр. Таблица содержит до 256 цветов (8 бит) : поэтому формат изображения не особенно подходит для отображения фотографий. Индивидуальная информация может быть определена как прозрачная, однако, в отличие от современного PNG, полупрозрачные фоны не поддерживаются, в которых пиксель может быть виден или нет.

 

Рекомендуемое использование : генерация анимации; клип-арт или логотипы, в которых узкая глубина цвета не является препятствием

Формат TIFF

Формат изображения, который используется, в частности, для передачи файлов для печати и изображений с высоким разрешением - TIFF (Tagged Image File Format). TIFF, разработан в 1986 году Microsoft в сотрудничестве с Aldus (который сегодня принадлежит Adobe), оптимизирован для интеграции цветоделения и цветовых профилей ( ICC) отсканированных изображений. Кроме того, TIFF поддерживает цветовую модель CMYK и допускает глубину цвета для каждого канала до 16 бит (общая глубина цвета подразумевает 48 бит). Наконец, с 1992 года формат без потерь можно сжать с помощью сжатия LZW, который также применяется в формате GIF.

 

Из-за этих характеристик TIFF создал стандарты изображения, в которых качество изображения играет более важную роль, чем размер файла. По этой причине формат изображения используется, среди прочего, издательствами и прессой ; а также хранение монохромной графики (например, технических чертежей) относится к числу многих областей применения. Для сохранения и представления растра географической информации (карты, карты, воздушные снимки и т. д.) Был также установлен формат GeoTIFF с дополнительными тегами.

 

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

Формат PSD

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

 

Обычно изображения в формате PSD можно открывать только с помощью Adobe Photoshop, даже если обмен между приложениями для разных операционных систем Windows и MacOS работает безупречно. Поэтому в некотором смысле можно сказать, что графический формат совместим с разными системами. PSD сначала выступает в качестве формата хранения во время процесса обработки. Однако для экспорта в Интернет файл должен быть преобразован в формат PNG или, альтернативно, в JPG. Позволяет эффективное повторное открытие и редактирования файла позже, это также включает в себя сохранение данных. Чтобы преобразовать графику PSD, просто используйте простой инструмент, доступный онлайн, например Zamzar.

 

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

Формат BMP

Формат BMP ( Windows Bitmap ) был разработан для операционных систем Microsoft и IBM и был впервые опубликован в 1990 году с Windows 3.0 в качестве формата сохранения для пиксельной графики с глубиной цвета до 24 бит на пиксель. Формат несжатого изображения присваивает каждому пикселю очень точное хроматическое значение, поэтому файлы BMP обычно очень большие. Вот почему формат не подходит для использования в Интернете.

Рекомендуемое использование : сохранение фотографий и графики для автономного использования

Формат BMP

Формат BMP ( Windows Bitmap ) был разработан для операционных систем Microsoft и IBM и был впервые опубликован в 1990 году с Windows 3.0 в качестве формата сохранения для пиксельной графики с глубиной цвета до 24 бит на пиксель. Формат несжатого изображения присваивает каждому пикселю очень точное хроматическое значение, поэтому файлы BMP обычно очень большие. Вот почему формат не подходит для использования в Интернете.

Рекомендуемое использование : сохранение фотографий и графики для автономного использования

Векторные графические форматы в Интернете

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

 

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

Формат EPS

В сотрудничестве с разработчиками программного обеспечения Aldus и Altsys в 1987 году Adobe разработала и опубликовала векторный формат EPS ( Encapsulated PostScript ). Имя формата происходит от того факта, что относительные файлы сохраняются на языке описания страницы PostScript, что позволяет выделять сложные страницы с помощью лазерных принтеров и процессов CTP и CTF. С этой целью PostScript описывает элементы печатной страницы как линии, круги, изображения и дает информацию о том, где они расположены. EPS выделяет эту информацию на изображении, давая точные указания о размере излучения, в так называемом ограничивающем контейнере.

 

Кроме того, файлы EPS содержат изображение предварительного просмотра с низким разрешением, которое может служить заполнителем. Формат изображения Adobe описывает отдельные объекты независимо от используемого эмиссионного устройства, что позволяет осуществлять обмен между различными средами.

 

EPS нашел применение, особенно в области печати, но теперь он передал эстафету его известному преемнику - PDF (Portable Document Format), который также подходит для отправки электронных писем с гораздо меньшим размером файла. В качестве формата изображения для веб-проектов не подходит ни исторический EPS, ни современный PDF, который больше используется для обмена или представления текстовых документов.


Рекомендуемое использование : описание сложных страниц печати (формат больше не действует)

Формат SVG

Хотя многие другие векторные форматы, такие как формат AI (Adobe Illustrator Artwork) одинаково непригодны для использования в Интернете, формат SVG ( масштабируемая векторная графика ), рекомендованный W3C, убедительно подтверждает преимущества векторных файлов, упомянутых в «статья. Поскольку он полностью интегрирован во все существующие браузеры с помощью HTML5, спецификация описания двумерной векторной графики на основе языка XMLЭто альтернатива, которую следует серьезно учитывать в отношении более традиционной растровой графики - особенно с учетом мобильных и отзывчивых веб-сайтов. Во всех этих файлах SVG, в дополнение к масштабируемости без потерь, часто предлагают очень низкий объем данных и другие преимущества, такие как:

  • С помощью CSS вы можете использовать все атрибуты представления, такие как цвета, шрифты и т. д.
  • Скрипты могут использовать контент через DOM (Document Object Model).
  • Графики SVG создаются на языке программирования .
  • Соответствующий код помечен и адаптируется как отдельный файл непосредственно в документе HTML .
  • Вы можете добавлять анимации в разные режимы (SMIL, JavaScript, CSS).

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

 

Рекомендуемое использование : интерактивная или техническая графика (логотипы, кнопки, значки и другие).