Інформаційні технології та моделювання бізнес-процесів - Томашевський О. М. - Формати графіки для 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-зображенні?
Схожі статті
-
Для web-сторінок існує чітко обумовлений набір шрифтів та кольорів. Це пояснюється тим, що створену сторінку можуть переглядати на будь-якому броузері,...
-
10.1. Комп'ютерні мережі. Види мереж На початку створення комп'ютерні мережі призначались та використовувались винятково як середовище передачі файлів і...
-
10.1. Комп'ютерні мережі. Види мереж На початку створення комп'ютерні мережі призначались та використовувались винятково як середовище передачі файлів і...
-
Електронний банкінг (E-banking, internet banking, online banking) входить до складу засобів електронної комерції, таких як: цифрова готівка, обмін...
-
Коли обсяги Інтернет почали перевищувати декілька десятків сайтів, виникла задача пошуку потрібних даних без перегляду всієї наявної інформації. Почалися...
-
Дані представляють собою спосіб представлення, збереження та елементарних операцій обробки інформації. Дані - це основа інформації. Поняття "дані" -...
-
3.1. Етапи розвитку інформаційних технологій Інформаційні технології посідають чільне місце в нашому житті, тому це поняття є багатофункціональним та...
-
Google Inc. (Гугл), www. google. com - приватна американська відкрита акціонерна компанія, заснована 7 вересня 1998 року, що займається розробкою,...
-
Системи підтримки прийняття рішень, які містять базу знань і розробляються з використанням методів штучного інтелекту, називаються системами підтримки...
-
Практично всі сервіси мережі Інтернет побудовані на технології клієнт-сервер. Для роботи в мережі необхідно: O фізично приєднати комп'ютер до одного з...
-
4.1. Принципи функціонування автоматичних засобів видобування знань Для аналізу і розв'язання задач різного характеру, в тому числі і економічних,...
-
4.1. Принципи функціонування автоматичних засобів видобування знань Для аналізу і розв'язання задач різного характеру, в тому числі і економічних,...
-
Data Mining (добування знань, даних) - технологія аналізу сховищ даних, що грунтується на методах штучного інтелекту та інструментах підтримки прийняття...
-
13.1. World Wide Web та Hyper Text Markup Language World Wide Web (WWW) - найвідоміший та найпопулярніший сервіс Інтернет. Ця глобальна, розподілена по...
-
13.1. World Wide Web та Hyper Text Markup Language World Wide Web (WWW) - найвідоміший та найпопулярніший сервіс Інтернет. Ця глобальна, розподілена по...
-
13.1. World Wide Web та Hyper Text Markup Language World Wide Web (WWW) - найвідоміший та найпопулярніший сервіс Інтернет. Ця глобальна, розподілена по...
-
3.1. Етапи розвитку інформаційних технологій Інформаційні технології посідають чільне місце в нашому житті, тому це поняття є багатофункціональним та...
-
На сьогоднішній день штучний інтелект (Artifical Intelligence, AI) залишається одним із найбільш перспективних і нерозкритих напрямків розвитку...
-
Оскільки інформації в Інтернет є надзвичайно багато і вона постійно змінюється, кожний пошуковий робот створює свою локальну базу даних, в якій і...
-
Оскільки інформації в Інтернет є надзвичайно багато і вона постійно змінюється, кожний пошуковий робот створює свою локальну базу даних, в якій і...
-
Оскільки інформації в Інтернет є надзвичайно багато і вона постійно змінюється, кожний пошуковий робот створює свою локальну базу даних, в якій і...
-
Практика використання інформаційних технологій для моделювання та автоматизації підтримки прийняття рішень в управлінні соціально-економічними процесами...
-
5.1. Структура сховища даних та оптимізація його обсягів Методи інтелектуального аналізу інформації часто розглядають як природний розвиток концепції...
-
В даний час питанням безпеки даних у розподілених комп'ютерних системах приділяється значна увага. Розроблено ряд засобів для забезпечення інформаційної...
-
5.1. Структура сховища даних та оптимізація його обсягів Методи інтелектуального аналізу інформації часто розглядають як природний розвиток концепції...
-
Життєвий цикл (ЖЦ) фіксує найбільш істотні, характерні для певного об'єкту стани, визначає їх основні характеристики та значення в даних станах, а також...
-
Обов'язковим реквізитом електронного документа є електронний підпис. Його визначення вказано у Законі України "Про електронний цифровий підпис": Це вид...
-
7.1. Роль інформаційних технологій в системі організаційного управління Система (від грецького systema - ціле, складене з частин, з'єднання) - це...
-
7.1. Роль інформаційних технологій в системі організаційного управління Система (від грецького systema - ціле, складене з частин, з'єднання) - це...
-
Комплексна автоматизація інформаційних потоків підприємства, організації, відомства, галузі вимагає створення єдиного інформаційного простору для...
Інформаційні технології та моделювання бізнес-процесів - Томашевський О. М. - Формати графіки для Web