Растровая и векторная графика: это как?

Есть два вида кар­ти­нок: в одной мил­ли­о­ны цве­тов и пол­ный фото­ре­а­лизм; вто­рую мож­но уве­ли­чи­вать и умень­шать до бес­ко­неч­но­сти без поте­ри каче­ства. Вот как это всё работает.

👉 Как и боль­шин­ство ста­тей в жур­на­ле «Код», эта ста­тья для начи­на­ю­щих. Юные Арте­мии, вам не сюда. Луч­ше поре­шай­те наши задач­ки в паб­ли­ке

Растровая графика

Растр — это мно­же­ство мел­ких точек, из кото­рых может состо­ять изоб­ра­же­ние. В слу­чае с ком­пью­те­ром растр — это пик­се­ли, из кото­рых состо­ит фотография. 

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

Растровая графика Чем силь­нее уве­ли­чим фото­гра­фию, тем боль­ше вид­ны пиксели 

👉 У раст­ро­вой гра­фи­ки есть два глав­ных пара­мет­ра: раз­мер изоб­ра­же­ния и глу­би­на цвета.

Раз­мер изоб­ра­же­ния — это коли­че­ство пик­се­лей по гори­зон­та­ли и вер­ти­ка­ли. Чем боль­ше раз­мер, тем силь­нее мож­но уве­ли­чи­вать кар­тин­ку без поте­ри каче­ства. Напри­мер, возь­мём одну и ту же фото­гра­фию, но у одной будет раз­мер 100 на 200 пик­се­лей, а у дру­гой — 1000 на 2000 пикселей:

Размер изображения — это количество пикселей по горизонтали и вертикали В одном и том же мас­шта­бе вто­рая кар­тин­ка смот­рит­ся гораз­до луч­ше, пото­му что в ней боль­ше пик­се­лей, кото­рые пере­да­ют боль­ше деталей 

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

Глу­би­на цве­та. Пред­ставь­те, что ваша каме­ра в теле­фоне может раз­ли­чать толь­ко 16 цве­тов. В этом слу­чае фото­гра­фии полу­ча­лись бы такими:

Глубина цвета В целом понят­но, что тут изоб­ра­же­но, но выгля­дит странно 

Это и есть глу­би­на цве­та — сколь­ко раз­ных оттен­ков при­сут­ству­ет на изоб­ра­же­нии. В нашем при­ме­ре 16 цве­тов — это 4 бита, пото­му что 2 в 4 сте­пе­ни = 16. Срав­ни­те, как выгля­дит та же фото­гра­фия с глу­би­ной цве­та 16 и 8 бит:

Чем больше глубина цвета, тем плавнее цветовые переходы на фото Чем боль­ше глу­би­на цве­та, тем плав­нее цве­то­вые пере­хо­ды на фото 

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

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

Векторная графика

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

  • точек,
  • эллип­сов,
  • пря­мо­уголь­ни­ков,
  • мно­го­уголь­ни­ков,
  • кри­вых любой сложности.

Что­бы это нари­со­вать, у каж­до­го эле­мен­та есть свои пара­мет­ры, например:

  • коор­ди­на­ты,
  • цвет,
  • раз­мер,
  • тол­щи­на линии,
  • тол­щи­на контура,
  • цвет кон­ту­ра,
  • про­зрач­ность,
  • ради­ус кри­виз­ны и так далее.

Если ком­пью­те­ру нуж­но нари­со­вать звёзд­ное небо, мы можем дать ему такие команды:

  1. Создай пустой рисунок.
  2. Залей его гра­ди­ен­том свер­ху вниз от тёмно-синего к синему.
  3. Поставь точ­ку {белая, раз­мер 0,5, непро­зрач­ность 100%} по коор­ди­на­там 10,8.
  4. Поставь точ­ку {белая, раз­мер 0,4, непро­зрач­ность 100%} по коор­ди­на­там 14,9.
  5. Поставь точ­ку {белая, раз­мер 1,1, непро­зрач­ность 80%} по коор­ди­на­там 19,31.
  6. … добав­ля­ем ещё 113 звёзд.

В ито­ге полу­чим такой рисунок:

Растровая и векторная графика Избра­же­ние: wallpapersafari.com

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

👉 Сила век­тор­ной гра­фи­ки — в воз­мож­но­сти бес­ко­неч­но уве­ли­чи­вать и умень­шать раз­мер изоб­ра­же­ния без поте­ри каче­ства. При изме­не­нии раз­ме­ра ком­пью­тер сра­зу пере­счи­ты­ва­ет все фор­му­лы и отри­со­вы­ва­ет кар­тин­ку зано­во. Поэто­му при уве­ли­че­нии век­тор­ной гра­фи­ки не появ­ля­ют­ся пик­се­ли и раз­мы­тие, даже если нам нуж­но уве­ли­чить одну звез­ду в 100 раз:

Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества

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

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

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

Векторная графика Икон­ки — Сер­гей Чикин 

Что дальше

Будем осва­и­вать век­тор­ную гра­фи­ку в CSS. Заод­но потре­ни­ру­ем­ся наво­дить кра­со­ту на стра­ни­цах и попрак­ти­ку­ем­ся в коде.

Текст и иллюстрации:

Миха­ил Полянин

Редак­тор:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев