Научная статья на тему 'Оптимізація анімаційних зображень при роботі з web-графікою'

Оптимізація анімаційних зображень при роботі з web-графікою Текст научной статьи по специальности «Прочие технологии»

CC BY
183
90
i Надоели баннеры? Вы всегда можете отключить рекламу.
i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

Optimization of animation images during work with Web-graphic

Experimental preparation of graphic arts is conducted for Web-pages after the use of the programs of Macromedia. On the basis of analysis of the got results it is developed recommendation in relation to the choice of optimum type of file and parameters of image depending on his properties and setting. Experimental verification of efficiency of the use of this development is conducted. Verification confirmed the rightness of research hypothesis.

Текст научной работы на тему «Оптимізація анімаційних зображень при роботі з web-графікою»

АСТ: Астрель, 2004. 318 с. 7. Нонака И. Компания-создатель знания. Зарождение и развитие инноваций в японских фирмах / И.Нонака, Х.Такеучи. М., 2003. 384 с.

Поступила в редколлегию 12.09.2013

Чалый Сергей Федорович, д-р техн. наук, рофессор каф. ИУС. Научные интересы: управление бизнес-процессами; процессный подход к представлению знаний. Адрес: Украина, 61166, Харьков, пр. Ленина, 14, тел. 702-14-51.

Шабанова-Кушнаренко Любовь Владимировна, аспирантка каф. ИУС. Научные интересы: алгебро-логические модели бизнес-процессов. Адрес: Украина, 61166, Харьков, пр. Ленина, 14, тел. 702-14-51.

УДК 378.147 М.А. БОНДАРЕНКО

ОПТИМІЗАЦІЯ АНІМАЦІЙНИХ ЗОБРАЖЕНЬ ПРИ РОБОТІ З WEB-ГРАФІКОЮ

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

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

Основний зміст. Графічні формати поділяються на векторні, растрові та комбіновані [2]. Способи форматування задають структуру даних і відрізняються один від одного. Растрове зображення утворюється з окремих крапок-пікселів, векторне зображення утворене з комбінації форм. При збільшенні або деформації пікселі растрового зображення стають помітні, тоді як векторний малюнок зберігає форму.

Формат GIF може зберігати анімаційні зображення, на відміну від усіх інших графічних форматів [1].

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

Анімація підтримується тільки у форматі GIF. Для проведення оптимізації взято анімац-ійне зображення з початковими 128 кольорами (рис. 1). Початковий розмір файлу - 74,6 Кбайт.

Рис. 1. Анімаційне зображення для оптимізації Результати оптимізації анімаційного файлу наведено у табл. 1.

84

Таблиця 1. Оптимізація анімаційного файлу

Кількість Обсяг GIF- Зменьшення обсягу Оцінка якості зображення у порівнянні з

кольорів файлу (разів) початковим

128 74,6 1,00 початкове

64 49 1,52 майже початкове

32 37,3 2,00 задовільне

16 27,8 2,68 незадовільне

8 18,8 3,97 погане

4 12,3 6,07 неприйнятне

2 6,2 12,03 неприйнятне

Як видно з цієї таблиці, незадовільна якість з’являється при зменшені палітри кольорів до 16. При цьому деякі кольори змінилися (рис. 2).

Рис. 2. Погіршення якості зображення при 16 кольорах На рис. 3 представлено графік зміни розміру оптимізованого анімаційного файлу.

•р 80

-8- зо

Я 10 0 <р ♦

* £ / Якість з ображення & & (оцінка) / <s .0 і/

Рис. 3. Графік зміни розміру оптимізованого анімаційного файлу Таким чином, для даного зображення оптимальним буде вибір 32 кольорів (задовільна якість), що дає зменшення розміру файлу в 2 рази.

Формат SVG підтримується найпопулярнішими браузерами останніх версій (Internet Explorer, Opera, Firefox, Chrome).

85

Формат SVG (Scalable Vector Graphics) - специфікація мови розмітки, що базується на XML, та формат файлів для двовимірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним або містити описи сценаріїв.

Растрове зображення утворюється з окремих крапок-пікселів, в той час як векторне зображення утворене з комбінації форм. Файли SVG мають текстовий формат, який можна читати і редагувати за допомогою звичайних текстових редакторів. Це робить SVG файли менші за розміром, ніж у порівнянні з якістю зображення у форматах JPEG або GIF.

Розглянемо простий приклад використання формату SVG. У звичайному текстовому редакторі (наприклад, у Блокноті) наберемо такий текст (рис. 4).

Рис. 4. Опис зображень у форматі SVG

Файл починається з XML-заголовка, далі йде кореневий елемент <svg>, у якому вказується простір імен, ширина, висота документа. Усередині контейнера міститься безпосередній опис елементів тегами (у цьому випадку 3 кола <circle>). Кожному тегу можна привласнити параметри (cx - положення по осі X, су - положення по осі Y, r - радіус, fill -кольори заливання). Також кожному елементу можна привласнити стиль, у цьому випадку це прозорість (fill-opacity).

Збережемо цей файл на диску під ім’ям SVG-1.svg.

Далі у Блокноті наберемо такий текст (рис. 5).

Бе зымянный - Блокнот ИЄІ®

1 Файл Правка Формат Вид Справка |

chtml> <title>SVG</tit1e> <body> <img src="svG—1.svg"> </body> </htm1 >|

Рис. 5. Використання SVG у файлі HTML

Збережемо цей файл на диску під ім’ям SVG-1.html.

Відкриємо даний файл у сучачному браузері, наприклад Google Chrome. Отримаємо такий результат (рис. 6).

Рис. 6. Відображення зображення у форматі SVG

86

Для порівняння форматів у редакторі Macromedia Fireworks було утворено аналогічне зображення (рис. 7).

Рис. 7. Аналогічне зображення у редакторі Macromedia Fireworks Далі це зображення було збережено у форматі PNG та експортовано у формати GIF та JPEG. Зображення у цих форматах було оптимізовано з прийнятною якістю з такими параметрами: GIF - 16 кольорів, JPEG - якість.

Результат порівняння розмірів файлів цього зображення представлено у табл 2.

Таблиця 2 Порівняння розмірів файлів

Формат Розмір файлу (Кбайт) Зменшення у порівнянні з форматом PNG (разів)

PNG 36,7 1

JPEG 3,3 11,1

GIF 1,42 25,8

SVG 0,415 88,4

Таким чином, розмір файлу зображення у форматі SVG менший аналогічного файлу у форматі PNG у 88 разів. У порівнянні з найменшим графічним файлом (формат GIF) файл SVG менший майже у 3,5 рази.

Сучасний розвиток цього формату дозволяє задавати не тільки прості геометричні об’єкти, але досить складні зображення (рис. 8).

Рис. 8. Складне зображення у форматі SVG

87

Таким чином, на нашу думку, майбутнє Web-графіки буде пов’язане з розвитком формату SVG та його підтримкою у всіх браузерах.

На підставі проведених експериментів можна зробити такі загальні висновки та рекомендації щодо підготовки Web-графіки.

1. Графіка для Web-сторінок має бути збережена в одному з трьох форматів - PNG, GIF, JPEG. Це дає гарантію того, що зображення буде відображатися у будь-якому браузері.

2. Вибір формату з метою мінімізації розміру файлу пов’язаний з певними параметрами зображення.

3. Формат GIF доцільно використовувати для зображень з невеликою кількістю кольорів (до 256). Наприклад - текст, логотипи, ілюстрації з чіткими краями, зображення з прозорими ділянками, баннери. Крім того, тільки в цьому форматі утворюються анімаційні зображення.

4. Формат JPEG доцільно використовувати переважно для фотографій з великою кількістю кольорів. Цей формат допускає збереження зображень, що містять мільйони кольорів з тонкими колірними переходами. Зображення в цьому форматі, на відміну від формату GIF, не можуть мати прозорих ділянок. Анімація також не підтримується.

5. Формат PNG є розвитком формату GIF. Його доцільно використовувати для збереження повнокольорових зображень із глибиною кольорів до 48 біт на піксель і чорно-білих зображень із глибиною кольорів до 16 біт на піксель. Цей формат дозволяє для кожної крапки зображення задавати ступінь прозорості від нульової до 100%. Формат PNG не підтримує анімацію.

Область застосування - високоякісні фотографії, малюнки, що містять прозорі ділянки, малюнки з великою кількістю кольорів і чіткими краями зображень.

Узагальнені рекомендації по вибору графічного формату наведено в табл. 3.

Таблиця 3

Загальні рекомендації по вибору графічного формату для Web

Параметри зображення Рекомендований формат Приклади

Розмір невеликий GIF Текст, логотипи, баннери, векторні рисунки, фонове зображення, що повторюється

великий JPEG Фотографії, фонове зображення

Кількість кольорів до 256 GIF Текст, логотипи, баннери, векторні рисунки

велика JPEG Фотографії

дуже велика PNG Високоякісні фотографії

Прозорі ділянки є GIF, PNG Текст, логотипи, баннери, векторні рисунки, фотографії

немає GIF, JPEG Фотографії

Ділянки з чіткими краями є GIF, PNG Текст, логотипи, баннери, векторні рисунки

немає JPEG Фотографії

Анімація є GIF Баннери

немає GIF, JPEG Текст, логотипи, баннери, векторні рисунки, фотографії

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

Наукова новизна. Особливе значення при розробці Web-сайтів має його дизайн, який складається з графічних елементів. Проведено експериментальну підготовку графіки для Web-сторінок використанням програм Macromedia. На основі аналізу отриманих результатів розроблено рекомендації щодо вибору оптимального типу файлу та параметрів зображення залежно від його властивостей та призначення. Проведено експериментальну перевірку ефективності використання цієї розробки. Перевірка підтвердила правильність гіпотези дослідження.

88

Список литературы: 1. БондаренкоМ. А. Web-дизайн і презентація інтелектуальної діяльності: Навчальний посібник. Х.: ФОП Лібуркіна Л. М., 2010. 424 с. 2. БондаренкоМ.А., Савченко О. О. Утворення та застосування Web-графіки для об’єктно-орієнтованих інформаційних систем // Збірник «Новий колегіум». ХНУРЕ. 2014. 8 с.

Надійшла до редколегії 13.09.2013 Бондаренко Микола Андрійович, канд. техн. наук, професор, Українська інженерно-педагогічна Академія. Наукові інтереси: інформаційні технології та проектування технічних систем. Адреса: Україна, 61000, Харків, вул. Клочківська, 195 г, кв. 44, тел. 7 19 50 01.

УДК 004.5; 004.7; 004.8

М.В. ШТУКИН

ТЕХНОЛОГИЯ ВЫБОРА РАЦИОНАЛЬНЫХ РЕШЕНИЙ ПРИ ЛИКВИДАЦИИ ПОСЛЕДСТВИЙ ЧРЕЗВЫЧАЙНЫХ СИТУАЦИЙ

Предлагается технология для анализа и управления в чрезвычайных ситуациях, которая обеспечивает рациональный логический вывод и позволяет получить управленческие решения за счет выделения квантов знаний из прецедентной базы микроситуаций; в отличие от существующих уменьшает риски принимаемых решений при ликвидации последствий чрезвычайных ситуаций с минимальными затратами.

Актуальность. Многие страны, в том числе и Украина, имеют проблемы, связанные с необходимостью разработки эффективных информационных технологий оптимизации принимаемых решений для ликвидации последствий чрезвычайных ситуаций (ЧС) в кратчайшие сроки с наименьшими затратами. Такую проблему необходимо решать в условиях многокритериальности и неопределенности анализируемой информации о процессах, которые характеризуют ЧС. ЧС - это ситуация, которая имеет геоинформационный контекст, сложилась в результате опасного природного явления, катастрофы, стихийного бедствия. Такая ситуация может повлечь за собой человеческие жертвы, ущерб здоровью людей или окружающей среде, значительные материальные потери и нарушение условий жизнедеятельности людей.

Для ЧС характерны следующие особые явления: геофизические, геологические, метеорологические, агрометеорологические, морские гидрологические, гидрологические, природные пожары, инфекционная заболеваемость людей и сельскохозяйственных животных, поражение сельскохозяйственных растений болезнями и вредителями. Близкими к ЧС являются экологические чрезвычайные ситуации, вызванные экологическими обратимыми и не обратимыми явлениями. Результатом ЧС является вред наносимый природе, человеку, объектам экономики, социальной сферы, окружающей природной среде, а также изменения обстановки, произошедшие вследствие этого.

В этой связи актуальным является мониторинг и прогнозирование ЧПС -наблюдение, контроль и предвидение опасных процессов и явлений природы, являющихся источниками чрезвычайных ситуаций, а также динамики развития чрезвычайных ситуаций, определение их масштабов в целях решения задач предупреждения и организации ликвидации бедствий.

Возникновение ЧС для большинства природных явлений обусловлено в первую очередь объективно существующими не контролируемыми человеком явлениями в окружающей среде. Зарождение и развитие неблагоприятных стихийных явлений (землетрясений, тайфунов, наводнений, цунами и т.д.) должно объективно фиксироваться множеством преобразователей информации и характеризоваться разнородными параметрами с различными измерительными шкалами. Параметры для ЧС имеют различную значимость, точность, влияние на контролируемую ситуацию. Информация о ЧС может стареть и не всегда быть

89

i Надоели баннеры? Вы всегда можете отключить рекламу.