От автора: если вы только что не выпрыгнули из дымящегося Делориана прямиком из 1985 года, то вам должен быть знаком самый бестолковый формат в интернете — GIF (Graphics Interchange Format). GIF – формат растровых изображений. Однако в отличие от JPEG и PNG этот формат файлов ограничен цветовой палитрой в 256 цветов. По сути, в каждом GIF изображении предустановлен «бокс с цветными мелками», и вы не можете получить новый цвет путем их смешивания.

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

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

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

простая анимация;

маленькие иконки;

графика с низкой вариацией пикселей (т.е. монотонные цвета типа логотипов и флагов).

JPEG

В зависимости от вашего предпочтения вы можете использовать этот формат в виде «JPEG» или «JPG» — оба являются приемлемыми вариантами одного акронима — Joint Photographic Experts Group.

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

JPEG позволяет гибко настраивать степень сжатия изображения: от 0% (сильное сжатие) до 100% (без сжатия). Как правило, 60%-75% хватит, чтобы значительно снизить вес файла, сохраняя отличное качество на большинстве экранов.

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

Также в отличие от GIF и PNG формат JPEG не сохраняет прозрачность.

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

статические изображения;

фотографии;

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

PNG

В отличие от GIF и JPEG формат PNG (Portable Network Graphics) более новый. Благодаря двум версиям формат похож на микс GIF и JPEG.

PNG-8

PNG-8 сильно похож на GIF и использует также цветовую палитру в 256 цветов (максимум). У него чуть лучше прозрачность и чуть меньше вес файла. Однако в PNG-8 нет функции анимации.

PNG-24

PNG-24 позволяет рендерить изображения с миллионами цветов, почти как JPEG, но также сохраняет прозрачность.

PNG-24 – формат без потерь качества, что увеличивает вес файлов. Если качество изображений важнее веса файлов, PNG-24 лучший выбор. Сервисы типа TinyPNG.com зачастую могут сильно снизить вес файла.

По сравнению со своим сводным братом JPEG, PNG-24 не являются универсально совместимыми со всеми приложениями и платформами, что делает формат неподходящим для совместного использования в сети. Тем не менее, формат можно редактировать без потерь качества.

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

веб-графика с прозрачностью;

сложные фотографии с множеством цветов и графика;

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

SVG

В отличие от трех форматов выше SVG (Scalable Vector Graphics) – не чисто растровый формат. Это векторный формат, близкий к AI в Adobe Illustrator и EPS. Векторная графика постепенно приобретает популярность в сети и у UI дизайнеров.

Иногда удобно представлять SVG как «HTML для иллюстраций». Этот формат немного отличается от других.

SVG лучше всего подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG написан на XML разметке, его можно редактировать в любом текстовом редакторе, а также с помощью JS и CSS. Векторная графика масштабируется под любой размер без потери качества, что идеально подходит для адаптивного дизайна.

SVG – векторный формат, однако в него можно (часто так и делается) вставить растровую графику точно так же, как JPEG вставляется в HTML.

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

Онлайн сервисы типа WordPress, Flickr, Medium, Tumblr и Facebook будут либо принудительно конвертировать SVG в подходящий для них формат, либо, что более вероятно, сразу заблокируют загрузку SVG. В сети есть куча хостингов SVG, среди которых svgur.com , imgh.us и даже Github, как Alex продемонстрировал здесь .

Мне нравится, что есть маленькие хостинги SVG, однако я на 99% уверен, что следующие 5 лет только GitHub будет SVG-friendly. При использовании SVG в веб-дизайне почти всегда можно сжать вес файла в отличие от JPEG и PNG. Но чем сложнее SVG, тем больше вес файла.

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

логотипы и графика в веб-дизайне;

ретина экраны.

Сравнение

Мы узнали про отличия популярных форматов, теперь пора сравнит их лицом к лицу. Ниже вы увидите, как GIF, JPEG, PNG и SVG обрабатывают изображения с простыми и сложными цветами, а также изображения.

Графика с монотонными цветами

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

Ниже показано сравнение веса файлов и качество. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

JPEG 100% (без сжатия): 53.3 KB

SVG: 6 KB (чистая векторная графика)

В случае с этим изображением не заметно больших потерь качества при сравнении шести форматов. Хотя можно заметить небольшие артефакты по краям сжатого JPEG.

Не всегда все будет так с графикой с монотонными цветами, но в большинстве случаев проблем с такими изображениями не возникнет. Для этого изображения наилучший вариант при условии, что у нас есть оригинал – SVG с весом в 6Кб. Если векторной графики нет, на замену можно использовать PNG-8. Вес файла снижается с 23,4Кб до 11,8Кб.

Изображения со сложными цветами

Оригинал – 328Кб JPEG с разрешением 1280 х 960. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.

У нас нет векторной версии этого изображения, поэтому любая SVG версия будет представлять собой просто JPEG внутри SVG. Этот формат здесь будет лишним.

JPEG 100% (без сжатия): 776 KB

JPEG 75%: 215 KB

Изображения со сложными цветами лучше выглядят в JPEG, PNG-24 и SVG. Цвета по большей части сохраняются, и нет этих страшных колец и шума, который обычно вылезает в GIF и PNG-8.

Цветные фотографии

Оригинал – 215Кб JPEG с разрешением 1280 х 710. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.

SVG здесь также мало что даст.

JPEG 100% (без сжатия): 90 KB

JPEG 75% : 82 KB

Как и со сложными изображениями, фотографии лучше всего сохранять в JPEG, PNG-24 или SVG. В фото сверху цвета сохраняются во всех форматах кроме PNG-8 и GIF, где вылезают кольца и шум в тени волос, на заднем фоне, а также в верхней части фото.

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

Сперва мой взгляд пал на MNG, родственника PNG. «Спецификация формата выпущена ещё в 2001 году, поэтому он наверняка реализован во всех современных браузерах!». И тут меня ждало первое разочарование. Формат оказался слишком сложным для реализации – реализация Mozilla, по их словам, содержала столько же строк кода, сколько все остальные форматы вместе взятые, за что и была удалена из их продуктов. Другие производители браузеров, похоже, даже не пытались внедрить у себя этот формат. Конечно, существует плагин для браузеров, поддерживающих плагины Netscape, но это ничем не лучше Flash. Отмечу лишь, что, возможно, формат слишком опередил свое время. Судя по описанию возможностей, это такой растровый SVG.

Дальше поиски привели меня к формату APNG. Формат прост, как два рубля: в файле записаны изменения в кадре от предыдущего с некоторыми мелкими нюансами. Но самое главное, что браузеры, не поддерживающие этот формат, отобразят статичную картинку. В целом, по возможностям формат схож с GIF. Он был предложен Mozilla как замена монструозному MNG. Проверяю в Firefox – все отлично работает. Opera – также. Открываю в Chrome и… получаю статичную картинку. Что произошло: Mozilla предложила включить APNG в спецификацию PNG. Путем голосования эта идея была отвергнута. И теперь часть браузеров поддерживает этот формат, а часть – нет.

Предо мной явственно предстала картина:
Mozilla: Ваш формат плохой, вы ничего не понимаете в анимированных PNG! Мы сделали свой, без шахмат и поэтесс. Включите его в спецификацию!
Группа разработчиков PNG: А вот вам!

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

И тут меня посетила идея: вроде же в SVG можно вставлять растровые изображения?!

Если гора не идет к Магомету

Для экспериментов я одолжил картинку у Mozilla:

Разбиваем картинку на отдельные кадры:

И так далее. Получилось 25 кадров.

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

Дальше я было попытался просто накладывать последовательно кадры друг на друга, но не учел прозрачности и получил солнышко из уха лисы (этот же эффект можно пронаблюдать в IE9):

Эффект можно использовать для реализации одного из режимов APNG: отрисовка следующего кадра поверх предыдущего.

Теперь анимируем свойство прозрачности (opacity). Можно анимировать и координаты и сдвигать кадры за пределы видимости.
Тут проблема может проявиться в том, что прозрачность будет меняться плавно и появится шлейф или мерцание. Для этого мы указываем calcMode как «discrete».
Список опорных значений: values=«1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0». Как видно, это первый кадр. Первое значение – 1 – изображение не прозрачно. На всех остальных кадрах – полностью прозрачно.
Продолжительность анимации (dur) выбираем так, чтобы при делении на число кадров получить время одного кадра. Если какой-то кадр должен находиться на экране вдвое большее время, список опорных значений придется удваивать, либо менять длительность одного значения, что несколько сложнее.

Теперь у нас остается лишь одно неудобство – анимация состоит из множества файлов. Эту проблему мы решим с помощью data:URL, встроив изображения прямо в SVG.

Примечание: ниже приведен перевод статьи «Replace GIF with PNG Images» о том, в каких случаях стоит использовать PNG-формат вместо GIF. Мои комментарии далее курсивом.

Введение

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

PNG против GIF: алгоритмы сжатия

PNG использует алгоритм deflate-сжатия обычно с 32Кб скользящим (sliding ) окном. Deflate является улучшенной версией алгоритма сжатия Lempel-Ziv (LZ77), который используется в ZIP- и GZIP-файлах (3, 4). Созданный Phil Katz для второй версии PKZip, deflate совмещает LZ77 с кодированием Huffman и является от 10% до 30% более эффективным, чем LZW при сжатии без потери информации. Так же, как и GZIP, некоторые инструменты по PNG-сжатию предполагают опциональный параметр «степень сжатия», которая варьируется от 1 до 9. По умолчанию выставляется 6. 9 является практически всегда лучшим выбором для максимального сжатия.

Не удивительно, что изображения, сохраненные как PNG, обычно от 10% до 30% меньше, чем GIF, хотя в некоторых редких случаях они могут быть больше по размеру (5, 6). В нашем тестировании мы обнаружили, что часть картинок могут быть сжаты от 40% до 50% или даже больше (до 85% для одного примера), в зависимости от изображения. По большей части изображения с большими однотонными областями сжимаются лучше, чем градиентные с большим количеством переходов между цветами.