Растрова і векторна графіка, в чому між ними різниця?

Основна різниця між векторною і растровою графікою полягає у тому, що векторні зображення містять у собі інформацію про колір кожного пікселя, з якого вони складаються. Векторні ж зображення складаються із фігур, точок, тобто фігури всередині растрового зображення побудовані за допомогою математичної формули: просто комп'ютер зчитує, що там є така фігура, вона має ось таку заливку, ось такий контур, ось таку обводку такого кольору, і все це закладено невеличкою математичною формулою. І з цієї відмінності і витікають усі інші відмінності, які ми зараз обговоримо. 

Растрова графіка - плючи та мінуси

Растрова графіка, через те що вона складається із точок, із пікселів, має більшу реалістичність, і в цьому полягає найбільший її плюс. Вона має більш природні кольори, які більш звичні для нашого погляду, для нашого ока, тому що навіть коли ми бачимо щось у нашому реальному фізичному світі, воно, насправді, не має один якийсь колір. Навіть якщо ми бачимо якийсь предмет і він зелений - він, насправді, не чисто зелений, не чисто одного кольору. Він має якісь відтінки, він має тіні, бліки і дуже багато відтінків у своєму кольорі. І растрові зображення, за рахунок того що кожен піксель має свій колір, передають цю реалістичність і є більш реалістичними.

І ще один великий плюс полягає у тому, що є можливість отримати растрове зображення за допомогою спеціальних пристроїв - наприклад, фотокамери або сканеру. Тому що коли ви фотографуєте щось на свій телефон, на свою камеру - то це завжди растр. Бо будь-які зображення, які ми отримуємо з реального світу, - це буде растр, бо фотокамера зберігає у файлі інформацію про кожен піксель. І так само скан - це та сама фотографія, просто отримана завдяки іншому пристрою.

Набагато більш важливі мінуси мають растрові зображення, тому що, по-перше, це дуже великий файл (через те що зберігається інформація про кожен піксель). Для комп'ютера це дуже важкий файл, тому що це дуже багато інформації, закладеної в коді, і це - перше.

Друге - те, що растрову картинку неможливо масштабувати. Бо якщо ви берете маленьку картинку, наприклад зображення 100 на 100 пікселів - ви не можете його збільшити (зробити 500 на 500 або навіть 1000 на 1000) і не втратити при цьому якість. Тому що якщо ви так робите, то ви отримаєте отаку історію. Бо векторне зображення воно не втрачає свої якості, натомість растрове зображення (через те що кожен піксель збільшується у розмірі) просто стає пікселізоване. Тому ідеальне масштабування растрового зображення у більшу сторону просто неможливе.

Проте зараз вже існують всілякі утиліти зі штучним інтелектом, які допомагають це зробити. Ну, подивимось, можливо, у майбутньому це не буде проблема, але, насправді, я в от це не дуже сильно вірю.

І ще один важливий мінус - це те, що дуже складно вносити якісь зміни у растрове зображення. Тому що, наприклад, якщо ми маємо фотографію, де нам треба змінити колір футболки. Що ми для цього маємо робити? Маємо відкрити фотошоп, зробити якісь маніпуляції з кольором, зробити маску або навіть за допомогою пензлика щось там редагувати. Тобто не можна просто взяти і в пару кліків змінити колір цієї футболки. І це ускладнює роботу з растровою графікою. 

Векторна графіка - плюси та мінуси

Тепер поговоримо про вектор. Плюси вектора полягають, відповідно, у тому, що векторні зображення мають маленький розмір файлу, за рахунок того що у цьому файлі міститься інформація не про кожен піксель, а про кожну фігуру. І якщо це прямокутник 5 пікселів на 5 пікселів, то у растровому зображенні буде міститися інформація про 25 цих пікселів, і вона буде дублюватись: цей піксель такого кольору, цей піксель такого кольору, цей піксель такого кольору - і так 25 разів. Натомість векторне зображення просто має інформацію: що це прямокутник, він залитий таким кольором - і все.

Тому вага файлу векторних зображень набагато менше, і це означає, що вони набагато швидше завантажуються, коли буде відкриватися ваш сайт.

Наступний великий плюс - це те, що векторне зображення не втрачає свої якості при масштабуванні. І навіть якщо ви візьмете малесеньку картинку, ви можете її збільшити (хоч зробити банер на весь будинок), але воно буде в такій самій якості. Тому ви можете брати будь-яку іконку, будь-яку картинку і вставляти її у будь-якому розмірі, і не боятися того, що там піде якась пікселізація. Усі контури будуть рівними, чіткими, і колір ніяк не постраждає, тобто повністю якість збережеться у векторних зображеннях.

І так само легко вносити якісь корективи у зображення. Тобто якщо вам треба змінити колір якогось прямокутника, вам не треба робити маску прямокутника, якось там її фарбувати - ви просто його обираєте і вказуєте іншу заливку, і все. Це все, що від вас вимагається.

Мінус векторних зображень - також, відповідно, протилежний плюсам растрових. З мінусів - це неможливість створення реалістичних зображень. Бо якщо вам треба показати якийсь реалістичний перехід між кольорами, то це не буде одна якась фігура, у якій багато кольорів. Це буде багато полігонів, кожен з яких буде свого кольору. Тобто, наприклад, якщо вам треба зробити плавний перехід із червоного у білий і ще там якісь відтінки зробити, якісь бліки, то це будуть окремі фігури: червона фігура - насичена червона, потім менш насичена і менш-менш-менш (багато таких фігур) і білий колір. Тобто чим більше фігур - тим більш реалістичне буде зображення.

І навіть отака ілюстрація (вона може бути векторною), але вона буде складатися із полігонів, і деталізація має межі. Добитися якоїсь реалістичності у векторних зображеннях дуже складно, це дуже велика серйозна робота.

І також векторні зображення неможливо отримати з якихось автоматизованих пристроїв. Тобто ви не можете сфотографувати і отримати векторну фотографію, ви не можете відсканувати і отримати векторну фотографію. Тому що векторне зображення - це завжди якесь штучне зображення, штучно створене, а не взяте з реального світу.

Коли використовувати растр, а коли вектор?

Тож для якого типу графіки який формат використовується? Фотографії - завжди растрові. Ілюстрації можуть бути векторні, можуть бути растрові. Тобто якщо ілюстрація створювалась на планшеті -  то це означає, що вона була намальована у растрі. Растрові редактори у нас, наприклад, це Photoshop, Procreate. Ілюстратори часто малюють у Procreate на своїх планшетах - це вони створюють растрові ілюстрації. Вони одразу малюються у якомусь великому розмірі, щоб потім можна було зменшити, бо збільшити, як ми знаємо, вже не вийде.

Натомість векторні ілюстрації також існують, але вони створюються за зовсім іншим принципом. Тобто векторні ілюстрації створюються не за допомогою малюнка, пензлика, а за допомогою фігур: створюється якась крива, заливається кольором. Тоді вона може створюватись у будь-якому розмірі, і її можна буде потім масштабувати.

Логотипи. Логотипи, як правило, створюються у векторі. А якщо ви бачите растровий логотип - то, скоріш за все, просто взяли векторний і перевели його у растр. Але дуже сильно рекомендую логотипи використовувати у векторі.

Так само як іконки. Іконки також можуть бути як векторними, так і растровими, але у більшості випадків іконки малюються у векторі. І якщо ви бачите іконку у растрі - значить, просто хтось її вже у растр перевів.

Декоративна графіка, тобто якісь криві, якісь там, я не знаю, щось, чим ви прикрашаєте свій інтерфейс, - це, зазвичай, теж вектор, і бажано використовувати у векторі.

Тобто взагалі все, що ви можете використовувати у векторі - краще використовувати у векторі. Пам'ятайте, що це пришвидшує завантаження вашого сайту, це пришвидшує завантаження вашого макету навіть. Тому що Figma, також, коли виставляється туди файл, - він також забирає певне місце у пам'яті.

Векторні зображення ідеально виглядатимуть на будь-якому моніторі. Тому що ви знаєте, що є монітори Retina, які мають більшу плотність пікселів. Тобто якщо ми беремо піксель звичайного монітору — то на екранах Apple на цей піксель приходиться 4 пікселі. І, відповідно, зображення масштабується і втрачає свою якість.

Я думаю, що про це треба просто окремо поговорити, щоб пояснити. Але майте на увазі: на екранах Apple графіка буде виглядати гірше, якщо це растрова графіка.

Тому така пам'ятка вам: якщо ви експортуєте для верстки растрову графіку - то одразу експортуйте її в ×2. Вона буде важчою, але вона буде добре виглядати на будь-яких моніторах. І за можливості використовуйте вектор, тобто іконки, логотипи, декоративну графіку краще використовувати у векторі.

Я сподіваюсь, що вам стала зрозумілою різниця між векторною та растровою графікою. Якщо ні - то пишіть в коментарях свої питання.