Кодування зображення та звуку

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

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

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

Звук кодується як послідовність амплітуд (відхилень) звукового сигналу.

У растровій графіці зображення зберігаються у вигляді сітки пікселів. Пікселі – це точки, які мають задане положення на зображенні та колір. Ми кодуємо кольори у пікселях певним заздалегідь визначеним способом, наприклад, часто використовується модель RGB. Чим дрібніша сітка (чим більше пікселів містить зображення), тим якіснішим і детальнішим буде зображення. Оскільки пікселі не можна далі розділити, у міру збільшення растрового зображення пікселі також будуть збільшені, а якість буде втрачено. На малюнку ми бачимо, як можна зберегти зображення кола на невеликій кількості пікселів.

Глибина кольору – це кількість кольорів, яку може мати один піксель. Чим більша глибина кольору, тим більше кольорів ми маємо, і зображення може бути вищої якості. На малюнку показано різницю, коли доступні 2 кольори, 4 кольори та 256 кольорів.

Розмір растрового зображення визначається кількістю пікселів. Зображення 1024 × 1024 містить 1024 \cdot 1024 (приблизно один мільйон) пікселів і має розмір 1 Mpx (мегапіксель). Роздільна здатність – це значення, яке вказує, наскільки детальним є зображення. Воно надається в одиницях DPI (dots per inch, тобто точок на дюйм).

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

Векторні зображення часто зберігаються у форматі SVG. Текстове представлення простої форми у форматі SVG може виглядати так:

<circle cx="60" cy="60" r="55" fill="green" />

Спочатку ми визначаємо тип об’єкта: circle означає коло англійською мовою. Нижче наведено різні параметри, які точно визначають, як має виглядати це коло. Параметри cx і cy визначають положення центра кола в координатах (60, 60) на зображенні. Параметр r визначає радіус кола, а колір заливки вказано як зелений у параметрі fill. Таким чином, відтворене зображення буде виглядати так:

У форматі SVG можна закодувати багато інших типів об’єктів, наприклад rect (прямокутник), polygon (багатокутник) або line (лінія). Для кожного типу об’єкта ми задаємо різні параметри: наприклад, визначаємо розмір прямокутника за його висотою та шириною. Однак, якщо ми збираємося створювати власні векторні зображення, не обов’язково писати все текстом – є комп’ютерні програми, які дозволять нам працювати лише з об’єктами і писатимуть текстовий код за нас.

Існує 2 основних типи кодування зображень: векторна та растрова графіка. Растрові зображення складаються з пікселів (кольорових крапок), векторні зображення складаються з геометричних об’єктів. Формати, що використовують растрову графіку: BMP, JPG, PNG і GIF. Найбільш використовуваним векторним форматом є SVG, векторна графіка також використовується у форматі PDF.

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

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

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

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

Представлення кольору є ключовим для багатьох сфер, наприклад веб-дизайну, цифрової фотографії, відео чи друку. Існує кілька різних колірних моделей, найпоширенішими з яких є RGB, CMYK і HSL.

Модель RGB (Red-Green-Blue) використовується для цифрових дисплеїв, де кольори відображаються як комбінація трьох основних кольорів – червоного, зеленого та синього. Кожен із цих кольорів має числове значення в діапазоні від 0 до ⁠255. Коди RGB зазвичай записуються з використанням шістнадцяткових чисел. Оскільки це кодування дуже часто використовується у графічних програмах, корисно мати принаймні базове уявлення про те, які кольори відповідають різним кодам RGB.

Модель CMYK (Cyan-Magenta-Yellow-Key) використовується для друку, коли кольори створюються шляхом змішування трьох основних кольорів – блакитного, пурпурового та жовтого з чорним.

Модель HSL (Hue-Saturation-Lightness) дозволяє відображати кольори за трьома параметрами – відтінком, насиченістю та яскравістю. Відтінок змінюється від 0 до ⁠360 градусів, насиченість визначає інтенсивність кольору, а яскравість визначає світлість або темність кольору. Ця модель дозволяє легко регулювати колір, наприклад, змінювати яскравість або насиченість.

Колірна модель RGB — це спосіб представлення кольорів за допомогою трьох компонентів: червоного (red, R), зеленого (green, G), синього (blue, B). Це адитивний спосіб змішування кольорів – окремі компоненти кольору складаються і створюють світло більшої інтенсивності (світліший колір).

При використанні моделі RGB ми записуємо колір у вигляді трійки чисел. Для запису значення окремих компонентів використовується багато різних позначень. Так, помаранчевий колір можна записати так:

• RGB(255, 160, 64) = десятковий запис восьмирозрядного числа
• #FFA040 = шістнадцятковий запис
• RGB(100%, 63%, 25%) = колірні компоненти у відсотках
• RGB(1, 0.63, 0.25) = колірні компоненти у вигляді чисел від 0 до 1

Часто використовуваним позначенням є десятковий запис восьмирозрядного числа, тобто чисел від 0 до 255.

Основні принципи

Звук — це механічні коливання навколишнього середовища (зазвичай повітря) із частотою приблизно 20–20 000 Гц. Вищі частоти сприймаються вухом як вищі тони.

Під час запису звуку на цифровий пристрій механічне коливання повітря перетворюється мікрофоном в електричну напругу. Аналого-цифровий перетворювач (АЦП) перетворює цей безперервний сигнал у двійкові дані. Під час відтворення звуку дані перетворюються на аналоговий сигнал за допомогою АЦП. Потужність цього сигналу збільшується підсилювачем і його можна відтворювати за допомогою динаміка, який знову коливає повітря вібраціями мембрани.

Кодування звукової хвилі

Коливання повітря є безперервним, щомиті звукова хвиля має певне відхилення. Безперервним є і аналоговий сигнал, який створюється, наприклад, мікрофоном. Безперервна форма звукової хвилі показана на рисунку оранжевим кольором. На горизонтальній осі зображено час, на вертикальній – миттєве відхилення сигналу.

Цифрові пристрої не можуть обробляти звукову інформацію протягом нескінченної кількості моментів. При перетворенні аналогового сигналу в цифровий здійснюється так звана дискретизація – сигнал перетворюється в непостійний (дискретний), який змінює обмежену кількість значень протягом певного часу (на малюнку позначено синіми крапками). Це пов’язано з частотою дискретизації. Наприклад, при частоті дискретизації 48 кГц 48 000 значень семплів чергуються протягом секунди.

Навіть миттєве відхилення сигналу не може мати необмеженої кількості значень, тому виконується так зване квантування, яке пов’язане з роздільною здатністю семплу. Наприклад, роздільна здатність (семплу) 4 біти означає, що миттєве відхилення вибірки може приймати 2⁴ = 16 станів (див. рисунок).

Для стиснення з втратами значення бітрейт (вказує швидкість передачі) є важливим. Чим вищий бітрейт, тим більше даних описується за секунду аудіозапису (наприклад, 320 кбіт/с є найвищим бітрейтом для файлів mp3).

Тонове кодування

На додаток до повного запису звукових хвиль (описано вище), звук можна представити як послідовність тонів. Це використовується під час створення музики або у зв’язку з інтерфейсом MIDI. Усередині послідовності тони можуть мати, наприклад, різну висоту, довжину, гучність тощо. Цим тонам потім «призначається» певний звук, або у формі семплу, або згенерований синтезатором. Звук, представлений у вигляді послідовності тонів (у форматі MID), раніше використовувався, наприклад, як музичний супровід комп’ютерних ігор. Наразі використовується більше для роботи зі звуком, отримані треки згодом експортуються у вигляді звичайного цифрового запису сигналу.