Інформаційні технології та моделювання бізнес-процесів - Томашевський О.М. - Формати графіки для Web

GIF-формат (Graphics Interchange Format) базується на векторній графіці (наприклад, логотип), де всі лінії визначаються за допомогою математичних формул. Цей формат дозволяє стискати однотонні зображення без втрати якості та чіткості. Проте, при наявності тонких відтінків стиск об'єднає їх в один базовий колір, оскільки палітра цього формату використовує лише 256 кольорів.

GIF-файли мають невеликий розмір, що є оптимальним для швидкого завантаження сторінки. Також GIF-зображення можна помістити на прозорому тлі, що дозволить гармонійно вписати його у тло сторінки, що проілюстровано на прикладі стрілки (рис.13.7, а)).

Рис.13.7. Властивості прозорого зображення на тлі

Прозорий фон GIF-зображення реалізується у Photoshop встановленням прапорця "Transparency"у вікні "SaveFor Web" (рис.13.8).

Використовуючи вкладку "Color Table" вікна "Save For Web" можна оптимізувати отримане зображення, видаливши близькі за відтінком кольори - це не буде візуально помітно. Розмір зображення відображається в нижньому лівому куті вікна (рис.13.8) разом із часом завантаження при використанні dial-up доступу із швидкодією, притаманною середньостатистичному з'єднанню.

З декількох GIF-зображень за допомогою спеціальних програм (наприклад, Adobe ImageReady чи Ulead GIF Animator) можна створити анімацію, що буде відображатись усіма броузерами і не потребуватиме завантаження програм для її перегляду.

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

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

Створене (чи відредаговане) зображення можна зберегти із довільним ступенем компресії, в залежності від потрібного розміру графічного файлу. При сильному стиску зображення (рівень нижче High > 40% стиску картинки) з' являються так звані артефакти - розмиті групи пікселів.

Рис.13.8. Вікно збереження GIF-зображення для Web

Особливо чітко це спостерігається по краях об'єкту (рис.13.9). Розглянемо ще одне цікаве рішення використання великих зображень у Web-сайтах - наприклад, фотографій у фотогалереях. Для кожної фотографії створюється мініатюра (thumbnail), шляхом зменшення розмірів вихідного зображення (рис.13.10).

Рис.13.9. Візуальне порівняння зображень з різним ступенем компресії

Зазначимо, що зменшення розмірів повинне бути пропорційним, для чого у вікні "Image Size" встановлюється прапорець Constrain Proportions. Важливим є також встановлення прапорця "ResampleImage": Bicubic - вибір бікубічного алгоритму розподілу пікселів у зменшеному зображенні. Цей алгоритм, як правило, дає найкращий результат. Для створення мініатюр можна використати і автоматичні засоби, вбудовані у Adobe Photoshop - макрос Web Photo Gallery (File - Automate). На основі вхідних даних - папки із фотографіями - автоматично створюється Web сторінка із зв'язаними мініатюрами.

Рис.13.10. Діалогове вікно зміни розмірів вихідного зображення

Іншим форматом, що поєднує в собі властивості двох попередньо розглянутих форматів є PNG - Portable Network Graphics. Розробники нового формату ставили за мету повну заміну GIF. PNG є значно складнішим за GIF, крім того він підтримує 24-бітні та 48-бітні зображення (GIF - лише 8-бітні). Підтримує, за аналогією із JPEG, зображення в режимах RGB, Grayscale (градації сірого); Indexed color (індексований колір), як GIF. Також він підтримує різні рівні прозорості.

Резюме

WWW - найвідоміший та найпопулярніший сервіс Інтернет, глобальна, розподілена по цілому світі інформаційна гіпертекстова мультимедійна система, яка дозволяє об'єднати в одне ціле інформацію різних видів, що зберігається на різних комп'ютерах. Інформація в WWW розповсюджується у вигляді web-сторінок (web-документів). Декілька web-сторінок з однієї теми, що належать одному власникові чи є на одному комп'ютері, утворюють web-вузол, який часто називають сайтом. HTML - спеціальна мова форматування текстових електронних документів, текст якого складається з послідовності команд - тeгів (дескрипторів).

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

Ключові слова

WWW, сайт, web-сторінка, HTML, гіпертекстовий документ, HTTP, навігація, гіперпосилання, електронна пошта, тег (дескриптор), web-дизайн, системний шрифт, безпечна палітра кольорів, графіка для web, швидкість завантаження сторінки, компресія зображень, артефакт.

Запитання і завдання для обговорення та самоперевірки:

► Опишіть спосіб розповсюдження інформації в WWW.

► Дайте означення та стисло охарактеризуйте HTML.

► Що може міститись в Web-документі?

► Назвіть вимоги до Web-вузлів.

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

► Які бувають види гіпертекстових посилань (лінок)?

► Назвіть обов'язкові теги в коді Web -сторінки.

► Що таке безпечна палітра кольорів для Web?

► Які шрифти встановлені по замовченню у переглядачах?

► Чому використовувати великі зображення на Web-сторінках недоцільно?

► Що таке артефакт на JPEG-зображенні?