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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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