Завдання
Розробити текстовий мультимовний варіант персональної сторінки та виконати його розміщення на сервері.
Лабораторна робота № 3
Графіка в Web-технологіях:
Розробка фотографічного матеріалу для персональних сторінок
Мета роботи: вивчити і практично оволодіти сучасними технологіями роботи с графічною інформацією в WWW, оформити та розташувати на сервері варіант персональної Web-сторінки з фотографічним матеріалом.
Растрове і векторне представлення графіки
Основою растрового представлення графіки є пиксел (крапка) із указівкою її кольору. При описі, наприклад, червоного еліпса на білому тлі приходиться вказувати колір кожної крапки як еліпса, так і тла. Зображення представляється у виді великої кількості крапок - чим їх більше, тим візуально якісніше зображення і більше розмір файлу. Та сама картинка може бути представлена з кращою чи гіршою якістю відповідно до кількості крапок на одиницю довжини - дозволом (крапок на дюйм - dpі чи пикселов на дюйм - ppі).
Крім того, якість характеризується ще і кількістю кольорів і відтінків, що може приймати кожна крапка зображення. Чим більшою кількістю відтінків характеризується зображення, тим більша кількість розрядів потрібна для їх опису. Червоний може бути кольором номер 001, а може й 00000001. Таким чином, чим якісніше зображення, тим більше розмір файлу.
Растрове представлення звичайно використовують для зображень фотографічного типу з великою кількістю деталей чи відтінків. На жаль, масштабування таких картинок у будь-яку сторону звичайно погіршує якість. При зменшенні кількості крапок губляться дрібні деталі і деформуються написи (правда, це може бути не так помітно при зменшенні візуальних розмірів самої картинки - тобто збереженні дозволу). Додавання пикселов приводить до погіршення різкості і яскравості зображення, тому що новим крапкам приходиться давати відтінки, середні між двома кольорами. Поширено формати .tіf, .gіf, .jpg, .png, .bmp, .pcx і ін.
Векторне представлення полягає в описі елементів зображення математичними кривими з указівкою їхніх кольорів і заповнювання (згадаєте, коло й окружність - різні фігури). Червоний еліпс на білому тлі буде описаний лише двома математичними формулами - прямокутника й еліпса відповідних кольорів, розмірів і місця розташування. Очевидно, такий опис займе значно менше місця, чим у першому випадку. Ще одна перевага - якісне масштабування в будь-яку сторону. Збільшення чи зменшення об'єктів виробляється збільшенням чи зменшенням відповідних коефіцієнтів у математичних формулах. На жаль, векторний формат стає невигідним при передачі зображень з великою кількістю відтінків чи дрібних деталей (наприклад, фотографій).
Таким чином, вибір растрового чи векторного формату залежить від цілей і задач роботи з зображенням. Якщо потрібна фотографічна точність передачі кольору, то кращим є безумовно растр. Логотипи, схеми, елементи оформлення зручніше представляти у векторному форматі. Зрозуміло, що й у растровому й у векторному представленні графіка (як і текст) виводяться на екран монітора чи пристрою для друку у виді сукупності крапок. В Інтернет графіка представляється в одному з растрових форматів, що розуміються броузерами без установки додаткових модулів - GІF, JPG, PNG.
Колірні моделі RGB і CMYK
Колірна модель RGB
Безліч кольорів видно оттого, що об'єкти, їх випромінюючі, світяться. До таких кольорів можна віднести, наприклад, біле світло, кольори на екранах телевізора, монітора, кіно, слайда-проектора і так далі. Кольорів величезна кількість, але з них виділено тільки три, котрі вважаються основними (первинними): це - червоний, зелений, синій.
При змішанні двох основних кольорів результуючий колір освітляється: зі змішання червоного і зеленого виходить жовтий, зі змішання зеленого і синього виходить блакитний, синій і червоний дають пурпурний. Якщо змішуються всі три кольори, у результаті утвориться білий. Такі кольори називаються аддитивними.
Модель, в основі якої лежать зазначені кольори, зветься колірною моделлю RGB - по перших буквах англійських слів Red (Червоний), Green (Зелений), Blue (Синій).
Ця модель представляється у виді тривимірної системи координат. Кожна координата відбиває внесок відповідної складової в конкретний колір у діапазоні від нуля до максимального значення. У результаті виходить деякий куб, усередині якого і "знаходяться" усі кольори, які утворюють колірний простір.
Важливо відзначити особливі крапки і лінії цієї моделі:
Початок координат: у цій крапці всі складові дорівнюють нулю, випромінювання відсутні, а це рівносильно темряві, тобто це крапка чорного кольору.
Крапка, найдальша від початку: у цій крапці всі складові мають максимальне значення, що дає білий колір.
На лінії, що з'єднує ці крапки (по діагоналі куба), розташовуються сірі відтінки: від чорного до білого. Це відбувається тому, що всі три складових однакові і розташовуються в діапазоні від нуля до максимального значення. Цей діапазон інакше називають сірою шкалою (Grayscale). У комп'ютерних технологіях зараз найчастіше використовуються 256 градацій (відтінків) сірого. Хоча деякі сканери мають можливість кодувати до 1024 відтінків сірого і вище.
Три вершини куба дають чисті вихідні кольори, інші три відбивають подвійні змішання вихідних кольорів.
Колірна модель CMYK
До відбиваних відносяться кольори, що самі не випромінюють, а використовують біле світло, віднімаючи з нього визначені кольори. Такі кольори називаються субтрактивними, оскільки вони залишаються після вирахування основних аддитивних. Зрозуміло, що в такому випадку й основних субтрактивних кольорів буде три: блакитний, пурпурний, жовтий.
Ці кольори складають так звану поліграфічну тріаду. При печатці фарбами цих кольорів поглинаються червона, зелена і синя складові білого світла таким чином, що велика частина видимого колірного спектра може бути репродукована на папері. Кожному пикселу в такому зображенні привласнюються значення, що визначають процентний вміст тріадних фарб.
При змішанні двох субтрактивних складових результуючий колір затемнюється, а при змішанні всіх трьох повинний вийти чорний колір. При повній відсутності фарби залишається білий колір (білий папір).
У підсумку виходить, що нульові значення складових дають білий колір, максимальні значення повинні давати чорний, їхні рівні значення - відтінки сірого, крім того, маються чисті субтрактивні кольори та їх подвійні сполучення. Це означає, що модель, у якій вони описуються, схожа на модель RGB.
Але проблема полягає в тім, що дана модель покликана описувати реальні поліграфічні фарби, що, на жаль, далеко не так ідеальні, як кольоровий промінь. Вони мають домішки, тому не можуть цілком перекрити весь колірний діапазон, а це приводить, зокрема , до того, що змішання трьох основних фарб, що повинне давати чорний колір, дає якийсь невизначений ("брудний") темний колір, і це скоріше темно-коричневий, чим глибокий чорний колір.
Для компенсації цього недоліку в число основних поліграфічних фарб була внесена чорна фарба. Саме вона додала останню букву в назву моделі CMYK, хоча і не зовсім звичайно: С - це Cyan (Голубой), М - це Magenta (Пурпурний), Y - Yellow (Жовтий), а К - це black (Чорний), тобто від слова узята не перша, а остання буква.
Таким чином, моделі RGB і CMYK, хоча і зв'язані одна з одною, однак їх взаємні переходи друг у друга (конвертування) не відбуваються без утрат, оскільки колірне охоплення в них різне.
Формати зображень
GІ89a - палітра, що використовує одночасно не більш 256 кольорів, прозорість одного з кольорів, можливість збереження з чергуванням рядків (при перегляді спочатку виводиться кожна 8-а, потім кожна 4-а і т.д. - це дозволяє судити про зображення до його повного завантаження). Здатний містити кілька кадрів в одному файлі з наступною послідовною демонстрацією (т.зв. "анімірований GІF"). Зменшення розміру файлу досягається видаленням з опису палітри невикористовуваних кольорів і порядкового стиску даних (записується кількість крапок повторюваного по горизонталі кольору, а не кожна крапка з указівкою її кольору). Такий алгоритм дає кращі результати для зображень із протяжними по горизонталі однотонними об'єктами.
648 bytes |
274 bytes |
На жаль, з 1995 року розроблювач GІF компанія Compuserve зробила платним будь-яке його використання в програмних продуктах (крім безкоштовного программного забеспечення). Це приводить до поступового витиснення цього популярного формату з Інтернет. Можна сказати, що на поверхні його тримає тільки здатність містити анімацію. Вона використовується в першу чергу для створення рекламних баннерів.
JPEG - мільйони кольорів і відтінків, пряма палітра (що не набудовується), призначений для представлення складних фотозображень. Різновид progressіve JPEG дозволяє зберігати зображення з виводом за зазначену кількість кроків (від 3 до 5 у Photoshop'e) - спочатку з маленьким дозволом (поганою якістю), на наступних етапах первинне зображення перемальовується усе більш якісною картинкою. Анімація чи прозорий колір форматом не підтримуються. Зменшення розміру файлу досягається складним математичним алгоритмом видалення інформації - якщо якість, що замовляється, нижче - коефіцієнт стиску більше, файл менше. Головне, підібрати максимальний стиск при мінімальній утраті якості. Крім коефіцієнта стиску ще приходиться робити вибір між типами формату - стандартний, оптимизований чи прогресивний. Найбільш придатний формат для розміщення в Інтернет повнокольорових зображень. Імовірно, до появи могутніх алгоритмів стиску зображення без утрати якості залишиться ведучим форматом для представлення фотографій у Web.
PNG - поки використовується рідко, створювався спеціально для Інтернет як заміна перших двох форматів і завдяки патентній політиці Compuserve поступово витісняє GІF. Дозволяє вибирати палітру збереження - сірі півтони, 256 кольорів, true color ("щирі кольори"). У залежності від властивостей зображення дійсно іноді переважніше GІF чи JPG. Дозволяє використовувати "прозорий" колір, але, на відміну від GІF таких кольорів може бути до 256. На відміну від GІF стиск без утрати якості реалізується і по горизонталі і по вертикалі (використовується спеціальний алгоритм). Не вміє створювати анімацій (для цього розробляється формат MNG). На жаль, повнокольоровий варіант даного формату навряд чи буде широко розповсюджений в Інтернету через свої розміри. Однак його можна рекомендувати для збереження і переносу фотозображень - займає місця менше, ніж tіf і не погіршує якості як jpg (поліграфістами не використовують, тому що в заголовку формату PNG не передбачене місце під параметри дозволу і печатки як у .tіf чи .psd).