Графіка в веб. Оптимізація графіки.

Основи роботи з графічними файлами

кольорові моделі

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

Однак, якщо подивитися на екран монітора через збільшувальне скло, можна побачити, що колір будь-якої точки екрану (пікселя) формується з трьох крапок, що світяться різних кольорів: Червоного (R), Зеленого (G), і Синього (B). Оскільки в даному випадку ми маємо справу не з відбитим світлом, а зі світловим екраном, відбувається не віднімання складових з основного кольору, а додавання квітів світлових променів. Така модель змішування кольорів називається адитивною. Чорний колір в такому випадку виходить, якщо жодна з трьох кольорових складових не задіяна. Білий колір виходить при змішуванні чистих випромінювань трьох основних кольорів (червоного, зеленого і синього) максимальної яскравості.

Для формування зображень на моніторах, екранах телевізорів, проекторах використовується адитивна кольорова схема RGB (R ed, G reen, B lue). Будь-який колір на екрані виходить шляхом змішування складових червоного, зеленого і синього кольорів різної інтенсивності.

Працюючи з графічними редакторами, ми стикаємося і з іншими колірними моделями.

Колірна модель CMYK призначена для роботи з відбитим кольором, тобто є субтрактивной. Колірними складовими цієї моделі є кольори: блакитний (Cyan), пурпурний (Magenta), жовтий (Yellow) і чорний (BlacK). Блакитний, пурпурний і жовтий кольори виходять в результаті віднімання основних кольорів моделі RGB з білого кольору. Чорний колір задається окремо, оскільки отримати чорний колір шляхом змішування фарб неможливо технологічно. Катриджи сучасних друкуючих пристроїв містять фарби цих чотирьох кольорів. У комп'ютерній графіці модель CMYK застосовується для підготовки друкованих документів.

Колірна модель HSB
Системи квітів RGB і CMYK пов'язані з обмеженнями, що накладаються апаратним забезпеченням (монітор комп'ютера в разі RGB і друкарські фарби в разі CMYK).
Колірна модель HSB найбільш зручна для людини, тому що вона добре узгоджується з моделлю сприйняття кольору людиною.
Компонентами моделі HSB є:

• тон (H ue)
• насиченість (S aturation)
• яскравість кольору (B rightness)

цифрові зображення

Комп'ютерна графіка область діяльності, пов'язаної зі створенням та обробкою цифрових зображень Цифрове зображення (ЦІ) модель реального зображення, що зберігається в пам'яті ПК у вигляді комбінації цифр. Модель спрощене уявлення об'єкта або процесу

Чим детальніше описаний об'єкт, тим краще модель. З іншого строни, чим точніше, тим більше займає пам'яті і довше обробляється.

ЦІ можна розділити на дві категорії:

1. растрові
2. векторні

Векторна модель список параметрів, математично описують об'єкти.

Плюсами векторної моделі є

• компактність
• легкість модифікації
• масштабованість

До негативних особливостей відносяться наступні:

• чим складніше зображення, тим довше воно виводиться на екран (перерассчітиается)
• неможливо описати реальні об'єкти.

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

Переваги растрової моделі:

• можливість створення практично будь-якого малюнка, опису реальних об'єктів
• висока швидкість обробки зображень, якщо не використовується масштабування

До недоліків растрової моделі можна віднести

• втрата якості зображення при масштабуванні
• великий розмір файлів

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

Графічні формати веб.

На сьогоднішній день існує безліч форматів, призначених для зберігання цифрових зображень (ЦІ), як растрових, так і векторних. Серед векторних форматів найбільш відомі такі, як Scalable Vector Graphics (SVG і SVGZ), Flash (SWF) і Corel Draw (CDR). Найбільш поширені растрові формати - Bitmap Picture (BMP), Joint Photographic Experts Group (JPEG), Graphic Interchange Format (GIF), Portable Network Graphic s (PNG), Tagged Image File Format (tiff), Photoshop Document (PSD).

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

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

Графічні файли у форматі JPEG мають розширення .jpg (іноді зустрічається .jpeg)

Особливістю формату GIF є використання індексованої палітри кольорів. Всі кольори зображення нумеруються і зберігаються в спеціальній таблиці. Таким чином, замість того, щоб зберігати інформацію про код кольору кожної точки зображення, в файлі формату GIF зберігається таблиця кольорів і номери кольору кожної точки. При цьому кількість квітів в таблиці не може перевищувати 256.Очевідно, що даний формат підходить для зберігання "малокольорових" зображень, таких, як логотипи, шрифти, креслення, чорно-білі зображення, і не підходить, наприклад, для збереження фотографій осіннього лісу - кількість природних відтінків багаторазово перевищує можливе число кольорів палітри. Алгоритм стиснення, який використовується форматом, відноситься до категорії алгоритмів стиснення без втрат.

На відміну від формату JPEG, формат GIF підтримує можливість створення простої анімації.

Ще одна особливість формату - можливість призначити один з кольорів зображення прозорим. При розміщенні на веб-сторінці крізь пікселі прозорого кольору буде видно фон сторінки.

Графічні файли у форматі GIF мають розширення .GIF

Формат PNG був створений, як вільна альтернатива формату GIF, який до 2004 року був недоступний для вільного використання. PNG поєднує в собі можливості JPEG (зберігання практично необмеженої кількості кольорів) і GIF (підтримка прозорості).

Файли в форматі PNG мають розширення .png

Оптимізація графіки для веб.

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

Розмір растрового зображення кількість пікселів, що містяться в зображенні, по горизонталі і вертикалі Дозвіл екрану монітора розміри одержуваного на екрані зображення в пікселах

Розмір фотографії, отриманої за допомогою сучасного цифрового фотоапарата може становити приблизно 3500x2500 пікселів. Дозвіл сучасних моніторів - від 1024 × 768 до 1600 × 900. Очевидно, що розміщувати на сторінках сайту зображення вихідного розміру недоцільно - воно просто не поміститься на екран.

Змінити розмір зображення можна за допомогою графічного редактора або графічного конвертера

Приклади комерційних і безкоштовних програм для обробки зображень:

• комерційні:
  • Adobe Photoshop - графічний редактор
  • ACDSee - графічний переглядач / конвертор
• Безкоштовні:
  • GIMP - графічний редактор
  • XnView - графічний переглядач / конвертор

Основи роботи в XnView

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

Офіційний сайт програми: http://www.xnview.com/

Основні можливості при перегляді зображень:

• Режим попереднього перегляду (ескізів) файлів.
• Перегляд файлів у вікні і в повноекранному режимі.
• Зменшення / збільшення видимого розміру зображення.
• Перегляд багатосторінкових і анімованих зображень.
• Отримання зображення зі сканера.
• Відображення відомостей про зображенні, в тому числі інформації EXIF ​​і IPTC.
• Підрахунок кількості використаних в картинці кольорів.
• Відображення файлів в режимі слайд-шоу у вікні і повноекранному режимі.
• Установка зображення, яке Ви в якості шпалер робочого столу.
• Можливість задати деякі папки в якості обраних для швидкого доступу до них.
• Перегляд відеофайлів при наявності відповідних кодеків в системі.

Основні можливості при редагуванні зображень:

• Виділення частини зображення, вирізання, копіювання виділеної частини в буфер обміну, вставка з буфера обміну.
• Поворот зображення.
• Перетворення кольорів малюнка, заміна кольорової палітри.
• Зміна розміру зображення.
• Вставка текстового напису.
• Застосування до зображення різних ефектів.
• Корекція «ефекту червоних очей».

Інші можливості програми

• Створення веб-сторінки із зображень.
• Перетворення формату файлів зображень.
• Створення скріншотів.
• Підтримка плагінів, в тому числі для Adobe Photoshop.
• Інтеграція в Total Commander.
• Створення списків файлів.
• Запис малюнків на CD (необхідна наявність в системі Nero Burning ROM).

Основні елементи інтерфейсу

Меню включає всі основні можливості роботи з програмою Картотека використовується для переходу між вікнами програми Панелі інструментів дебліруют основні пункти меню, надають швидкий доступ до функціонала програми Деревовидна панель розташовується за замовчуванням в лівій частині вікна програми, забезпечує можливість переходу в потрібний каталог, пошуку файлів і папок на комп'ютері та в локальній мережі Панель предпросмотра містить кілька вкладок, на вкладці Предпросмотр здійснюється попередній перегляд вибраного зображення, на вкладці Властивості виводиться інформація про графічному файлі і про що міститься в ньому зображенні:

• ім'я файлу
• опис
• розмір файлу
• Дати созданіяб зміни і відкриття
• формат зображення
• Ширина і висота зображення
• Колірна модель
• спосіб стиснення
• та ін.

Рядок стану містить інформацію про

• кількості об'єктів в поточному каталозі,
• кількості виділених об'єктів,
• обсязі займаного об'єктами дискового простору,
• виділений об'єкт

У робочій області редактора (за замовчуванням, в правій частині вікна) виводиться вміст поточного каталогу. Для перегляду об'єкта використовується подвійне клацання миші. Кожне зображення при перегляді відкривається в окремій вкладці (див. Малюнок 2).

Малюнок 2.

1. Картотека. 2. Вкладка "Обозреватель".

3. Ім'я та розширення файла зображення. 4. Розмір файлу. 5. Розмір зображення

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

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

Основні можливості редагування зображень XnView

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

Важливо пам'ятати:

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

Зміна розміру зображення

1. Відкрийте зображення в окремій вкладці (подвійне клацання по ярлику зображення)
2. Виберіть пункт Меню Зображення - Зміна розміру
3. Переконайтеся, що встановлена галочка Зберігати пропорції
4. Виберіть одиниці вимірювання розмірів - відсоток або піксель
5. Задайте потрібний розмір зображення по ширині або висоті.
6. натисніть OK
7. Збережіть зображення з іншим ім'ям.

Часто виникає необхідність обробки не одного, а декількох зображень. У цьому випадку зручно використовувати можливість Пакетної обробки файлів

Одночасна зміна розміру кількох зображень

1. Виберіть пункт Меню Інструменти - Пакетна обробка (або кнопка Перетворення на Панелі інструментів)
2. вкладка Основні
   1. Налаштуйте Вхідні дані. Для цього натисніть кнопку Додати, виберіть потрібні файли (утримуючи клавіші Shift або Ctrl, можна вибрати кілька файлів одночасно). Якщо необхідно змінити все зображення в будь-якої папці, натисніть кнопку Додати папку
   2. Налаштуйте Вихідні дані. В поле Папка вкажіть, куди потрібно зберегти результат. Краще зберігати результати в окрему папку, щоб уникнути випадкового затирання вихідних файлів.
3. вкладка Перетворення
   1. У лівій частині вкладки виберіть Перетворення розміру.
   2. Натисніть кнопку Додати
   3. Переконайтеся, що встановлена галочка Зберігати пропорції
   4. Задайте потрібний розмір зображень по ширині або висоті.
4. Натисніть кнопку Виконати
5. Перейдіть в папку, вказану Вами в розділі Вихідні дані, перевірте результат роботи.

додаткова інформація