Секрети web-графіки
Як відомо, 70% інформації про навколишній світ людина отримує через зір. Природно, що з появою графічних браузерів, знайшовши можливість додавати до тексту зображення, Інтернет отримав потужний інструмент на своїх користувачів. Будучи за своєю суттю тією ж комп'ютерною графікою, зображення в Інтернеті все-таки мають ряд особливостей, на які (і не тільки на них) варто звернути увагу.
Відомо, що для отримання будь-якого кольору досить змішати у відповідних пропорціях лише три: червоний (Red), зелений (Green) та синій (Blue) – в англійській абревіатурі RGB. Цей принцип широко застосовується у кольорових фотоплівках, де, змінюючи ступінь засвітки червоного, зеленого та синього шарів, набувають той чи інший колір. З кольорового кіно принцип RGB перейшов у кольорове телебачення, де кольори виходять при поєднанні червоного, зеленого та синього променів різної інтенсивності. З екранів телевізорів він перекочував на екрани комп'ютерних моніторів. Оскільки кінцевий колір є результатом підсумовування, і називається він адитивним (additive color).
Однак під час підготовки зображень на комп'ютері використовується і протилежний спосіб змішування - віднімання (subtractive color). При цьому відбувається видалення з білого відповідно негативів вищеназваних кольорів - блакитного (Cyan), пурпурового (Magenta), жовтого (Yellow) і, для отримання кращого контрасту, негативу білого - чорного (Black). В англійській абревіатурі - CMYK. Цей спосіб використовується, перш за все, для підготовки зображення до друку на папері та Web практично не застосовується. Нас він цікавить остільки, оскільки він взагалі існує.
При створенні зображення на комп'ютері не так важливо знати, як виходить той чи інший колір, скільки як їмкерувати. При всьому різноманітті форматів графічних файлів, а відповідно, і колірних режимів для підготовки графіки в Web використовуються від сили три-чотири. Але перш ніж розглядати ці режими необхідно визначитися з термінологією.
Палітра кольорів — одразу виникають асоціації з майстернею художника, з мольбертами та дощечками для змішування квітів. До певної міри так воно і є, тільки і пензлі, і мольберт, і фарби, і саму майстерню замінює комп'ютер. У комп'ютерній графіці палітра (таблиця) — перелік кольорів, які у цьому режимі під час роботи із зображенням. Кількість їх у палітрі залежить від глибини.
Глибина кольору визначається кількістю бітів, що використовуються на піксель (поодинокий елемент, можна сказати, «атом» зображення). В принципі, глибина кольору, а відповідно, і кількість кольорів на палітрі, може бути як завгодно більшою. Але не варто забувати, що «все добре в міру!». Людське око хоч і унікальний інструмент для роботи з колірною гамою, але має кінцеву роздільну здатність (можливість розрізняти) по кольорах. Крім того, необхідно враховувати і швидкість обчислення великого об'єму зображення (я не говорю про великі розміри файлів - про це трохи пізніше) комп'ютером, і можливості монітора при великій глибині кольору. Звідси приходимо до максимуму - 24 біти на піксель (8 біт на кожен колір у RGB) або 224 = 16,8 млн. кольорів на палітрі. Однак не завжди доцільно використовувати повну палітру (true color) при підготовці зображення для Web.
Останнім часом великої популярності набув навіть не сам ретро, скільки стилізація під ретро і як один із напрямків — використання чорно-білих зображень. У них немає необхідності тримати інформацію про всі кольори, зберігається лише інформація про відтінки одного кольору. Самецей принцип використовує режим градації сірого (grayscale), який використовує до 256 відтінків сірого кольору.
Як уже зазначалося, не завжди доцільно використовувати велику кількість кольорів у зображенні. У режимі індексованих кольорів (index color) кольори формуються не традиційним змішуванням трьох «чистих» - кожному пікселю зображення присвоюється індекс (звідси і назва) кольору на панелі. Причому кількість їх може бути різною, але не більше 256. Природно, чим менше кольорів на палітрі, тим менше обсяг файлу зображення.
Однак для повнокольорових зображень з плавними градієнтними переходами необхідний режим RGB, що дає доступ до керування всіма кольорами шляхом завдання одного з 256 відтінків кожного з трьох кольорів. Це режим роботи підготовки зображень, що найчастіше використовується.
При всій різноманітності зображення в комп'ютерній графіці можна розділити на два великі класи: растрові та векторні. Кожен з них має свої переваги та недоліки.
Принцип побудови растрових зображень заснований на кінцівки роздільної здатності ока, коли при зближенні двох точок очей перестає їх розрізняти. Згадайте малюнки, створені на зорі комп'ютерних технологій за допомогою ASCII-символів, які можна було розглянути лише з певної відстані. Растрове зображення можна як масив пікселів, кожен із яких має власний колір. Відповідно, растр — уявлення зображення (комп'ютер передає будь-яку інформацію), висловлюючись мовою математики, шляхом диференціювання (розподілу безперервності на елементарні відрізки). Саме з принципу подання растрового зображення і виникають його недоліки. Так, для зображення 300*200 пікселів за трьох байтів на піксель для RGB розмір файлу буде 300*200*3=180 Кбайт.Погодьтеся, не кожен захоче чекати на завантаження такого зображення, тим більше якщо воно не одне. Крім того, будь-яка елементарна одиниця, чи то атом у розумінні стародавніх греків чи піксель у нашому розумінні, в принципі, є неподільною. Звідси неможливо масштабувати растрове зображення. Спробувавши збільшити таку картинку разів так у 10, єдине, що можна буде побачити, - нагромадження кольорових квадратиків у стилі раннього авангарду, зрозуміти сенс якого можна буде лише кроків з п'яти (згадайте приклад з ASCII-символами) і те, якщо дозволить екран монітора.
Як інтеграл у математиці є зворотною функцією диференціювання, і «вектор», можна сказати, є протилежністю растру. Будь-яку криву, у тому числі замкнуту, можна описати деяким набором математичних формул і подати у вигляді програмного коду. Будь-яке зображення можна як сукупність фігур (замкнених ліній), пофарбованих у той чи інший колір. Саме так ми створюємо зображення за допомогою олівців та пензликів, саме на цьому принципі побудовано векторні формати. Ці принципи визначають основні переваги «вектора». Відсутність необхідності описувати кожен піксель дозволяє значно зменшити обсяг файлів навіть за досить великих розмірів зображення. Крім того, з математики відомо, що при множенні функції на постійне число (константу) форма кривої, що описується нею, не змінюється. Звідси ми отримуємо векторне зображення як ідеальний об'єкт масштабування. Зображення, збільшене в десять разів, виглядатиме не гірше за оригінал.
Одним із різновидів векторної є тривимірна (3D) графіка. У цих файлах просто вводиться ще одна координата, але при цьому виходить не зображення, а ціла сцена з великою кількістю нюансів.відповідно, більшим обсягом обчислень.
Але при всьому різноманітті графічних форматів для представлення зображень у Web використовується невелика їх кількість. Основним обмежувачем тут є розмір файлу. Тому вибір формату при підготовці зображення для Web визначається оптимальним співвідношенням двох взаємовиключних параметрів: розмірів зображення і обсягу файлу. Однак з теорії ймовірності відомо, що більшість схем подання інформації мають той чи інший ступінь надмірності. Наприклад, складаючи конспект на лекціях, ми користуємося якоюсь системою скорочень слів і фраз, не втрачаючи при цьому змісту. Цей принцип покладено основою більшості систем стиснення інформації, зокрема і форматів графічних файлів, які у Web. Проте за однаковому принципі алгоритми його реалізації розробляються різними людьми, тому мають дуже істотні різницю між собою. Більше того, не варто забувати, що кожен формат має інші особливості, тому при його виборі слід враховувати насамперед виконання малюнка.
GIF (Graphics Interchange Format, формат взаємообміну графікою) розроблений CompuServe Incorporated, остання версія GIF-89a. Спочатку, як можна зрозуміти з назви, цей формат розроблявся для передачі графічної інформації в потоці даних, а тому, на відміну від інших, є послідовною організацією, а не довільною, що дозволяє використовувати мінімум ресурсів процесора при його розпакуванні. Для компресії файлів GIF використовує LZW-алгоритм стиснення, або, як його ще називають, стиск без втрат, при цьому він найбільш ефективний при великих однотонних областях з чіткими межами. Оскільки сканування зображення відбувається по горизонталі, то стиснення буде більш ефективним.при більших горизонталях таких областей. Однак GIF не може зберігати неіндексовані зображення, тобто може відображати не більше 256 кольорів. Ця обмеженість формату не дозволяє досягти плавного переходу від одного кольору до іншого, що особливо помітно при використанні градієнтів та розмивок. Можна, звичайно, використовувати прийом «дифузія», але ефект «зернистості», що отримується при цьому, виглядає швидше як стилізація, а тому не завжди виправданий у загальному контексті сайту. Крім того, при використанні дифузії збільшується неоднорідність зображення, що веде до зниження ефективності компресії. Зворотною стороною обмеженості палітри GIF може служити її гнучкість. Змінюючи розмір таблиці, а, отже, і кількість кольорів у ній, web-дизайнер отримує у свої руки чудовий інструмент регулювання співвідношення якість зображення / розмір файла. Так, зменшуючи у зображенні розміром 100*100 пікселів кількість кольорів із 256 (8 біт на піксель) до 128 (7 біт на піксель), отримуємо 100*100*8 – 100*100*7 = 10 000 біт економії. Ще однією особливістю, введеною в останню версію формату, є створення прозорих областей зображення, що відкриває цікаві можливості в web-дизайні. "Потокова" природа GIF, відносно малі розміри його файлів, можливість компресії за рахунок використання прозорих областей у кадрах зробили його чудовим інструментом для створення анімації в Web. Використання GIF доцільно насамперед для так званих плоскокольорових зображень з чітко позначеними межами переходів між кольорами, а також малорозмірних зображень типу кнопок, превьюшних картинок тощо.
JPEG (Joint Photographic Experts Group). Розроблено групою експертів із фотографії (що видно з назви) під егідою ISO (Міжнародна)організація за стандартами). Взагалі, цей формат досить унікальний тим, що використовує алгоритм стиснення, який відрізняється від застосовуваних у всіх інших графічних форматах, — стиск із втратами. Цей алгоритм раніше використовувався на телебаченні у телевізійній схемі трансляції США (NTSC). Заснований він на тій самій обмеженості людського зору, нездатності ока не помічати деякі спотворення у відновленому зображенні. На сьогодні цей алгоритм є одним із найефективніших (коефіцієнт стиснення досягає 1:100), проте він не дуже добре обробляє зображення з малою кількістю кольорів та різкими межами. Взагалі, JPEG можна назвати протилежністю GIF. Він дозволяє відображати 24-бітну палітру, тобто всі 16,8 млн. кольорів, що дозволяє відображати градієнти з фотографічною точністю, але при цьому не може мати прозорих областей. Однак цей формат має одну особливість, яку не можна не враховувати. При повторному збереженні зображення в JPEG він повторно запускає алгоритм стиснення, звісно, з погіршенням якості. Тому зберігати зображення у ньому слід лише після остаточної обробки.
Говорячи про графік у Web, зазвичай не згадують про шрифти як графічні об'єкти. Пов'язано це з тим, що донедавна в HTML-сторінках передбачалася обмежена можливість управління параметрами шрифтів. Але вже у специфікації CSS level2 вводиться поняття вбудовування шрифтів, що відкриває можливість використовувати стандартні. Існуючі програми дозволяють створювати навіть символьні шрифти, отримуючи замість букв монохромні масштабовані зображення. Але й цю ідею не оминула «війна браузерів». Різна реалізація «підвантажуваних» шрифтів у NC та IE, на жаль, не дозволяє використовувати ці можливості повною мірою.
Звичайно, наведені тут міркування не можуть охопити весь океан під назвою "web-графіка". Але починаючи будувати будинок, необхідно знати дещо про цеглу. І я думаю, що моя перша цегла не буде зайвою при будівництві вашого сайту.