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

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

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

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

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

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

Таким образом, формат GIF подходит если:

  • изображение не многоцветное;
  • нужна простейшая прозрачность;
  • нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.

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

Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

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

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

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

Итак, формат PNG подходит для:

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

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

Особенности WebP:

  • сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
  • сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
  • поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

JPEG: 44 килобайт

WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

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

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

SVG (Scalable Vector Graphics)

Основным форматом векторной графики в Интернете является SVG. Данный формат не является типичным, он представляет из себя набор инструкций, описывающих изображение, в формате XML. По сути, файл с изображением в этом формате является обычным текстовым файлом, который можно открыть в блокноте и отредактировать. В этом формате можно описать не только статичную, но и динамичную картинку (анимация), смешать созданные векторы с растровой картинкой. Благодаря тому, что каждая фигура является для интернет-браузера элементом DOM, c помощью JavaScript можно описывать достаточно сложные сценарии, взаимодействовать с пользователем.

Сокращение от англ. Scalable Vector Graphics. Является открытым стандартом, т.е. в отличие от большинства других форматов, SVG не является чьей-либо собственностью. Это основанный на XML язык разметки, предназначенный для описания двухмерной векторной графики. Формат поддерживается многими веб-браузерами и может быть использован при оформлении веб-страниц. К сожалению, формат не обеспечивается высокого качества в отношении сложных рисунков и имеет ограничения по сфере своего использования.

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.

Таким образом, формат SVG подходит если:

  • нужно анимировать части изображения;
  • изменять цвет элементов изображения;
  • необходимо масштабировать изображение без потерь.

Ai

Векторный формат файлов, создаваемых программой Adobe Illustrator. У Adobe Illustrator большое число версий — Adobe Illustrator 3, Adobe Illustrator 4, Adobe Illustrator 5 и т.д. Формат ai каждой новой версии несовместим с более старыми версиями, что означает, например, файл, сохраненный в версии Adobe Illustrator 9 может быть открыт в более новой версии программы (Adobe Illustrator 10, CS, CS2 и т.д.), но не может быть открыт в более старой версии программы (Adobe Illustrator 8, 7, 6 и т.д.), хотя с версии Adobe Illustrator 10 поддерживается возможность импорта файлов более новых версий. Формат обеспечивает очень высокое качество рисунков, но по ряду параметров плохо совместим с другими программами (например, различные эффекты Adobe Illustrator и градиентная заливка могут не передаваться в другие форматы).

Cdr

Векторный формат файлов, создаваемых программой CorelDraw. У CorelDraw большое число версий — CorelDraw 3, CorelDraw 4, CorelDraw 5 и т.д. Формат cdr каждой новой версии несовместим с более старыми версиями, что означает, например, файл, сохраненный в версии CorelDraw 9 может быть открыт в более новой версии программы (CorelDraw 10, 11, 12 и т.д.), но не может быть открыт в более старой версии программы (CorelDraw 8, 7, 6 и т.д.). Формат обеспечивает очень высокое качество рисунков, но по ряду параметров плохо совместим с другими программами (например, различные эффекты CorelDraw и градиентная заливка могут не передаваться в другие форматы).

Cmx

Corel Presentation Exchange — формат графических программ корпорации Corel, предназначенный для передачи рисунков между разными программами. Формат поддерживается, начиная с версии CorelDraw 6.

Eps

Относительно универсальный векторный формат файлов, поддерживаемый большинством векторных редакторов — CorelDraw, Adobe Illustrator, Macromedia FreeHand и различными узкоспециализированными программами (для плоттерной резки, гравировки, выжигания на дереве и т.д.). Формат имеет много версий и, к сожалению, каждая программа поддерживает его только до опеределенной версии (например, CorelDraw поддерживает только версии до EPS 7). Формат обеспечивает очень высокое качество рисунков.

fla, fh

Исходные Flash-файлы, создаются в Adobe Flash (бывш. Macromedia Flash).

Swf

Flash-формат, который может просматриваются с помощью Flash Player, устанавливамый как plugin в браузер.

Wmf

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

Источники:

https://htmlacademy.ru/blog/113-image-formats

http://www.vectorgraphics.ru/formats.php

http://cpu3d.com/grvector/vektornaya-grafika-svg/