Файл: Решение за вами 10 Общий обзор современных графических форматов 12 Много ли можно выиграть, пользуясь альтернативными графическими форматами 13.doc

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

А теперь рассмотрим другие решения для Web-анимации и интерактивного взаимодействия с пользователем, причем основную роль здесь продолжает играть фирма Macromedia, давно вышедшая на рынок со своими программами Shockwave и Flash и непрерывно улучшающая свои изделия, повышая их эффективность в соответствии с запросами пользователей и проектировщиков.

Первоначально созданный как формат для Macromedia Director, Shockwave — это семейство протоколов, нацеленных прежде всего на производство интерактивного и графического содержания, создаваемого специально для использования в сети Интернет. А Shockwave Flash — это вообще уникальный инструмент и один из самых лучших способов для создания анимации и публикации ее на Web-странице. Shockwave Flash образует совсем маленькие файлы (так как использует преимущественно векторный формат представления) и по сравнению с другими форматами наиболее удобен с точки зрения подготовки.

При публикации такой анимации на ваших страницах не забудьте уведомить об этом пользователя, чтобы он заранее запасся дополнительным модулем и приготовился к томительному ожиданию загрузки. Однако последние версии — и Netscape Navigator, и Internet Explorer имеют модули просмотра для Flash-анимаций даже в базовой поставке. Фирма Netscape подтвердила, что последующие версии Navigator будут иметь такую поддержку для Flash даже на уровне кода[11,c.32].

4.2 Окончательное решение за вами

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

Однако при представлении растровых изображений более предпочтительным становится PNG, а если вы пойдете еще дальше и попытаетесь использовать векторное изображение, то уже сегодня к вашим услугам — формат Shockwave Flash фирмы Macromedia.

Тем не менее на подходе и другие векторные форматы, которые в скором времени станут стандартными.

JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов[2,c.91].

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

Принимая во внимание то, что в мире сейчас разразилась пандемия, я заметил, что моё интернет-соединение стало работать нестабильно. К нашему счастью, благодаря тому, что на страже благополучия интернета стоят прекрасные специалисты, не знающие усталости, большая часть Всемирной сети до сих пор работает нормально. Но в интернете, определённо, что-то происходит. Я пользуюсь соединением на 100 Мбит/с, но у меня возникает такое ощущение, будто я сижу на 3G-модеме.

Это вносит некоторые изменения в вышеприведённые рассуждения. Дело в том, что наши устройства могут парсить и компилировать JavaScript с той же скоростью, с которой они могли это делать пару недель назад. Но данные теперь путешествуют по сетям медленнее. В результате в настоящий момент крайне важно то, какой именно объём данных, представляющих некий ресурс, передаётся по сети при загрузке этого ресурса.

Но, что очень хорошо, оптимизировать изображения, используемые на веб-страницах, не так уж и сложно. В этом материале мы поговорим о том, как пользоваться современными графическими форматами вроде WebP. Изображения, сохранённые в таких форматах, часто оказываются в 2-3 раза меньше, чем те, для хранения которых используются всем известные и всеми любимые старые форматы (вроде JPG и PNG). Применение новых форматов может серьёзно изменить ситуацию в лучшую сторону[8,c.21].

5. Общий обзор современных графических форматов

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

JPEG 2000 — формат, представляющий собой улучшенный вариант обычного JPG. Этот формат был разработан в 1997 году, преимущественно для использования в кинематографе и в медицине. Он позволяет сжимать изображения сильнее, чем JPEG, но с меньшим количеством артефактов.
JPEG XR — это формат, родственный JPEG 2000. Он разработан компанией Microsoft в 2009 году.
WebP — формат, созданный Google в 2010 году для веб. Основная цель его разработки заключалась в использовании продвинутых способов оптимизации изображений ради уменьшения размеров файлов. WebP поддерживает прозрачность и даже анимацию.

Много ли можно выиграть, пользуясь альтернативными графическими форматами?

Изображение, использованное в одном материале

Результаты оказались прямо-таки невероятными.

Особенности изображения	Оригинал	WebP
Файл в формате .jpg (из Photoshop)	742 Кб	61 Кб! (на 92% меньше)
Оптимизированный файл в формате .jpg (после Imagemin)	178 Кб	58 Кб! (на 67% меньше)
Файл в формате .jpg (из Photoshop)	242 Кб	50 Кб! (на 79% меньше)
Оптимизированный файл в формате .jpg (после imagemin)	151 Кб	50 Кб! (на 67% меньше)

Тут может возникнуть вопрос о том, как преобразование в WebP может повлиять на SVG-изображения. Я подобных экспериментов с SVG не проводил. SVG — это векторный формат. Это значит, что изображения в нём строятся на основе математических инструкций, а не на основе сведений о цвете отдельных пикселей. Преобразовать SVG-изображение в WebP — значит отказаться от возможностей по масштабированию SVG-изображений, что, полагаю, недопустимо. К тому же, я подозреваю, что подобное преобразование, в большинстве случаев, приведёт к увеличению размеров файлов[1,c.32].

5.1 Браузерная совместимость

Формат WebP пользуется поддержкой большинства браузеров.

Хоть уровень поддержки этого формата и весьма высок, очень плохо то, что его не поддерживают Safari и Internet Explorer.

А вот — сведения о поддержке JPEG 2000.

Так, теперь Safari на нашей стороне, а вот Internet Explorer опять остался не у дел.

А как насчёт JPEG XR?

А тут отличился именно Internet Explorer. В результате, пользуясь этими тремя форматами, мы перекрываем все существующие браузеры (KaiOS Browser не поддерживает ни один из этих форматов, и я приношу ему свои извинения за то, что обхожу его вниманием, но я даже не знаю о том, что это за браузер).

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

5.2 Элемент picture спешит на помощь

В HTML есть два элемента, предназначенных для вывода изображений. Первый можно сравнить с международной поп-звездой вроде Мадонны. Это — img . А второй — это как новая группа, известная лишь в узких кругах любителей музыки. Это — элемент picture [3,c.12].

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

Элемент picture может включать в себя множество дочерних элементов source и один элемент img . Браузер последовательно парсит эти элементы, подбирая, на основе атрибута type (и media ), тот из них, которым сможет воспользоваться. Когда такой элемент будет найден, браузер выясняет адрес изображения, пользуясь атрибутом srcset , после чего выводит это изображение с помощью элемента img .

Атрибут srcset обладает гораздо большими возможностями, чем обычный src , но мы, к счастью, можем рассматривать его как аналог src . В целом, элементы source представляют собой нечто вроде настроек, соответствующих различным изображениям. В img попадает то изображение, которое лучше всего соответствует среде, в которой просматривают страницу.

Использование набора следующих друг за другом элементов source означает, что в каждом браузере подходящим окажется хотя бы один из них. Так, большинство браузеров используют webp-изображение, Safari загрузит jp2-изображение, IE — jxr-изображение.

Тут уместно вспомнить о том, что Internet Explorer не поддерживает элемент picture . Этот элемент — слишком нов для данного браузера. Но, несмотря на это, вышеприведённый фрагмент разметки и в IE сработает так, как ожидается.

Дело в том, что когда браузер натыкается на неизвестный ему элемент, он рассматривает его как элемент div . В результате при разборе нашего кода IE видит множество элементов div , а также — один тег , который содержит путь к jxr-изображению. А это, как оказывается, тот самый формат, который поддерживает Internet Explorer[5,c.24].

5.3 Упрощённая альтернатива

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

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

Лишь очень немногие посетители моего блога пользуются Internet Explorer (за последние 7 дней его попытались посмотреть лишь 3 человека с IE, что составило 0.02% трафика). Поэтому я решил воспользоваться упрощённым вариантом вышеописанного решения:

Я отдаю компактное webp-изображение тем браузерам, которые поддерживают этот формат (Chrome, Firefox, Edge), а браузерам, которые этого формат не поддерживают (IE, Safari), предлагаю наследие прошлого — jpeg-картинку.

С моей точки зрения это — пример прогрессивного улучшения. Проект остаётся работоспособным на старых браузерах, хотя загрузка изображений и занимает больше времени. Это — компромисс, который меня устраивает. (Правда, я надеюсь, что поддержка WebP скоро появится и в браузерах от Apple)[6,c.7].

5.4 Преобразование графических файлов в формат WebP

Компания Google создала набор инструментов, направленный на работу с webp-файлами. Один из таких инструментов называется cwebp. Он позволяет преобразовывать в WebP графические файлы других форматов.

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

Рассмотрим эту команду:

Флаг -q 80 позволяет задать качество изображения. Его значение изменяется от 1 (наихудшее качество) до 100 (наилучшее). Можете поэкспериментировать с различными значениями. Я выяснил, что лучше всего задавать тут что-то в районе 70-80.
Имя файла cereal.jpg — это исходное изображение, которое нужно преобразовать в webp.
Конструкция -o cereal.webp задаёт путь к выходному файлу.

Использование современных графических форматов в React-приложениях.

Применение современных графических форматов со стилизованными компонентами.

Очень хорошо то, что это работает и с нашим компонентом ImgWithFallback .

Причина работоспособности этой конструкции заключается в том, как именно работает вспомогательная конструкция styled . Она генерирует класс и внедряет его в таблицу стилей документа.

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

5.5 Использование пакета gatsby-image

Если вы применяете Gatsby, то знайте, что пакет gatsby-image , при его обычном использовании, уже задействует множество оптимизаций изображений. Сюда входит и преобразование изображений в формат webp (хотя, для этого нужно включить соответствующий параметр).