Компьютерная графика отвечает за создание разметки веб страниц

Обновлено: 07.07.2024

Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:

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

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

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

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

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

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

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

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

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

Несколько месяцев назад я использовал в одном материале следующее изображение.

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

Я провёл некоторые эксперименты, рассмотрев использование форматов JPG и PNG для хранения исходного изображения. Я оптимизировал варианты изображения с использованием imagemin для того чтобы узнать о том, что мне может дать применение WebP вместо этих «ретро»-форматов.

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

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

Я проводил подобные эксперименты с множеством изображений. Практически всегда оказывалось, что WebP-файлы были на 30-70% меньше чем даже оптимизированные версии графических файлов других форматов.

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

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

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

Поддержка формата WebP браузерами

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

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

Поддержка формата JPEG 2000 браузерами

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

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

Поддержка формата JPEG XR браузерами

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

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

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

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

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

Вот как выглядит HTML-код, в котором применяется элемент picture :

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

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

В Chrome, например, после обработки вышеприведённой разметки, браузер придёт к чему-то, более или менее эквивалентному следующему коду:

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

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

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

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

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

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

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

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

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

Проверка работоспособности решения

Инструменты разработчика всегда будут полагать, что в изображении содержится то, что изначально было записано в атрибут src тега img . Если проверить элемент, воспользовавшись вкладкой Elements , то можно увидеть, что на странице используется jpg-изображение.

Для того, чтобы проверить работоспособность всего этого, лучше всего, как мне кажется, щёлкнуть правой кнопкой мыши по картинке и выбрать в появившемся меню пункт Сохранить изображение как… В Chrome при выполнении этой команды система должна предложить сохранить файл с расширением .webp . А вот в Safari это будет jpeg-файл.

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

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

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

Если вы пользуетесь MacOS, установить этот набор инструментов можно с помощью Homebrew:

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

После установки инструментов пользоваться ими можно так:

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

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

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

Компонент — это прекрасный способ абстрагироваться от некоторых странностей элемента <picture> . Я пользуюсь для этого React-компонентами. На мой взгляд, это очень удобно. Вот как это выглядит:

Использование компонента ImgWithFallback очень похоже на работу с обычным тегом img :

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

Если вы пользуетесь библиотеками styled-components или emotion , то вы, возможно, привыкли к особому оформлению изображений:

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

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

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

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

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

Пакет gatsby-image не претендует на то, чтобы стать заменой img . Его использование может оказаться не таким уж и простым, его внутренние механизмы могут приводить к появлению неожиданностей, осложняющих разработчику жизнь.

Если этот пакет вам интересен — взгляните на его документацию.

Минусы WebP

Единственным реальным недостатком webp, который мне удалось обнаружить, заключается в том, что с файлами этого формата очень неудобно работать.

Большинство настольных пакетов для работы с изображениями пока его не поддерживают. Например, я не могу открывать webp-файлы в Preview на MacOS. Это значит, скажем, что если я сохраню webp-изображение с веб-страницы, я не смогу просмотреть его на компьютере!

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

Итоги

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

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

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

Правда ли, что можно задать свои размеры рабочей области графического редактора Paint?

Выберите один из 2 вариантов ответа:

Сделайте сопоставление между понятиями

Укажите соответствие для всех 2 вариантов ответа:

1) находится под белой рабочей областью и появляется при использовании инструмента ластик и в некоторых других случаях

2) используется для рисования в данный момент

__ фоновый цвет

__ основной цвет

Выберите элементы, которые входят в окно программы Paint

Выберите несколько из 6 вариантов ответа:

1) панель быстрого доступа

2) рабочая область

3) кнопка основного меню Paint

4) строка заголовка

5) строка состояния

6) ленты с инструментами

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

Выберите несколько из 5 вариантов ответа:

4) графический планшет

Сопоставьте кнопки графического редактора из значение

Укажите соответствие для всех 4 вариантов ответа:

1) инструмент для рисования

2) закрашивает замкнутую область

3) вставляет текст

4) удаляет части изображения

Запишите слово, пропущенное в определении. "Для заливки замкнутой области цветом используется инструмент . ".

Запишите ответ:

Замкнутые ломаные линии можно нарисовать с помощью инструмента

Выберите один из 4 вариантов ответа:

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

Выберите несколько из 6 вариантов ответа:

Люди, каких профессий используют в своей деятельности компьютерную графику?

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

Что такое веб-дизайн?

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

Веб-дизайн появился совсем недавно. Первые сайты, созданные в начале 90-х, были очень простыми. Они практически полностью состояли из текста. Благодаря развитию технологий на них быстро появились фотографии и анимации.

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

Является ли веб-дизайн компьютерной графикой?

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

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

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

Можно ли самостоятельно стать веб-дизайнером?

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

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

Даже если вы решили учиться, практиковаться или выполнять первые задания, лучше начать как можно раньше. Нашли предложение стажировки для новичков? Отлично! Вы видели рекламу человека, который хочет создать простой веб-сайт для малого бизнеса? Напишите письмо с предложением о сотрудничестве!

С чего начать изучение веб-дизайна?

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

Основы рисования —

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

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

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

Благодаря этому вы будете создавать полезные и, в то же время, оригинальные дизайны и выделяться среди конкурентов.

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

В-третьих (пожалуй, самое главное) вы научитесь видеть . Дизайнер должен развивать особое восприятие мира, часто называемое «художественным чутьем». Вопреки внешнему виду, это не 100% естественный навык. В значительной степени он приобретается во время обучения рисованию.

Конечно, рисование - это только первый шаг к тому, чтобы стать веб-дизайнером. Ведь листа бумаги и карандаша для создания рабочей страницы недостаточно. Что тогда использовать?

Программы разработки интерфейсов

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

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

Sketch

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

Adobe XD

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

Другие графические программы

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

Конструкторы сайтов

Это инструменты , которые позволяют создавать веб-сайты без навыков программирования . Благодаря им человек с базовыми графическими навыками создаст не только дизайн, но и рабочий сайт.

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

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

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

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

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

Зацикливаться на конструкторах не рекомендую, но если вы хотите "творить как художник", не изучая код, — конструкторы станут вашим верным спутником.

Другие инструменты, полезные при разработке веб-сайтов

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

Первые сайты, напоминаю, созданные в начале 90-х, были очень простыми. Они практически полностью состояли из текста. Благодаря развитию технологий на них быстро появились фотографии и анимации.

Где черпать вдохновение?

Даже самые творческие умы нуждаются во вдохновении . В Интернете можно найти множество сайтов, посвященных вдохновении создания сайтов.

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

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

Сколько времени нужно, чтобы изучить веб-дизайн?

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

Удовлетворение меняющихся требований клиентов требует гибкости и постоянного обучения. Старые-добрые решения подойдут не во всех случаях, поэтому вам все равно придется искать новые, адаптированные под конкретный проект, решения.

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

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

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

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

Это позволяет разработать удобный интерфейс, который побуждает вас оставаться на странице. Как вишенка на торте во главе визуала красуется МОДА .

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

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

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

Резюме

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

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

Это возможно благодаря конструкторам веб-сайтов, в которых создание сайтов не только не требует программирования, но также интуитивно понятно и доступно каждому. НО не забывайте, что они никогда не заменят человеческие руки и мозг! ;)

По-серьёзному о графике в интернете: основы форматов изображений, инструменты для оптимизации и то, как люди воспринимают веб-графику.

Мы заботливо подготовили перевод крутой статьи от наших коллег из блога Evil Martians (оригинал материала авторства Полины Гуртовой, Риты Клубочкиной и Энди Барнова ищите здесь). Статья будет полезна фронтендерам, ПМ-мам, контентщикам и вообще всем, кто имеет дело с изображениями в интернетах (возможно, даже вашей маме).

Знаете ли вы, что средняя веб-страница для десктопа в 2019 занимала 2 МБ трафика, и половина всего, что веб-сервер отправляет браузеру пользователя, — это графика? JPEG, PNG, SVG, GIF и некоторые другие аббревиатуры известны каждому, кто когда-либо создавал хоть что-либо в «цифре». Может показаться, что всё отображаемое на странице касается только фронтенд-разработки, но на самом деле понимание специфики веб-изображений важно для всех членов продуктовой группы: от тех, кто отвечает за серверную часть, до дизайнеров, менеджеров и специалистов техподдержки клиентов.

Если у вас не так много времени, чтобы читать эту длинную и извилистую статью, вот инфографика.

Встретились как-то в баре… кривая и цветовая кодировка

Технически гипертекст (текст, который ссылается на другой текст), представленный Дугласом Энгельбартом в 1968 году как основа современной веб-коммуникации, не нуждается в изображениях для передачи информации. Но реальность такова, что вниманием пользователя нужно управлять с помощью графического контента. Изображения, видео, CSS-анимация, рисованная графика Canvas API, WebGL, даже Flash — тёмная технология древних времен — все средства хороши в постоянной борьбе за удержание пользователя.

Для компьютера каждое изображение — это просто последовательность конкретных инструкций. То, как они переводятся в аппаратные пиксели, отображаемые на экране, — само по себе захватывающая история. Большинство форматов изображений, за исключением BMP (кто там
в пейнте ещё рисует?), в точности не хранит значения пикселей. Немножко математики, и данные, содержащиеся в файле, декодируются в массив значений с цветовой кодировкой. Кодировка RGB (red, green, blue) — самая очевидная для передачи цвета.

Кодировка YCbCr тоньше, поскольку учитывает работу человеческого глаза и мозга: на самом деле мы более восприимчивы к изменениям яркости, чем к изменениям цвета.

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

PNG, GIF, JPEG, WebP, HEIC, AVIF (для видео) — растровые форматы, SVG — векторный формат. Ниже о каждом будет поподробнее.

Исходный размер изображения ниже, полученного на профессиональную видеокамеру — 37,8 МБ. Из уважения к вашему интернет-провайдеру, его сжали его до 3,5 МБ без потери качества.

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

Запишите эти вопросы себе шпаргалочкой, а теперь — поговорим о самих изображениях.

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

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

Качество изображения — степень, в которой полученное изображение отличается от идеального. И под качеством имеется в виду следующее:

Резкое векторное изображение слева и размытое растровое справа Настоящий цвет слева против двадцати цветов справа Плавный рендеринг слева по сравнению с пикселизацией справа

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

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

На третьем изображении — интерактивный элемент, где и текст, и изображение одинаково важны, поскольку они требуют действий пользователя. Такие элементы должны быть масштабируемыми, «многоразовыми» и занимать как можно меньше места, поэтому имеет смысл отказаться от растра в пользу вектора.

Другой критический фактор — человеческое восприятие. Яркость и контрастность важнее цвета, поэтому на нём можно сэкономить (и, опять же, никто не заметит).

Также следует помнить, что разные экраны и разные браузеры отображают графику немного по-разному. Иногда уловить это почти невозможно (особенно, если у вас нет экрана Retina), а учитывать — стоит:

Что такое пиксель, в конце концов? Сейчас даже малыш, который некоторое время смотрел «Свинку Пеппу» на родительском телефоне, вероятно, имеет некоторое представление об этом. Однако всё не то, чем кажется.

Когда мы говорим «пиксель», то на самом деле имеем в виду одну из, по крайней мере, трех совершенно разных вещей:

точку в аппаратном смысле,
точку в смысле CSS,
точку в смысле «данных изображения».

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

Когда вы читаете текст на своем телефоне, вы держите экран на определенном расстоянии от глаз, но когда вы смотрите на экран компьютера, вы стараетесь отодвинуться подальше, чтобы читать было удобно. Чем больше расстояние между сетчаткой и экраном, тем больше будет размер «пикселя CSS».

Не вдаваясь в подробности, мы можем просто помнить, что «физический размер» пикселя CSS — это неизменное значение в миллиметрах, своё для каждого типа экрана. На экранах Apple Retina (iPhone, iPad, Mac) это значение варьируется от 0,11 до 0,23 мм. Даже не спрашивайте нас о форме пикселя (это сложный вопрос!), просто помните — используется одно значение, а не набор чисел.

Пиксель CSS также не совпадает с аппаратным пикселем — тот является минимальным размером точки в соответствии с физическими характеристиками конкретного экрана.

Теперь мы можем наконец поговорить о device pixel ratio (DPR) — соотношении пикселей устройства. Понимание DPR чрезвычайно важно, если вы хотите, чтобы ваши изображения выглядели одинаково хорошо на всех устройствах.

Вы можете открыть вкладку DevTools в любом браузере (нажмите F12), который вы используете прямо сейчас, и набрать devicePixelRatio, чтобы узнать DPR вашего текущего экрана. При этом, если перетащить окно на другой экран (например, на внешний дисплей) — значение обновится. Оно рассчитывается по формуле:

devicePixelRatio = размер пикселя CSS / размер аппаратного пикселя

Возьмем изображение с шириной 1000 пикселей и высотой 1000 пикселей.

Поместим его на странице:

Установив width равным 1000px, вы говорите браузеру отображать 1000*1000 = 1 млн пикселей CSS. Если DPR (соотношение пикселей вашего устройства) равно единице (экран — не Retina), то задействуется 1000 * 1 * 1000 * 1 = 1 млн аппаратных пикселей.

Один аппаратный пиксель отвечает за один пиксель «изображения», как и должно быть интуитивно.

Но что, если у вас Retina, и DPR=2? Теперь ваше изображение отображается с помощью 1000 * 2 * 1000 * 2 = 4 млн аппаратных пикселей. Это означает, что один пиксель вашего изображения отображается четырьмя аппаратными пикселями. Иными словами, изображение масштабируется: каждый пиксель его данных «растягивается» для отображения на экране.

Как мы выяснили, размеры изображения иногда не соответствуют аппаратному обеспечению один к одному. А поскольку браузеры не могут определить содержание растрового изображения, они используют универсальные алгоритмы (математика!), чтобы подгадать лучшую стратегию изменения размера. И, как вы можете догадаться, они не всегда угадывают правильно.

Вы можете управлять этим процессом с помощью CSS-свойства image-rendering (отображение изображения). Оно помогает задать стратегию, но вы по-прежнему не можете контролировать конкретный алгоритм, выбранный браузером.

Разные значения image-rendering CSS и как они отображаются в Chrome

При масштабировании области 4px до 16px в браузере доступно только четыре пикселя изображения, остальные 12 необходимо угадать. Размытые края и другие артефакты — результат такого «угадывания» или интерполяции, выполняемой алгоритмом изменения размера.

Ваша цель в том, чтобы избежать вот такого масштабирования любым способом:

Постарайтесь понять контекст изображения и установить приемлемое качество.
Измените размер оригинальной картинки на max_size_of_your_container * DPR.
Подготовьте несколько версий изображений для большинства распространенных DPR (равному 1, 2 и даже 3).
Учтите это в вашей разметке:

SVG — это масштабируемая векторная графика. Так что по определению SVG-изображения не боятся масштабирования. Почему?

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

Ниже — печенька, созданная при помощи простых геометрических фигур, и экспортированная в виде svg-файла:

Пока её нельзя увидеть. Вместо этого — набор тегов:

<svg> — это контейнер для нашей картинки,
<g> — единица композиции (на самом деле этот тег бесполезен в примере кода выше, он только для демонстрации),
<ellipse>, <path> — геометрические примитивы. <path> — самая универсальная форма, которую можно использовать для всех других фигур (круги, треугольники, сложные кривые).

Внешний вид фигуры определяется атрибутами. В нашем примере rx, d, cx, и другие подобные атрибуты отвечают за размер и положение. Это координаты, но не в системе координат экрана — они рассчитываются относительно параметра viewBox у SVG-изображения. В нашем случае:

Это значит, что изображение имеет отступ в 0 пикселей слева и 0 пикселей сверху, ширину 200 пикселей и высоту 120 пикселей. Это размер и расположение области просмотра, в которой находится наше изображение. Наш SVG также имеет width- и height-атрибуты — они определяют реальный размер самого изображения. В нашем случае это будет 200×120 CSS-пикселей (картинка 1).

Баловство с различными атрибутами SVG: 1. Исходная картинка; 2. Убрали атрибуты ширины и высоты; 3. Ширина = 30 пикселей; 4. Атрибут preserveAspectRatio: none; 5. Атрибут preserveAspectRatio: meet; 6. Атрибут preserveAspectRatio: slice.

Удалим width- и height-атрибуты. Теперь размер нашего изображения определяется размером окна браузера (картинка 2). Другой способ установить размер для изображения — задать width и/или height в CSS. Например:

Теперь размер изображения составляет 20% от высоты окна браузера (картинка 3). Но подождите, почему наше печенье расположено по центру? Причина — еще один атрибут, который называется preserveAspectRatio. Его значение по умолчанию — xMidYMid meet. Это значит: сохранить исходные пропорции изображения, сохранить содержимое текущего viewBox видимым, масштабировать изображение как можно больше, центрировать результат как по вертикали, так и по горизонтали. Но если поиграть с его значениями, получится три разных результата — картинки 4−6.

А если нам нужна только половинка печенья, можно просто уменьшить ширину viewBox (картинка 6):

Используя атрибуты viewBox и preserveAspectRatio вместе, можно масштабировать изображения миллионами способов.

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

Во-вторых, мы можем анимировать пафы (<path>) внутри SVG-изображения, и сделать само изображение анимированным.

Наконец, SVG-файлы могут быть опасны. Ничто не мешает кому-то поместить тег <script> и немного JavaScript в синтаксис XML. А браузер запустит этот код. Так что соблюдайте осторожность при работе с SVG из ненадежных источников и тщательно проверяйте, что там внутри.

Ну ок, SVG-изображения имеют суперспособности. Но должны ли мы всегда использовать их для простой графики? Нет! Использование SVG дает нам файл с изображением печеньки в 26 КБ, в то время как растровый WebP (подробнее о нем позже) того же изображения умещается в 16 КБ. И если нет никакой разницы, зачем платить больше?

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

А теперь пришло время оптимизировать SVG-изображение с помощью svgo. Благодаря этому можно получить SVG-файл в 13 Кб вместо растрового файла формата WebP в 16 Кб. Вектор снова выиграл!

Поскольку изображения SVG — это просто текстовые файлы, они очень хорошо сжимаются. Мы ещё раз повторим: «Идеального формата не существует», но вы можете выбрать подходящий формат для вашей задачи и применить столько оптимизаций, сколько захотите.

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

Что если я скажу, что мир не настоящий, а хорошо проработанная компьютерная графика, помещенная в виртуальную реальность? Тогда создатель этого мира по праву может считать себя богом. Звучит как сюжет фантастического фильма? Дайте CG десяток лет, и фантазии превратятся в пугающую реальность.

Однако, уже сейчас освоив компьютерную графику вы сможете использовать ее для веб-дизайна, 3D-игр, 3D-печати, анимации, виртуальной реальности, архитектурной визуализации, эффектов для кино и многого другого. В этой статье мы разберем основы компьютерной графики и ответим на два важных вопроса: “С чего начать?” и “Какой софт использовать?”. Сосредоточьтесь, мы начинаем.

Двумерная графика

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

Это все очень интересно, теперь у вас есть базовое понимание о двумерной графике, которое пригодится веб-дизайнерам, 2D аниматорам, художникам. А теперь перейдем к графике будущего.

Трехмерная графика

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

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

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

…мы ищем обширные художественные и технические навыки, а не способность запускать программы.
— Pixar, Careers Page

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

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

Читайте также: