Графіка на WEB сторінках
Зміст
Введення
Кольори
Безпечна палітра
Деякі формати запису графіки на Web сторінках
Типові графічні елементи Web сторінок
Введення
Візуальне представлення дозволяє здійснювати найбільш швидку передачу інформації, забезпечуючи також швидке її сприйняття спостерігачем (читачем) як безпосередньо, так і з використанням прийнятих у світовій культурі джерел інформації (книги, газети, кіно, телебачення, Інтернет). Маніпулюючи кольором, контрастом і символами, можна за частку секунди викликати у спостерігача відчуття тепла або холоду, спокою або напруженості, а разом з тим навіть передати деякі відомості. Важливу роль у графічній передачі інформації відіграють асоціації - певні образи, спливають у свідомості користувача в моменти, коли він бачить деякі символи або систему графічних об'єктів.
Стиль Інтернет-сайту визначається поєднанням тексту, графіки і активних елементів (формуляри, діалогові вікна, мультимедіа). Суттєвим є також підбір компонентів, їх властивостей (розмір, колір) і способів розміщення на сторінці.
Кольори
RGB
В даний час RGB є найпопулярнішим способом завдання кольору і практично в кожній графічній програмі існує можливість опису кольору цим форматом. Комбінація трьох однобайтових значень (24 біта) дозволяє визначити 16,7 млн. кольорів (точніше 2 24).
HSL
HSL (Hue, Saturation, Luminance, тобто відтінок, насичення, яскравість) - це палітра фарб, що визначаються поєднанням не основних кольорів (як це має місце для RGB), а відтінку, насичення і яскравості. Цей умовний спосіб опису кольору набагато більше інтуїтивний і близький природному сприйняттю кольорів людиною. Значно легше змінити помаранчевий колір на жовтий, змінюючи відтінок, насичення і яскравість, ніж підбирати потрібне поєднання червоного, зеленого і синього.
CMY, CMYK
Палітра CMY (Cyan, Magenta, Yellow, тобто синьо-зелений, пурпурний, жовтий) - ще один спосіб визначення кольору. Він складає альтернативу RGB. Палітра CMY, розширена чорним кольором, позначається CMYK і повсюдно застосовується друкувальними пристроями.
Безпечна колірна палітра
Безпечна палітра кольорів - це набір із 216 кольорів, загальних для всіх інструментальних платформ. Кожен з них може бути заданий однобайтові кодом. Їх 216 тому, що 8 бітове визначення дозволяє задати 256 кольорів (2 8). Проте прийнято, щоб поле в 40 і квітів було зарезервовано для операційної системи, тоді 216 кольорів залишаються для застосування в прикладних програмах користувачів. Картинки, які відображаються на моніторах комп'ютерів, здатних правильно передати 256 кольорів (8-бітова графіка), відображаються правильно (і передбачувано) і за умови застосування 216 безпечних кольорів. Решта фарби передаються як суміш компонентів з безпечної палітри.
Питання адекватного відображення квітів мав велике значення кілька років тому, коли у повсюдному використанні були комп'ютери з 8-бітової графічною картою. Гарним тоном вважалося застосування на Web сторінках саме безпечного колірного набору. Тепер же ми всі користуємося 24-бітової графікою. Тому здається більш доцільним використовувати всю повноту можливостей, що представляються сучасними комп'ютерами, і застосовувати на Web сторінках різні поєднання кольорів, в тому числі і тих, що виходять за рамки безпечної палітри.
Деякі формати запису графіки на Web сторінках
GIF
GIF (Graphic Interchange Format - Графічний формат обміну) - один з перших графічних форматів. Він і сьогодні продовжує залишатися самим часто вживаним форматом запису графіки і простий анімації для Інтернет-сайтів. Формат GIF розроблений фірмою CompuServ (онлайнова інформаційна служба). У 1987 році вийшла його перша версія GIF 87. Подальша робота над розширенням можливостей запису зображень увінчалася створенням нової версії GIF 89а. У цій новій версії з'явилися можливості визначення обраного кольору як прозорого, чересстрочной завантаження і записи анімації. Важливим достоїнством формату GIF є його універсальність - на сьогоднішній день всі Інтернет-браузери підтримують отбражений картинок у форматі GIF.
Графіка, записана в форматі GIF, компресуючі з використанням алгоритмів LZW (Lempel - Ziv - Welch). Цей алгоритм безутратной компресії (стиснення), заснований на усуненні надмірності інформації, тому картинка відображається на 100% у відповідності з оригіналом. Компресія полягає у знаходженні повторюваних послідовностей крапок і запису інформації про розміри цієї послідовності і місце її початку. Цей спосіб дозволяє значно знизити розмір файлів при записі зображень, що мають досить великі одноколірні ділянки.
GIF 89а складається: із заголовка і блоків даних. У заголовку відображаються: версія формату GIF, переважні параметри картинки - висота, ширина, розмір палітри, дозвіл, колір фону. Окремі байти містять інформацію про глобальну кольоровій палітрі - кожен колір це 3-байтове значення, яким задається колірне сполучення RGB. За заголовком слідують контрольні блоки, блоки зображення і додаткові блоки.
У контрольному блоці знаходиться інформація про тривалість експозиції (часу показу на екрані) і спосіб переходу від картинки до картинки. Формат GIF 89а дозволяє записувати багато зображень в одному файлі і задавати значення експозиції та циклічності анімації.
Блоки зображення (їх може бути декілька, якщо у файлі записана анімація) містять детальний опис параметрів картинки, локальну колірну палітру (якщо вона відрізняється від глобальної палітри) і компрессированних дані про послідовності точок зображення.
Додатковий блок містить дані, які не відображаються, наприклад коментар, пов'язаний з даною картинкою.
Обмеженням формату GIF є розмір кольорової палітри - максимум 256 кольорів, тобто кольорова палітра може мати розмір від 2 1 по 2 8, або 2, 4, 8, 16, 32, 64, 128 і 256 кольорів. На практиці це означає, що якщо на картинці з'являється 7 кольорів, то при використанні палітри розміром 16 кольорів частину полів палітри залишається не задіяними. У цьому випадку редукція колірної палітри до величини 8 не призведе до втрати якості, але дозволить зменшити розмір файлу запису картинки. Операція звуження кольорової палітри - звичайна опція запису файлу у форматі GIF.
Кодування LZW дозволяє відтворити компрессированном зображення точно таким, яким воно було до компресії. Подібні алгоритми компресії називаються «безутратнимі», на відміну від «утратних» алгоритмів, які припускають втрату частини інформації про зображення. Стиснення LZW зменшує розмір файлу GIF так ефективно, що на практиці стає невигідною додаткова архівація і компресія файлів цього типу програмами ZIP, ARJ і т.п. стисненням зображення займаються графічні програми.
JPEG
У 1990 році Об'єднаної групою експертів в області фотографії (Joint Photographic Expert Group, JPEG) була запропонована схема стиснення, яка згодом завоювала загальне визнання, як стандартний метод обробки нерухомих зображень. JPEG - алгоритм стиснення зображень. Але загальноприйнятим стало застосування назви JPEG до файлів, записаних у форматі JFIF (JPEG File Interchange Format). JPEG (або JFIF) - це формат запису зображень, застосовуваних як на Інтернет-сайтах, так і для типографського друку, а також у цифровій фотографії.
Процес компресії зображення у форматі JPEG йде в декілька етапів:
Якщо потрібно, то спочатку відбувається конвертація даних про точки зображення з системи RGB в систему YCbCr, яка аналогічна HSL, дозволяє висловити яскравість кольору.
Зменшення в два рази ширини шкали Cb і Cr (властивості кольору) при збереженні оригінальної шкали яскравості Y. Звуження шкали відбувається шляхом усереднення значень Cb і Cr сусідніх пікселів.
Аналіз блоків зображення: 8 * 8 пікселів. За допомогою дискретного косинусного перетворення (ДКП) проводиться округлення значень зміни яскравості кольору.
Масив даних, яким наближено описується оригінальне зображення, може бути підданий черговий компресії (на цей раз безутратной), оскільки в результаті округлення з'явилося багато однакових значень.
Вигодою алгоритму компресії, застосовуваного в форматі JPEG, особливо відчутний при обробці великих багатобарвних зображень (наприклад, фотографій). Для малих зображень (ікон) або картинок з переважанням одного кольору краще застосовувати формат GIF.
Формат JPEG не підтримує чересстрочную завантаження, але тут є можливість запису файлу в прогресивній формі. Перегляд великого файлу, записаного в прогресивній формі JPEG, припускає швидке відображення картинки гіршої якості, поступове поліпшення якого відбувається в міру зчитування чергових порцій файлової інформації. Це має велике значення для тих, хто публікує фотографії, карти і т.п. Швидкий перегляд картинки трохи гіршої якості дає можливість вирішити, чи варто очікувати подальшого завантаження, або можна перервати передачу зображення в браузер.
BMP
Формат BMP (Bitmap, Бітова карта) є дуже простим способом запису графіки для застосування в системі Windows.
Взагалі, цей формат в Інтернеті не застосовується. BMP - це внутрішня графічна система Windows. Зокрема, в цьому форматі записуються «копії екрану». Досить натиснути клавіші <Alt + PrintScreen>, щоб у системному буфері виявилося зображення, в даний момент знаходиться на екрані. У форматі BMP не передбачається компресія даних, вірніше, можуть бути скопрессіровани тільки елементи 4 - і 8-бітової графіки. У таких випадках архівація даних відбувається за принципом групової компресії - відтиснення сусідніх точок однакового кольору і заміщення послідовності ідентичних даних парою значень, що представляють індекс кольору на палітрі і кількість пікселів даного кольору у послідовності. При відсутності компресії розмір файлів, записаних у цьому форматі, дуже великий. До того ж цей формат не підтримується багатьма браузерами, а це означає, що частина інтернавтів не побачить у себе на екрані картинки, записаної у форматі BMP. Цей формат конкретно підтримує Internet Explorer. Істотний недолік формату BMP - занадто великий розмір створюваних файлів.
PNG
PNG (Portable Network Graphics - Стерпна мережева графіка) - універсальний формат запису нерухомих (статичних) зображень. Він з успіхом застосовується у відношенні як фотознімків, так і невеликих малюнків. За глибиною відображення кольору формат PNG перевершує GIF і JPEG, так як колір кожного пікселя тут може бути визначений за допомогою 48 бітів. PNG застосовує алгоритм компресії без втрат, а прозорість фону може мати досить багато (до 256) ступенів. Зображення, записані у форматі PNG, коректно відображаються всіма браузерами. Сам формат був розроблений в 1996 році як альтернатива GIF, але поки не отримав велику популярність. Однією з причин цього стало те обставина, що форма PNG не дозволяє записувати анімацію, яку так люблять використовувати творці Інтернет-сайтів.
SVG
Формат SVG (Scalable Vector Graphics - Масштабована векторна графіка) представляє собою стандарт, розроблений організацією World Wide Web Consortium (W 3 C) для запису векторної графіки мовою XML. На відміну від форматів, описаних вище, SVG дає можливість запису векторної графіки, а це значить, що масштабування зображення буде відбуватися без втрати якості.
ICO
Іконки, що супроводжує будь-який програмний продукт і будь-який файл в системі Windows, також є графічними файлами. Хоча ці маленькі малюнки дуже часто бувають включені у файли. Exe або. Dll, вони можуть бути також записані на диску в незалежних файлах з розширенням. Ico. Формат ICO дозволяє зберігати елементи 4 бітової графіки розміром 32 * 32 пікселя. Значки системи Windows можуть приймати один прозорий колір (аналогічно GIF), іноді званий кольором екрану, а також колір, зворотний кольором екрану.
Типові графічні елементи Web сторінок
Фон
Бажаючи змінити застосовується за умовчанням фон HTML документа або його фрагменти (наприклад, елементів таблиці), автор сторінки може довільно задати колір фону або вказати, який графічний файл був використаний для «оббивки» вікна браузера. Файл фонової графіки не повинен бути більшим. Якщо пропонується однотонний фон, то краще передбачити завдання кольору фону в кодах HTML. Краще всього виглядають сторінки з фоном в пастельних тонах, елементи якого зливаються в однорідний забарвлену поверхню. При використанні темного тла шрифт повинен бути яскравим.
Приклад:
<BODY BgColor=» yellow»> Фон жовтого кольору.
<BODY Background=» image1.gif»> Фон документа з файлу.
Ілюстрація, фотознімок
Говорячи про включення графіки в Web сторінку, найчастіше мають на увазі розміщення в документі Ілюстрації або фотознімка. Картинки для включення в HTML документ можуть бути записані в різних форматах, отже, можуть мати різні властивості. Нижче перераховані прості технології, які широко використовуються для отримання цікавих ефектів на Web сторінках та повного використання властивостей картинок:
Розміщення ілюстрації з прозорим фоном. Зображення, «накладене» на документ, виглядає значно краще. Ілюстрація відмінно вписується в документ незалежно від зміни кольору фону Web сторінки. Фон сторінки (колір, малюнок) служить і фоном для розміщеної картинки.
Анімація на Web сторінках служить найчастіше для прикраси. Іноді анімація застосовується для поетапного подання інформації - в окремих кадрах послідовно відображається слова якої-небудь написи або відкривається все більший фрагмент зображення. Цей ефект привертає і утримує увагу спостерігача. Типовим форматом запису анімації для Web сторінок є GIF.
Галерея мініатюр. Виводячи на Web сторінку галерею фотознімків, потрібно передбачити наявність додаткового документа, що містить ці самі фотознімки у зменшеному розмірі або ж фрагменти цих фотознімків. Кожна мініатюра є посиланням на файл, в якому записано дане зображення, і клацання клавіші миші над мініатюрою починає завантаження фотознімку в вікон Інтернет-браузера. Галереї мініатюр створюються з метою швидкого ознайомлення користувача з усіма картинками і полегшення вибору фотознімку, пропонованого до завантаження в оригінальному розмірі.
Розсічення картинки. Часто виходить так, що компресія графічних файлів приносить набагато кращі результати (збільшення ступеня стиснення), якщо стискати маленькі картинки, а не великі зображення. Великі зображення рекомендується розсікати на менші фрагменти. Збереження кожного фрагмента в своєму файлі іноді дозволяє значно зменшити кількість байтів, які користувач буде вимушений завантажувати з Web сервері для перегляду картинки в оригінальному розмірі. Відновлення зображення, відбувається за принципами завантаження окремих фрагментів у комірки таблиці.
Клавіша, кнопка
Важливим графічними елементами на Web сторінках є клавіші навігації. Це невеликі картинки, що представляють собою посилання до інших документів або сценаріїв (скриптів). Клацання клавіші миші на такий клавіші зазвичай викликає завантаження іншого документа, пересилання вмісту формуляра або виконання сценарію. Цікавий ефект при використанні клавіші навігації можна отримати, передбачивши зміни її графічного виду при наведенні курсору на клавішу і повернення зображення в початковий стан при відведенні курсору з області клавіші. Цей простий ефект реалізується за допомогою операторів мови JavaScript. Документ, оснащений таким механізмом, набуває рис динамічності.
Клавіші навігації є графічними елементами, які повинні добре вписуватися в фон сторінки, і разом з тим виділятися і полегшувати навігацію в Інтернеті завдяки однаковості їх інтерпретації.
Рекламний банер
Прямокутні картинки, що містять рекламу або візитки Інтернет-сайтів, називаються банерами (banner - прапор, транспарант). Метою розміщення банерів на Web сторінках є запрошення інтернавтів відвідати рекламовану сторінку. Дуже часто банери насичені анімацією - адже вони «зобов'язані» кидатися в очі.
Найчастіше банери буваю наступних розмірів: 400 * 50, 468 * 60 пікселів, або більш дрібні - 120 * 40 пікселів і т.д. Дуже важливо, щоб розмір файлу, в якому записаний банер, не був великим. Вважається, що хороший банер (тобто такий, який швидко завантажується в браузер) не повинен бути більше 10-15 кбайт. На практиці ж строгих обмежень не існує.