БазовийІнформатика

Растрові та векторні зображення

Типи цифрових зображень, їх об'єкти та властивості, формати файлів.

Два світи цифрових зображень

Усі зображення на комп'ютері можна розділити на два принципово різні типи: растрові та векторні. Вони відрізняються самою природою зберігання інформації — і це визначає, де і як їх використовують. 🖼️ Уяви, що тобі потрібно намалювати кота: • Растровий підхід: взяти клітчастий зошит і зафарбувати кожну клітинку у відповідний колір. Здалеку — кіт, але якщо наблизитися — видно квадратики. • Векторний підхід: описати кота математичними формулами: «коло радіусом 50, лінія від точки A до точки B». При будь-якому збільшенні — кіт чіткий.

Растрові зображення — пікселі

🔲 Растрове (bitmap) зображення — це сітка пікселів (точок), кожен з яких має свій колір.

📐 Піксель (pixel = picture element) — найменший неподільний елемент зображення
🗺️ Роздільна здатність — кількість пікселів: 1920×1080 означає 1920 по горизонталі і 1080 по вертикалі
🎨 Глибина кольору — скільки біт відводиться на колір пікселя (1 біт = чорно-білий, 8 біт = 256 кольорів, 24 біт = 16,7 млн кольорів)
📏 DPI (dots per inch) — кількість точок на дюйм, визначає якість друку (72 dpi — екран, 300 dpi — якісний друк)
⚠️ Масштабування: при збільшенні зявляється «пікселізація» — чіткі квадратики замість плавних ліній

Схема: Будова растрового зображення

Приклад

📊 РАСТРОВЕ ЗОБРАЖЕННЯ — сітка пікселів: ┌─────────────────────────────┐ │ Зображення 6×6 пікселів │ ├───┬───┬───┬───┬───┬───┤ │ 🟥│ 🟥│ 🟧│ 🟨│ 🟩│ 🟦│ ← рядок 1 ├───┼───┼───┼───┼───┼───┤ │ 🟦│ 🟪│ 🟥│ 🟧│ 🟨│ 🟩│ ← рядок 2 ├───┼───┼───┼───┼───┼───┤ │ 🟩│ 🟦│ 🟪│ 🟥│ 🟧│ 🟨│ ← рядок 3 └───┴───┴───┴───┴───┴───┘ ↑ кожна клітинка — 1 піксель Память = ширина × висота × глибина_кольору Приклад: 1920 × 1080 × 3 байти = ~6 МБ (без стиснення)

Векторні зображення — математика

📐 Векторне зображення зберігає не пікселі, а математичні описи фігур — точки, лінії, криві та заливки.

📍 Точка (вузол, anchor point) — координати у просторі (x, y)
📏 Лінія (відрізок) — зєднання двох точок
〰️ Крива Безьє — плавна лінія, що задається опорними точками і маніпуляторами (ручками)
🔷 Контур (path) — послідовність точок і кривих, що утворюють форму
🎨 Заливка (fill) — суцільний колір, градієнт або текстура всередині контуру
✏️ Обведення (stroke) — лінія вздовж контуру з налаштуваннями товщини та кольору
✅ Масштабування: при будь-якому збільшенні зображення залишається чітким, бо перераховуються формули

Схема: Будова векторного зображення

Приклад

📐 ВЕКТОРНЕ ЗОБРАЖЕННЯ — математичні об'єкти: ● (200, 50) ← вузол ╱╲ ╱ ╲ ╱ ╲ ● (50,250)──────● (350,250) Це НЕ пікселі! У файлі зберігається: { "фігура": "трикутник", "точки": [(200,50), (50,250), (350,250)], "заливка": "синій", "обведення": "чорний, 2px" } При збільшенні 10×: ● (2000, 500), (500, 2500), (3500, 2500) → Формули перераховуються → завжди чітко! ✅

Порівняння: растр vs вектор

⚖️ Ключові відмінності двох типів зображень:

🔲 Растр: пікселі | 📐 Вектор: формули та об'єкти
📸 Растр: ідеальний для фото і складних зображень | 🎨 Вектор: ідеальний для логотипів, іконок, шрифтів
🔍 Растр: при збільшенні — розмивається | 🔍 Вектор: при будь-якому масштабі — чіткий
💾 Растр: великий розмір файлу для деталізованих зображень | 💾 Вектор: малий розмір для простих форм
🎭 Растр: складно редагувати форму | 🎭 Вектор: легко змінювати форму, колір, розмір
🛠️ Програми для растру: Photoshop, GIMP, Paint | 🛠️ Програми для вектору: Illustrator, Inkscape, Figma

💡 Цікавий факт: Крива Безьє

💡

〰️ Криву Безьє (Bézier curve) розробив французький інженер П'єр Безьє у 1960-х роках, коли працював у Renault — він шукав спосіб математично описати форму кузова автомобіля для комп'ютерного моделювання! Сьогодні криві Безьє використовуються скрізь: логотипи, шрифти, анімації в кіно, форми автомобілів і літаків. Наприклад, кожна літера у шрифті — це набір кривих Безьє. Усі 26 літер латинського алфавіту у шрифті Times New Roman описуються приблизно 3000 точками!

Формати растрових зображень

📁 Основні формати для зберігання растрової графіки:

📷 JPEG / JPG — стиснення з втратою якості; ідеальний для фотографій; не підтримує прозорість; маленький розмір файлу
🖼️ PNG — стиснення без втрат; підтримує прозорість (alpha-канал); ідеальний для скріншотів, іконок, веб-графіки
🎞️ GIF — анімація; лише 256 кольорів; підтримує прозорість (1 біт); маленький розмір для простих анімацій
🏆 TIFF / TIF — без втрат; дуже великий файл; використовується в поліграфії та медицині
📸 RAW — сирі дані з матриці камери (Canon .CR2, Nikon .NEF); без обробки; максимальна якість для профі
🌐 WebP — сучасний формат від Google; стиснення краще за JPEG і PNG; підтримує анімацію і прозорість
🗜️ BMP — без стиснення; величезний розмір; зберігає кожен піксель без втрат; рідко використовується сьогодні
📱 HEIC / HEIF — формат Apple; краще стиснення ніж JPEG при вищій якості; використовується в iPhone

Схема: Коли використовувати растрові формати

Приклад

🗺️ ВИБІР ФОРМАТУ РАСТРОВОГО ЗОБРАЖЕННЯ: Потрібна прозорість? ├── ТАК → PNG (або WebP) └── НІ ├── Це фотографія? │ ├── ТАК → JPEG (або WebP) │ └── НІ │ ├── Анімація? → GIF (або WebP) │ └── Поліграфія? → TIFF └── Максимальна якість? ├── Друк/архів → TIFF або PNG └── Веб → WebP або JPEG 💡 Порада: WebP — найсучасніший вибір для веб, бо він менший ніж JPEG і підтримує прозорість як PNG!

Формати векторних зображень

📁 Основні формати для зберігання векторної графіки:

🌐 SVG (Scalable Vector Graphics) — відкритий стандарт W3C на основі XML; відображається у браузерах; підтримує анімацію та CSS-стилі; ідеальний для іконок і логотипів в інтернеті
🎨 AI (Adobe Illustrator) — власний формат Adobe; найпопулярніший у дизайнерів; зберігає шари, ефекти, типографіку
📄 PDF (Portable Document Format) — може містити як вектор, так і растр; ідеальний для документів і друку; зберігає шрифти
📐 EPS (Encapsulated PostScript) — старий стандарт для поліграфії; підтримується всіма видавничими системами
🖌️ CDR (CorelDRAW) — власний формат CorelDRAW; популярний у Східній Європі
🎭 WMF / EMF — формати Windows для векторних зображень; використовуються в офісних програмах Microsoft
📝 DXF / DWG — формати AutoCAD; використовуються в технічному кресленні, архітектурі, інженерії

SVG — вектор у браузері

Приклад

🌐 SVG — це XML-код, який браузер перетворює на зображення:  <svg width="200" height="200"> <circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="3" /> <text x="100" y="110" text-anchor="middle" fill="white" font-size="20"> Привіт! </text> </svg> ✨ Що відмінно у SVG: • Можна редагувати у звичайному блокноті • Анімується через CSS і JavaScript • Файл кола вагою ~200 байт! • Виглядає чітко на 4K, 8K і будь-якому екрані

💡 Цікавий факт: Логотипи — завжди вектор!

💡

🏢 Чому всі великі компанії зберігають свої логотипи у векторному форматі? Уявіть: логотип Nike потрібен одночасно: • На ручці (5 мм) • На футболці (10 см) • На білборді (10 метрів) • На стіні будівлі (50 метрів) Якби логотип був растровим — для кожного розміру потрібен окремий файл з потрібною роздільною здатністю. А векторний файл один і той самий виглядає ідеально на будь-якому розмірі. Тому фірмовий стиль компанії (brandbook) завжди містить вектор: .ai, .eps або .svg файли.

Кольорові моделі у зображеннях

🎨 Колір у цифрових зображеннях описується різними моделями залежно від призначення:

🖥️ RGB (Red, Green, Blue) — для екранів; складання кольорів зі світла; (255,0,0) = яскраво-червоний; 16,7 млн кольорів при 24-бітному кодуванні
🖨️ CMYK (Cyan, Magenta, Yellow, Black) — для друку; змішування фарб; (0%,100%,100%,0%) = червоний; саме ці 4 картриджі у принтері
🎭 HSB / HSL (Hue, Saturation, Brightness/Lightness) — інтуїтивна модель; відтінок (0-360°), насиченість (0-100%), яскравість (0-100%)
📊 Grayscale — відтінки сірого; 256 рівнів; зменшує розмір файлу вдвічі
⚡ HEX (#RRGGBB) — шістнадцяткове кодування RGB для веб: #FF0000 = червоний, #000000 = чорний, #FFFFFF = білий

Схема: RGB vs CMYK

Приклад

🎨 АДДИТИВНА модель RGB (для екранів): Червоний ● ╱ ╲ ╱ ╲ Жовтий Пурпурний ╱ ● ╲ ╱ Білий ╲ ●─────────────● Зелений Синій (Cyan між ними) Червоний + Зелений = Жовтий ✨ Червоний + Синій = Пурпурний ✨ Зелений + Синій = Блакитний ✨ Усі разом = БІЛИЙ (світло) ✨ 🖨️ СУБТРАКТИВНА модель CMYK (для друку): Black + усі кольори = ЧОРНИЙ (фарба поглинає світло) Тому принтери мають чорний картридж окремо!

Стиснення зображень

🗜️ Щоб зменшити розмір файлу, застосовують стиснення двох видів:

✅ Стиснення без втрат (lossless) — точне відновлення оригіналу; формати: PNG, GIF, TIFF, WebP (режим lossless); підходить для тексту, схем, скріншотів
⚠️ Стиснення з втратою (lossy) — частина даних видаляється назавжди; формати: JPEG, WebP (режим lossy); підходить для фотографій, де дрібні втрати не помітні
📊 Коефіцієнт стиснення JPEG: якість 100% ≈ у 3× менше оригіналу, якість 50% ≈ у 15× менше, якість 20% ≈ у 30× менше
🔬 Алгоритм стиснення JPEG: зображення ділиться на блоки 8×8 пікселів → застосовується перетворення Фур'є → видаляються «непомітні» частоти
🎯 PNG-стиснення: алгоритм Deflate (той самий, що у ZIP-архівах) → без жодних втрат

💡 Цікавий факт: Чому JPEG «розмиває» краї?

💡

🔍 Якщо збільшити JPEG-зображення з написом або різкими краями, можна побачити характерні «артефакти» — розмиті плями навколо ліній. Чому? Алгоритм JPEG ділить зображення на квадрати 8×8 пікселів і стискає кожен окремо. На різких переходах між кольорами (наприклад, чорна літера на білому тлі) сусідні блоки стискаються по-різному, і на межах утворюються помітні артефакти. Тому: текст, скріншоти, іконки → завжди зберігайте в PNG! Фотографії, де дрібні артефакти непомітні → JPEG або WebP.

Метадані зображень

📋 Окрім самого зображення, файли зберігають метадані (дані про дані):

📷 EXIF (Exchangeable Image File Format) — у фотографіях: модель камери, витримка, діафрагма, ISO, час зйомки, GPS-координати
📝 IPTC — авторство, опис, ключові слова, авторські права (для пресфотографів)
🌐 XMP (Extensible Metadata Platform) — стандарт Adobe для зберігання метаданих у растрі і векторі
⚠️ Конфіденційність: якщо публікуєте фото в інтернеті — GPS-координати у EXIF можуть розкрити ваше місцезнаходження! Соціальні мережі (Instagram, Facebook) автоматично видаляють EXIF при завантаженні

Практичне завдання

Приклад

🎯 ЗАВДАННЯ: Визначте тип і формат Для кожної ситуації оберіть правильний тип і формат: 1. Логотип школи для сайту і для друку на банері 5м → ВЕКТОР: SVG (сайт) або AI/EPS (поліграфія) 2. Фотографія з екскурсії для публікації в Instagram → РАСТР: JPEG (маленький файл, якість хороша) 3. Іконка застосунку з прозорим фоном → РАСТР: PNG (підтримує прозорість) або SVG 4. Схема мережі для презентації PowerPoint → ВЕКТОР: SVG або EMF 5. Скріншот з помилкою для технічної документації → РАСТР: PNG (чіткий текст без артефактів JPEG) 6. Анімований банер для сайту → РАСТР: GIF (проста анімація) або WebP

Підсумкова таблиця форматів

📊 Швидкий довідник по форматах зображень:

🏅 JPEG — фото для веб і соцмереж; маленький файл; без прозорості
🏅 PNG — скріншоти, іконки, графіка з прозорістю; без втрат якості
🏅 SVG — логотипи, іконки, схеми для веб; масштабується нескінченно
🏅 WebP — сучасна заміна JPEG і PNG для веб; краще стиснення
🏅 GIF — проста анімація; лише 256 кольорів
🏅 TIFF — поліграфія, медицина, архів; без стиснення або без втрат
🏅 PDF — документи для друку і пересилання; може містити і вектор, і растр
🏅 RAW — оригінал з камери; максимальна якість; вимагає обробки
🏅 AI / EPS — робочі файли дизайнера; для логотипів і поліграфії