Тема: Підготовка векторних та растрових зображень для створення

Веб-сайтів

Література

1. Блінова Т. О. Комп’ютерна графіка / Блінова Т. О., Порєв В. М. – К. :

Юніор, 2004. – 456 с.

2. Богуславский А. А. С++ и компьютерная графика / А. А. Богуславский.

– М. : Компьютер Пресс, 2003. – 352 с.

3. Божко А. Н. Компьютерная графика : учеб. пособие / Божко А. Н.,

Жук Д. М., Маничев В. Б. – М. : Изд-во МГТУ им. Н. Э. Баумана, 2007. – 392 с.

Інтернет-ресурси

1. Графіка і обробка зображень [Електронний ресурс] – Режим доступу :

http://algolist.manual.ru/graphics/

2. Інтернет - університет з інформаційних технологій [Електронний

ресурс] – Режим доступу : http://www.intuit.ru/department/graphics/rastrgraph/

3. Лекції з комп’ютерної графіки [Електронний ресурс] – Режим доступу

: http://www.kgraph.narod.ru/lectures/lectures.htm

Додаткова література:

1. Сайт з комп’ютерної графіки Московського державного університету

ім. Ломоносова [Електронний ресурс] – Режим доступу :

http://graphics.cs.msu.su

2. Сайт з комп’ютерної графіки Київського національного університету

імені Т. Г. Шевченка [Електронний ресурс] – Режим доступу :

http://cg.unicyb.kiev.ua

3. Сайт з комп’ютерної графіки Новосибірського технічного

університету [Електронний

ПЛАН ЛЕКЦІЇ

1. Етапи створення Веб-сайтів

2. Підготовка графічних зображень

3. Корегування розмірів графічних зображень для Веб-сайтів

4. Кольорова корекція графічних зображень

ТЕКСТ ЛЕКЦІЇ

1. Етапи створення Веб-сайтів

Нині, Інтернет-технології знайшли широке використання у всіх сферах

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

легко потрапити на ту чи іншу Інтернет-сторінку, ввівши адресу сайту або

2

перейшовши за посиланням.

Створення сайтів включає не тільки розробку красивого й оригінального

оформлення сторінок. Всі роботи по створенню якісного сайту мають власні

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

інформативність і легкість роботи з сайтом. Крім цього, необхідно врахувати

можливості подальшого розширення сайту та його оптимізацію.

Розробка сайту – це процесу вибору кольорової гами, шрифтів,

компонування інформації та використання зручної панелі навігації. Найбільш

складний процес – це верстка. При створеннв Веб-сторінок необхідно

врахувати вимоги до обсягу сторінок.

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

досвідчені програмісти можуть правильно скомпонувати Веб-сторінку на

аркуші таким чином, щоб вона адекватно відображалася в будь-якому браузері.

Якісно виконаний сайт повинен бути динамічним. Без постійного оновлення

сайту, він не буде цікавий.

Створення сайту – це розробка шаблону і структури, а просування сайту

– це постійне оновлення і наповнення сайту новими статтями. Тільки постійно

розкручуючи Інтернет-ресурс, наповнюючи його новими матеріалами можна

домогтися високого рейтингу в пошукових системах.

Контент (content, вміст) – це інформаційне наповнення сайту, та

інформація, яку розробник складає самостійно або копіює з дотриманням

відповідних законностей.

Контент містить:

Тексти.

Графіку: картинки, фото, креслення, елементи інтерфейсу.

Мультимедіа: аудіо та відео файли.

Веб-дизайн сайту практично завжди першим впливає на враження

користувача про сайт у цілому. І від того, яким виявиться це враження,

залежить чи залишиться користувач у вас на сайті або піде, при цьому в глибині

душі заприсягнувшись більше ніколи не вертатися.

Процес розробки може бути розділений на кілька етапів.

Перший етап розробки дизайну сайту. Умовно його можна було б

назвати «навіщо?». На даному етапі відбувається обговорення цілей і завдань,

які ставляться перед сайтом, докладне вивчення сфери діяльності,

партнерів, конкурентів і клієнтів компанії-замовника. Результат роботи

наприкінці цього етапу – це загальне уявлення замовника й розробника про

майбутній сайт і його web дизайн: буде це інтернет-магазин, корпоративний

сайт, промо-сайт, інтернет-портал або розважальний сайт; скільки на сайті буде

сторінок.

3

Другий етап розробки — це підготовка концепції Веб-дизайну

сайту. На цій стадії дизайнери визначають веб-дизайн відповідно до

результатів попереднього аналізу: які розділи складуть базис сайту, якою буде

навігація, якою інформацією необхідно наповнити сайт, тощо.

Третій етап розробки Веб-сайту дизайну – розробка та

затвердження дизайн-макета. Дизайн-макет, як і будь-який інший макет,

служить зразком того, що ви одержите в результаті. Докладно вивчивши веб-

дизайн сторінок сайту на шаблоні, замовник може виразити якісь свої

зауваження, побажання, сумніви й чим активніша участь замовника в розробці,

тим більше web дизайн сайту буде відповідати всім його очікуванням.

Коли структура сайту обрана, веб-дизайн концепція погоджена, то

наступає час останнього, четвертого етапу розробки Веб-дизайну. На цьому

етапі відбувається створення графічних елементів, обробка створених

растрових та векторних зображень, схем, кнопок меню й інших елементів

оформлення сторінок відповідно до розробленого дизайн-макету.

2. Підготовка графічних зображень

Веб-зображення на сайті створити нескладно, але до їх розміщення та

оптимізації варто підходити грамотно, щоб б отримати з графіки на сайті

максимальну вигоду. Зображення привертають увагу і можуть збити з

пантелику. Використання графіки на сайті має свої мінуси і відповідно плюси.

Малюнки збагачують текст, допомагають краще зрозуміти значення

деяких ідей. Наприклад, якщо інструкція по збірці конструктора містить

графічний опис кожного етапу, можна отримати візуальне підтвердження

правильної збірки. Коли відомості про продукт містять фотографії, відвідувач

має набагато більше інформації про продукт, ніж при вивченні його текстового

опису. Файли із зображеннями є об'ємнішими, ніж текстові, і повільніше

завантажуються.

Проте, якщо зображення застосовують як єдиний спосіб передачі

інформації, це істотно зменшує доступність. Якщо зміст представлено у вигляді

зображення, люди, позбавлені можливості побачити його, не можуть дістати

доступ до змісту. Не завжди можна змінити зображення в тому ступені, який

необхідний для людей з особливими вимогами до його параметрів. Доступ до

зображень може бути закритий для людей з обмеженими технічними

можливостями, наприклад для тих, хто використовує пристрої з невисокою

пропускною здатністю або застаріле програмне забезпечення браузера.

Тут вступають у справу фахівці з обробки графічної інформації:

Група «Художники»

Завдання

4

Художники – творчі особистості. Тому вам таке завдання: з'ясувати, що

таке векторна та растрова графіка; які їх особливості, переваги та недоліки. Вам

потрібно буде відповісти на такі запитання:

1. Що таке растрова графіка?

2. Що таке векторна графіка?

3. Який найменший елемент кожної з них?

4. Що є характерним для растрової графіки?

5. Чим особлива векторна графіка?

Використовуйте для пошуку такі джерела:

1. http://uk.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1

%80%D0%BE%D0%B2%D0%B0_%D0%B3%D1%80%D0%B0%D1%84%D1%9

6%D0%BA%D0%B0

2. http://uk.wikipedia.org/wiki/%D0%92%D0%B5%D0%BA%D1%82%D0

%BE%D1%80%D0%BD%D0%B0_%D0%B3%D1%80%D0%B0%D1%84%D1%9

6%D0%BA%D0%B0

3. http://dolgomudova-anakonda.blogspot.com/2012/05/56_31.html

4. http://lib.lntu.info/book/knit/auvp/2012/12-14/page13.html

5. http://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%BF'%D

1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0_%D0%B3%D1%80%D0%

B0%D1%84%D1%96%D0%BA%D0%B0

6. http://lib.lntu.info/book/knit/auvp/2012/12-14/page14.html

Зробити висновки: Де використовується векторна та растрова графіка?

Основні принципи і рекомендації

1. Використовуйте графічні зображення на сайті з певною метою

Певні ідеї вимагають обов'язкового графічного втілення їх на сайті:

наприклад, діаграма, що ілюструє зростання населення поруч з інформацією

про перепис або фотографія моря на сайті про відпочинок на морі. Таблиця з

цифрами або опис картинки можуть звичайно надати короткі відомості про

зображення, але зрештою вони не здатні замінити графічне зображення.

Зображення використовуються і для того, щоб передати атмосферу якогось

місця або певний задум. Іноді зображення використовуються як частина

інтерфейсу користувача - стрілки, іконки чи кнопки або для визначення

візуального образу сайту.

Зрештою, Інтернет – це візуальне середовище, і зображення додають

привабливість сторінкам та пожвавлюють її.

2. Прагніть обходитися без використання графічного тексту

В Інтернеті найбільш ефективним інструментом залишається текст. Він є

зручним і для людей і для пошукових систем. Текст може зазнати багатьох змін

5

і все одно зберігати свій сенс.

Зображення не розпізнаються пошуковими роботами і тому не мають для

них змістовного навантаження. З боку браузера, зображення - це сукупність

колірних пікселів. Браузер не в змозі поглянути на графічне навігаційне

посилання і зрозуміти, що колірні піксели, насправді, є текстовими знаками, які

складають слова «Головна» або «Допомога».

Щоб збільшити зображення, браузер може лише збільшити кількість

подібних елементів, додавши їх до вже наявних нові піксели. В результаті

збільшення графіки користувач отримує розмитий текст, який важко зрозуміти.

Графічний текст не підтримує можливостей змінити колір або стиль

графічного тексту.

Зрештою, графічний текст не відображається в браузері, де відключено

відображення графічних елементів. Якщо для навігації використовуються

зображення, тоді блокується доступ до інформації, що міститься в них. Якщо

людина не може скористатися навігацією сайту, йому недоступний і сам сайт.

Прості текстові посилання завжди будуть переважно, особливо відносно такого

важливого елементу, як навігація сайту. Тому, для навігації сайту все ж таки

краще використати текстові посилання.

Графічний текст буде дуже доречним як візуальний засіб, наприклад, в

банері і логотипі. Основною функцією тексту в даному випадку є

представлення торгової марки, впізнанності бренду, а не інформація.

3. Прописуйте всі зображення альтернативним текстом

Альтернативний текст – це альтернативний метод надання інформації

людям, які не можуть побачити зображення.

Якщо графічне зображення містить важливу для змісту і функціонування

сторінки інформацію, користувачі з відключеною графікою можуть прочитати

текстовий опис, що міститься в атрибуті ALT тега IMG.

Користувачі, які позбавлені доступу до зображень або у яких відключено

відображення графічних елементів, можуть отримати вичерпною інформацію за

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

інтерфейсу користувача, повинні обов'язково супроводжуватися

альтернативним текстом, що виконує еквівалентну функцію, наприклад

«Перейдіть до наступної сторінки сайту» або «Видрукувати сторінку».

4. Графіка, що є частиною змісту, має супроводжуватися текстовим

описом

Графічні зображення, які є частиною змісту сторінки сайту, можуть

вимагати детальнішого опису, який виходить за рамки можливостей

альтернативного тексту. Бажано надавати текстового опису інформації

зображення з використанням посилань на сторінки або підписів до малюнків.

6

5. Уникайте надмірного використання анімованих зображень на

сайті

Графічні зображення – це дієвий засіб залучення уваги користувача і

використання для цього рухомих зображень є доволі ефективним. Практично

неможливо ігнорувати миготливий елемент сторінки. Але, більшість

користувачів Інтернету дратує анімація на сайтах. Анімовані об'єкти заважають

користувачам зосередитися на основному вмісті сторінки, тому, старайтеся не

розміщувати анімовані зображення поряд з основним змістом.

6. Використовуйте зменшені копії великих малюнків

Великі зображення вимагають більше часу для завантаження і обмежують

гнучкість сторінки. Тому, для максимальної зручності відвідувачів на сторінки

сайту слід виносити картинки невеликого розміру (іконки), які користувач за

потребою може легко збільшити.

3. Корегування розмірів графічних зображень для Веб-сайтів

Файловий розмір зображення представляє собою цифровий розмір файлу

зображення, що вимірюється в кілобайтах (Кб), мегабайтах (Мб) або гігабайтах

(Гб). Файловий розмір пропорційний розмірам зображення у пікселях.

Зображення з більшою кількістю пікселів мають більшу чіткість при тому ж

самому розмірі для друку, але вони займають більше дискового простору та їх

редагування може бути більш повільним. Тому роздільна здатність стає

компромісом між якістю зображення (збиранням усієї необхідної інформації) та

розміром файлу.

Іншим фактором, що впливає на файловий розмір, є формат файлу. Через

те, що у файлових форматах GIF, JPEG, PNG та TIFF застосовуються різні

методи стиснення, розмір файлів з однаковими розмірами у пікселях може

сильно відрізнятися. Подібним чином, бітова глибина кольору та кількість

шарів та каналів у зображенні впливає на розмір файлу.

Максимальний розмір зображення, що підтримується в Photoshop –

300,000 на 300,000 пікселів. Це обмеження накладає межі розміру для друку та

роздільної здатності, що доступні для зображення.

Що впливає на розмір файлу?

Розмір файлу залежить від піксельних розмірів зображення та числа

шарів, які воно містить. Зображення з більшою кількістю пікселів можуть

давати більше подробиць під час друку, проте вони потребують більше місця на

диску і їхнє редагування та друк уповільнюються. Ви маєте стежити за

розмірами ваших файлів, щоб файли не ставали занадто великими для ваших

цілей. Якщо файл стає завеликим, зменшіть число шарів зображення або змініть

його розмір.

7

Тут вступають у справу фахівці з обробки графічної інформації:

Група « Фотографи»

Завдання

Фотографи – люди, які відповідально підходить до справи. У своїй

роботі використовує різні графічні формати. Тому Вам підсилу з'ясувати, які є

формати графічних файлів, чим вони характеризуються та де

використовуються. Вам потрібно буде відповісти на такі запитання:

1. Які існують формати графічних файлів?

2. Основні одиниці, які характеризують зображення?

3. Що таке роздільна здатність зображення?

4. Що таке глибина кольору?

Використовуйте для пошуку такі джерела:

1. http://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D1%84%D

1%96%D1%87%D0%BD%D1%96_%D1%84%D0%BE%D1%80%D0%BC%D0%

B0%D1%82%D0%B8

2. https://helpx.adobe.com/ua/photoshop/using/saving-files-graphics-

formats.html

3. http://uk.wikipedia.org/wiki/%D0%A6%D0%B8%D1%84%D1%80%D

0%BE%D0%B2%D0%B5_%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0

%B6%D0%B5%D0%BD%D0%BD%D1%8F

4. http://uk.wikipedia.org/wiki/%D0%A0%D0%BE%D0%B7%D0%B4%

D1%96%D0%BB%D1%8C%D0%BD%D0%B0_%D0%B7%D0%B4%D0%B0%D1

%82%D0%BD%D1%96%D1%81%D1%82%D1%8C_(%D0%BA%D0%BE%D0%

BC%D0%BF'%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0_%D0%B

3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0)

5. http://lib.lntu.info/book/knit/auvp/2012/12-14/page13.html

6. http://uk.wikipedia.org/wiki/%D0%93%D0%BB%D0%B8%D0%B1%

D0%B8%D0%BD%D0%B0_%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%

D1%80%D1%83

7. http://www.geniusnet.com/Genius/wSite/ct?xItem=37102&ctNode=233

9&mp=1

8. http://svitohlyad.com.ua/tehnolohiji/kompyuterna-hrafika-hlybyna-

koloru/

Зробити висновки: Що необхідно зробити з фотографією перш ніж

розмістити її на сайт?

Алгоритми стиснення зображень

Алгоритми стиснення зображень діляться на два види:

Алгоритми стиснення зображень без втрат - процес застосування

8

спеціального алгоритму тим чи іншим інструментом ніяк не позначається на

якості кінцевого продукту навіть при розгляді його мало не під мікроскопом;

Алгоритм стиснення зображень з втратами - коли процес стиснення

завдає як несуттєвий так і серйозної шкоди якості зображення. Серйозної

шкоди зображенню після процесу компресії зображення може пояснюватися

абсолютно просто - неправильно підібраний інструмент до формату вихідного

зображення, до зображення вже застосовувався якийсь алгоритм або варіант

такий, що варіантів немає.

Ми, звичайно ж, у своїй більшості прагнемо до того, щоб будь-які

маніпуляції з компресією зображень ніяк не були видні користувачам. Таке

цілком реально, адже нинішні інструменти стиснення дозволяють нанести не

істотну шкоду якості зображення, який навіть не буде помітний людського ока.

Однак після процесу обробки істотно зменшується вага файлу навіть у

порівнянні із зображеннями пройшли компресію через алгоритм стиснення

зображень без втрат. Це власне і є основним плюсом алгоритмів стиснення

зображень з втратами над компресією без втрат.

Стискання здійснюється з метою зменшення фізичного розміру блоку

інформації. Стискання інформації здійснює програма-компресор, а відновлення

- програма-декомпресор.

Стискання растрових і векторних даних здійснюється по-різному. В

растрових файлах стискаються тільки дані зображення, а заголовок і решта

даних (таблиця кольорів, кінцівка і т.п.) завжди залишаються незтисненими

(вони, як правило, займають незначну частину растрового файла). Векторні

файли, в яких зберігається математичний опис зображення, а не самі дані, як

правило, не мають "рідної" форми стискання. Це викликано тим, що в

векторному форматі дані вже представлені в компактній формі і стискання дає

дуже незначний ефект. Окрім цього звичайно векторні дані читаються з

незначною швидкістю і при додаванні розпаковування цей процес може стати

ще більш повільним. Якщо векторний файл все ж стискається, то, як правило,

стискаються всі дані, включаючи заголовок.

Більшість алгоритмів стискання забезпечують кодування без втрат, коли

дані при розпаковуванні повністю відновлюються. Методи кодування з

втратами передбачають відкидання деяких даних зображення для досягнення

кращої міри стискання, ніж за методами без втрат. При цьому важливо, щоб

втрата деякої частини даних була прийнятною або навіть доцільною.

Характерною особливістю більшості типів даних є їх надлишковість.

Ступінь надлишковості даних залежить від типу даних. Наприклад, для

відеоданих ступінь надлишковості в декілька разів більша ніж для графічних

даних, а ступінь надлишковості графічних даних, у свою чергу, більша за

9

ступінь надлишковості текстових даних. Іншим фактором, що впливає на

ступінь надлишковості є прийнята система кодування. Прикладом систем

кодування можуть бути звичайні мови спілкування, які є ні чим іншим, як

системами кодування понять та ідей для висловлення думок. Так, встановлено,

що кодування текстових даних за допомогою засобів української мови дає в

середньому надлишковість на 20-25% більшу ніж кодування аналогічних даних

засобами англійської мови.

Для людини надлишковість даних часто пов'язана з якістю інформації,

оскільки надлишковість, як правило, покращує зрозумілість та сприйняття

інформації. Однак, коли мова йде про зберігання та передачу інформації

засобами комп'ютерної техніки, то надлишковість відіграє негативну роль,

оскільки вона приводить до зростання вартості зберігання та передачі

інформації. Особливо актуальною є ця проблема у випадку необхідності

обробки величезних обсягів інформації при незначних об'ємах носіїв даних. У

зв'язку з цим постійно виникає проблема позбавлення надлишковості або

стиснення даних. Коли методи стиснення даних застосовуються до готових

файлів, то часто замість терміну "стиснення даних" вживають термін

"архівування даних", стиснений варіант даних називають архівом, а програмні

засоби, що реалізують методи стиснення називаються архіваторами.

В залежності від того, в якому об'єкті розміщені дані, що підлягають

стисненню розрізняють:

1. Стиснення (архівування) файлів: використовується для

зменшення розмірів файлів при підготовці їх до передавання каналами зв'язку

або до транспортування на зовнішніх носіях малої ємності;

2. Стиснення (архівування) папок: використовується як засіб

зменшення обсягу папок перед довготерміновим зберіганням, наприклад, при

резервному копіюванні;

3. Стиснення (ущільнення) дисків: використовується для

підвищення ефективності використання дискового простору шляхом стиснення

даних при записі їх на носії інформації (як правило, засобами операційної

системи).

Існує багато практичних алгоритмів стиснення даних, але всі вони

базуються на трьох теоретичних способах зменшення надлишковості даних.

Перший спосіб полягає в зміні вмісту даних, другий - у зміні структури даних, а

третій - в одночасній зміні як структури, так і вмісту даних.

Якщо при стисненні даних відбувається зміна їх вмісту, то метод

стиснення є незворотнім, тобто при відновленні (розархівуванні) даних з архіву

не відбувається повне відновлення інформації. Такі методи часто називаються

методами стиснення з регульованими втратами інформації. Зрозуміло, що ці

10

методи можна застосовувати тільки для таких типів даних, для яких втрата

частини вмісту не приводить до суттєвого спотворення інформації. До таких

типів даних відносяться відео- та аудіодані, а також графічні дані. Методи

стиснення з регульованими втратами інформації забезпечують значно більший

ступінь стиснення, але їх не можна застосовувати до текстових даних.

Прикладами форматів стиснення з втратами інформації можуть бути: JPEG

(Joint Photographic Experts Group) для графічних даних; MPG - для для

відеоданих; MP3 - для аудіоданих.

Якщо при стисненні даних відбувається тільки зміна структури даних, то

метод стиснення є зворотнім. У цьому випадкові з архіву можна відновити

інформацію повністю. Зворотні методи стиснення можна застосовувати до

будь-яких типів даних, але вони дають менший ступінь стиснення у порівнянні

з незворотними методами стиснення. Приклади форматів стиснення без втрати

інформації: GIF (Graphics Interchange Format), TIFF (Tagged Image File Format) -

для графічних даних; AVI - для відеоданих; ZIP, ARJ, RAR, CAB, LH - для

довільних типів даних. Існує багато різних практичних методів стиснення без

втрати інформації, які, як правило, мають різну ефективність для різних типів

даних та різних обсягів. Однак, в основі цих методів лежать три теоретичних

алгоритми:

алгоритм RLE (Run Length Encoding);

алгоритми групи KWE(KeyWord Encoding);

алгоритм Хафмана.

Алгоритм RLE

В основі алгоритму RLE лежить ідея виявлення послідовностей даних, що

повторюються, та заміни цих послідовностей більш простою структурою, в якій

вказується код даних та коефіцієнт повторення. Наприклад, нехай задана така

послідовність даних, що підлягає стисненню:

1 1 1 1 2 2 3 4 4 4

В алгоритмі RLE пропонується замінити її наступною структурою: 1 4 2 2

3 1 4 3, де перше число кожної пари чисел -це код даних, а друге - коефіцієнт

повторення. Якщо для зберігання кожного елементу даних вхідної

послідовності відводиться 1 байт, то вся послідовність займатиме 10 байт

пам'яті, тоді як вихідна послідовність (стиснений варіант) займатиме 8 байт

пам'яті. Коефіцієнт стиснення, що характеризує ступінь стиснення.

Чим менше значення коефіцієнта стиснення, тим ефективніший метод

стиснення. Зрозуміло, що алгоритм RLE буде давати кращий ефект стиснення

при більшій довжині послідовності даних, що повторюється. У випадкові

розглянутого вище прикладу, якщо вхідна послідовність матиме такий вигляд:

1 1 1 1 1 1 3 4 4 4, то коефіцієнт стиснення буде рівний 60%. У зв'язку з цим

11

найбільша ефективність алгоритму RLE досягається при стисненні графічних

даних (особливо для однотонових фонових зображень).

Алгоритми групи KWE

В основі алгоритму стиснення за ключовими словами покладено принцип

кодування лексичних одиниць групами байт фіксованої довжини. Прикладом

лексичної одиниці може бути звичайне слово. На практиці, в ролі лексичних

одиниць вибираються послідовності символів, що повторюються, які

кодуються ланцюжком символів (кодом) меншої довжини. Результат кодування

зводиться в таблицю, утворюючи так званий словник.

Існує досить багато реалізацій цього алгоритму, серед яких найбільш

поширеними є алгоритм Лемпеля-Зіва (алгоритм LZ) та його модифікація

алгоритм Лемпеля-Зіва-Велча (алгоритм LZW). Словником в даному алгоритмі

є потенційно нескінченний список фраз. Алгоритм починає роботу з майже

пустого словника, що містить тільки один закодований рядок, так званий

NULL-рядок. Коли зчитується черговий символ вхідної послідовності даних,

він додається до поточного рядка. Процес продовжується доти, поки поточний

рядок відповідає якій-небудь фразі з словника. Але рано або пізно поточний

рядок перестає відповідати якій-небудь фразі словника. У цей момент, коли

поточний рядок являє собою останній збіг зі словником плюс щойно

прочитаний символ повідомлення, кодер видає код, що складається з індексу

збігу і наступного за ним символа, що порушив збіг рядків. Крім того, нова

фраза, що складається з індексу збігу і наступного за ним снмвола, додається в

словник. У наступний раз, коли ця фраза з'явиться в повідомленні, вона може

бути використана для побудови більш довгої фрази, що підвищує міру

стиснення інформації.

Алгоритм LZW побудований навколо таблиці фраз (словника), яка

відображає рядки символів стиснуваного повідомлення в коди фіксованої

довжини. Таблиця володіє так званою властивістю передування, тобто для

кожної фрази словника, що складається з деякої фрази w і символа К фраза w

також міститься в словнику. Якщо всі частинки словника повністю заповнені

кодування перестає бути адаптивним (кодування відбувається виходячи з вже

існуючих в словнику фраз).

Алгоритми стиснення цієї групи найефективніші для текстових даних

великих обсягів і малоефективні для файлів малих розмірів (за рахунок

необхідності зберігання словника).

Алгоритм Хафмана

В основі алгоритму Хафмана лежить ідея кодування бітовими групами.

Спочатку проводиться частотний аналіз вхідної послідовності даних, тобто

12

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

Після цього символи сортуються по спаданню частоти входження.

Основна ідея полягає в наступному: чим частіше зустрічається символ,

тим меншою кількістю біт він кодується. Результат кодування зводиться в

словник, що необхідний для декодування.

Розглянемо простий приклад, що ілюструє роботу алгоритму Хафмана.

Нехай задано текст, в якому літера 'А' входить 10 разів, літера 'B' - 8 раз, 'C'- 6

разів , 'D' - 5 разів, 'E' і 'F' - по 4 рази. Тоді один з можливих варіантів кодування

за алгоритмом Хафмана наведений у таблиці 1.

Таблиця 1.

Символ Частота

входження

Бітовий

код

A 10 00

B 8 01

C 6 100

D 5 101

E 4 110

F 4 111

Як видно з таблиці 1, розмір вхідного тексту до стиснення рівний 37 байт,

тоді як після стиснення - 93 біт, тобто майже 12 байт (без врахування довжини

словника). Коефіцієнт стиснення рівний 32%. Алгоритм Хафмана

універсальний, тобто його можна застосовувати для стиснення даних будь-яких

типів, але він малоефективний для файлів малих розмірів (за рахунок

необхідності зберігання словника).

Програмне забезпечення для корегування розмірів графічних зображень

для Веб-сайтів

Дорогі друзі, сьогодні я хотіла би розглянути з вами всього один

важливий момент роботи над своїм сайтом або блогом - це стиснення

зображень або так звана компресія зображень. Тут же ми розглянемо інші

моменти, що стосуються цього питання.

Колись я вже говорила з вами про оптимізацію зображень, але ми

розглянули лише один спосіб – онлайн сервіс Puny Png. Самі розумієте, що це

всього лише мала частина великого питання, повинна бути обов'язково

альтернатива, і ми її пошукаємо сьогодні.

Перед тим як ми розглянемо варіанти стиснення зображень, давайте

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

Плюси стиснення зображень

13

Стиснення зображень дозволяє зменшити обсяг самого зображення. Це

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

заощаджувати місце на вашому сервері.

Після того, як ми оцінили важливість процесу стиснення зображень,

думаю, що багатьом було б цікаво дізнатися, а як власне зображення

зменшують свою вагу? Відповідь на це питання проста - застосовуються

спеціальні алгоритми.

Стиснення зображень онлайн сервісами

Для того щоб зрозуміти ефективність стиснення зображень я візьму в

приклад ось цю фотографію і буду її стискати у всіх запропонованих вам

інструментах:

Відразу тут же хотілося б відзначити, що напевно при завантаженні вами

інших своїх зображень у всіх цих же інструментах результати будуть дещо

різними по цілому ряду причин (вага вихідного зображення , формат

початкового зображення, якості, застосування раніше алгоритмів і так далі), але

так чи інакше ви зможете приблизно прикинути і вибрати оптимальний спосіб

для себе.

1.Puny Png, роботу з яким я описував тут. Цілком не поганий сервіс,

підтримує jpg, gif та png. Максимальний розмір файлу 150 Кб. Сервіс має API, а

також PRO-версію, що дає ряд переваг перед FREE.

Складного в роботі абсолютно нічого немає. На головній сторінці

завантажуємо зображення і виконуємо компресію.

2.Kraken працює за принципом попередника і з тими ж форматами jpg,

gif та png.

Входимо на сайт, завантажуємо зображення і отримуємо результат

(клікабельно):

14

У даного сервісу навіть є плагіни для стиснення зображення онлайн

браузерів FireFox і Chrome. На самому сайті написано про блискавичної роботі

сервісу, але часом він впадає в транс і обробляє зображення тривалий час.

3.Jpegmini - інструмент компресії зображень працює тільки з форматом

jpeg. Стискання відбувається дуже швидко і без втрат.

Найцікавіше, що в режимі онлайн пересуваючи курсор (на скріншоті це

вертикальна смужка) можна переглянути якість вихідного зображення і

отриманого, таким чином можна порівняти якість на виході. В Jpegmini

можливо пакетне стиснення зображень.

Цей сервіс має і десктопну версію.

http://www.jpegmini.com/main/shrink_photo

4.Smushit - мабуть найшвидший і кращий сервіс забезпечує стиснення

зображень онлайн. Розробка пошуковика Yahoo! Насправді швидше сервісу

цього напрямку я не бачив. Між завантаженням зображення і отриманням

результату проходить буквально пара секунд. Система дозволяє максимально

стиснути зображення при цьому застосовується алгоритм стиснення

зображення без втрат. Система чітко визначає непотрібні елементи файла і

видаляє їх зберігаючи високу якість, якщо воно звичайно спочатку було.

15

На Smushit не знайшов я обмежень ні за форматом ні за обсягом файлів. Я

завантажував різні і він їх оперативно обробляв.

Зображення можна вантажити як з комп'ютера, так і безпосередньо

вводити їх URL. В цьому інструменті немає певної однієї інтенсивності

обробки зображень. Система пропонує 9 різних варіантів на виході, в

залежності від якості. Ця система працює на алгоритмі стиснення зображення з

втратами. Далі право вибору вже за вами, все в принципі дуже наочно.

Програми для стиснення зображень

Ефективність компресії зображень онлайн багатьма ставиться під сумнів,

але ви завжди можете знайти програму для стиснення зображень.

1. AdobePhotoshop – даний інструмент будь-якого вебмайстра здатний

легко впоратися стисненням зображень.

Завантажуємо зображення в програму. Після чого заходимо в Файл

Сохранить для Веб

Формати веб-графіки можуть бути растровими (бітовими) або

векторними. Растрові формати вони залежні від роздільної здатності,

тобторозміри растрового зображення та, можливо, якість залежать від

роздільної здатності монітора. Векторні формати незалежні від роздільної

здатності і можуть бути масштабовані (збільшені або зменшені) без будь-якої

втрати якості зображення.

Параметри оптимізації JPEG

JPEG є стандартним форматом для стиснення півтонових зображень,

таких як світлини. Оптимізація зображення у форматі JPEG спирається на

стиснення із втратами, що вибірково вилучає дані.

Оскільки дані зображення втрачаються в разі запису файлу у форматі

JPEG, краще записувати початковий файл у первинному форматі (наприклад,

.PSD Photoshop), якщо ви маєте намір редагувати його пізніше або створювати

додаткові JPEG-версії.

16

Налаштування оптимізації для JPEG (версія Photoshop)

A. Меню «Формат файлу»,

B. Меню «Якість стиснення»,

C. Меню «Оптимізувати»

Якість. Визначає рівень стиснення. Що вище налаштування якості, то

більше подробиць зберігатиме алгоритм стиснення. Проте вище налаштування

якості дає більший формат файлу, ніж нижче налаштування. Перегляньте

оптимізоване зображення за різних налаштувань якості, щоб віднайти найліпшу

рівновагу між якістю і розміром файлу.

Оптимізований Створює вдосконалений JPEG з дещо меншим розміром

файлу. Оптимізований формат JPEG рекомендовано для максимального

стиснення файлу, однак, деякі старі переглядачі можуть не підтримувати його.

Прогресивний Показує зображення у веб-браузері поступово.

Зображення з’являється як послідовність накладань, що дає глядачеві змогу

бачити версію з малою роздільною здатністю перед тим, як завантажувати ціле

зображення. Параметр «Прогресивний» потребує використання формату

«Оптимізований JPEG».

Примітка. Прогресивні JPEG потребують більше оперативної пам’яті для

перегляду, і деякі переглядачі не підтримують їх.

Розмиття Визначає величину розмиття, що застосовується до

зображення. Цей параметр накладає ефект, подібний до фільтра «Розмиття за

Гаусом» , і дозволяє сильніше стискати файл, одержуючи менший за розміром

файл. Рекомендований параметр — від 0.1 до 0.5.

Вбудувати колірний профіль (Photoshop) чи ICC-профіль (Illustrator)

Зберігає колірні профілі в оптимізованому файлі. Деякі переглядачі

використовують колірні профілі для корекції кольорів.

Матовий

Визначає колір заливки для пікселів, що були прозорі у початковому

зображенні. Клацніть зразок кольору «Матовий», щоб вибрати колір на палітрі

кольорів, або виберіть параметр з меню «Матовий»: «Колір піпетки» (для

використання кольору у полі зразка піпетки), «Колір переднього плану»,

17

«Фоновий колір», «Білий», «Чорний» або «Інший» (для використання палітри

кольорів).

Примітка. Параметри «Колір переднього плану» та «Колір тла» доступні

лише у програмі Photoshop.

Пікселі, що були цілком прозорими на вихідному зображенні,

заливаються вибраним кольором; пікселі, що були частково прозорими на

вихідному зображенні, змішуються з вибраним кольором.

2.Kirillka Image Compress - дуже проста і легка програма. Дозволяє

контролювати якість і вагу зображення.

Дана програма розрахована на роботу з jpg і bmp форматами зображень.

По принципу обробки зображень даною програмою побудовані: WipSoft,

RIOT, Zoner Photo Studio та інші.

3.ImageCompression.SB - відмінне рішення для роботи. Виглядає

програма так:

Як видно з скріншоту, програма стиснення зображень

ImageCompression.SB володіє великим функціоналом і масою налаштований і

поднастроек. Існує можливість здійснити пакетне стиснення зображень.

На закінчення нашої сьогоднішньої розмови хотілося б привести ті самі

дані по ефективності компресії зображень представлено у табл. 2:

Таблиця 2.

18

Назва інструменту Вихідний

розмір

зображення

Отриманий

розмір

зображення

Зекономлено

Стиснення зображень онлайн

PunyPNG 51.46 Кб 31.90 Кб 19.56 Кб

Kraken 51.46 Кб 31.91 Кб 19.55 Кб

Jpegmini 51.46 Кб 46 Кб 5.46 Кб

Smushit 51.46 Кб 31.91 Кб 19.55 Кб

DynamicDrive 51.46 Кб 25.4-49.4 Кб 26.06-2.06 Кб

Програма стиснення зображень

Photoshop 51.46 Кб 21.46 Кб 30 Кб

Kirillka Image

Compress

51.46 Кб 20.4-40 Кб 31.06-11.46

Кб

ImageCompression.SB 51.46 Кб 21.22 Кб 30.24 Кб

4. Кольорова корекція графічних зображень

Не залежно від спрямування веб-сайту, кольори веб-дизайну повинні бути

збалансовані та складатися з одного основного кольору та двох-трьох

допоміжних, що виділятимуть акценти. Перенасичений кольорами веб-дизайн

свідчить про дилетантський підхід, тому перенасичувати сайт всіма кольорами

веселки не слід. Якщо ви віддаєте перевагу сильним контрастам у веб-дизайні,

сайт вийде динамічним та одразу приверне увагу навіть того відвідувача, який

потрапив на сайт випадково, коли як пастельна спокійна гамма забезпечить

спокійне сприймання сайту.

Тут вступають у справу фахівці з обробки графічної інформації:

Група «Дизайнери»

Завдання

Сучасні дизайнери повинні йти в ногу з часом. Тому саме для Вас

з'ясувати розподілення кольору, світлові віддінки

Вам потрібно буде відповісти на такі запитання:

1. Які ви знаєте колірні моделі?

2. У чому особливість колірної моделі RGB?

3. У чому особливість колірної моделі CMYK?

4. У чому особливість колірної моделі HSB?

Використовуйте для пошуку такі джерела:

7. http://uk.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82

%D1%80%D0%BE%D0%B2%D0%B0_%D0%B3%D1%80%D0%B0%D1%

84%D1%96%D0%BA%D0%B0

19

8. http://uk.wikipedia.org/wiki/%D0%92%D0%B5%D0%BA%D1%82

%D0%BE%D1%80%D0%BD%D0%B0_%D0%B3%D1%80%D0%B0%D1

%84%D1%96%D0%BA%D0%B0

9. http://dolgomudova-anakonda.blogspot.com/2012/05/56_31.html

10. http://lib.lntu.info/book/knit/auvp/2012/12-14/page13.html

11. http://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%B

F'%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0_%D0%B3%D1

%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0

12. http://lib.lntu.info/book/knit/auvp/2012/12-14/page14.html

Зробити висновки: Що необхідно зробити з фотографією для

збереження глибини кольору ?

Однак як найкраще підібрати кольорову гамму для вашого Інтернет-

ресурсу? У живописі давно відомий компліментарний підбір кольорів –

протилежне розташування кольорів у спектральному колірному кругу. Кольори

розташовані навпроти один одного, тобто віддалені на 180 градусів, є

контрастними.

Метод редукції кольорів і кольори

Визначає спосіб генерування таблиці кольорів і число кольорів, що мають

бути у цій таблиці. Ви можете вибрати один із таких методів редукції кольорів:

Перцепціний

Створює власну таблицю кольорів через надання пріоритету кольорам, до

яких людське око є чутливішим.

Вибірковий

Створює таблицю кольорів, подібну до таблиці кольорів «Перцепційний»,

але надає перевагу широким областям кольору та збереженню веб-кольорів. Ця

таблиця кольорів, як правило, дає зображення з найвищою колірною цілісністю.

«Вибірковий» є типовим параметром.

Адаптивний

Створює власну таблицю кольорів, вибираючи кольори з домінуючого

спектра зображення. Наприклад, зображення лише з зеленим та синім

кольорами дає таблицю кольорів, яка головно складається з відтінків зеленого

та синього. У багатьох зображеннях кольори зосереджені у певних частинах

спектра.

Обмежуючий (Інтернет)

Застосовує стандартну таблицю з 216 кольорів, звичайну для 8-бітних

палітр (256 кольорів) Windows і Mac OS. Цей параметр забезпечує

незастосування тремтіння у переглядачі до кольорів, коли зображення

показується у 8-бітному кольорі. (Ця палітра також зветься безпечною веб-

20

палітрою.) Застосування веб-палітри може давати більші файли і

рекомендоване лише тоді, коли уникнення тремтіння у переглядачі є

пріоритетом.

Власний

Застосовує колірну палітру, що її створив або змінив користувач. Якщо

ви відкриваєте наявний файл GIF чи PNG-8, він уже має власну колірну

палітру.

Використовуйте палітру «Таблиця кольорів» у діалоговому вікні

«Зберегти для Інтернету і пристроїв» для персоналізації таблиці кольорів

зображення.

Прозорість і матовість

Визначає, як мають оптимізуватися прозорі пікселі зображення.

Щоб зробити цілком прозорі пікселі прозорими і частково змішати

прозорі пікселі з кольоровими, виберіть «Прозорість» і матовий колір.

Щоб наповнити цілком прозорі пікселі кольором і частково змішати

прозорі пікселі з тим самим кольором, виберіть матовий колір і вимкніть

«Прозорість».

Щоб вибрати матовий колір, клацніть колірний зразок «Матовий» і

виберіть колір з палітри кольорів. Або виберіть потрібний параметр у меню

«Матовий»: Колір піпетки (для використання кольору у полі зразку піпетки),

Колір переднього плану, Колір тла, Білий, Чорний або Інший (для використання

палітри кольорів).

Веб-кольори

Визначає рівень дозволеного зсуву кольорів до найближчого еквівалента

у веб-палітрі (і не дозволяє тремтіння кольорів у переглядачі). Що вище

значення, то більше кольорів зсувається.

Оптимізація прозорості у зображеннях GIF і PNG

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

Прозорість фону зберігає прозорі пікселі зображення. Це дозволяє показувати

фон веб-сторінки крізь прозорі ділянки вашого зображення. Матовість фону

імітує прозорість заповненням або накладанням прозорих пікселів з матовим

кольором, що можуть збігатися з кольором фону веб-сторінки. Матовість

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

якщо ви знаєте, що це за колір.

Застосовуйте параметри «Прозорість» і «Матова» в діалоговому вікні

«Записати для Інтернету і пристроїв», щоб указати, як мають оптимізуватися

прозорі пікселі у зображеннях GIF і PNG.

21

(GIF і PNG-8) Щоб зробити цілком прозорі пікселі прозорими і

частково змішати прозорі пікселі з кольоровими, виберіть «Прозорість» і

матовий колір.

Щоб наповнити цілком прозорі пікселі кольором і частково змішати

прозорі пікселі з тим самим кольором, виберіть матовий колір і вимкніть

«Прозорість».

(GIF і PNG-8) Щоб зробити всі пікселі з більш ніж 50% прозорості

цілком прозорими, а всі пікселі з прозорістю 50% або менше — цілком

непрозорими, виберіть «Прозорість» і «Жоден» в меню «Матова».

(PNG-24) Щоб записати зображення з багаторівневою прозорістю

(до 256 рівнів), виберіть «Прозорість». Параметр «Матова» вимкнено, бо

багаторівнева прозорість дозволяє накладати зображення на будь-який колір

фону.

Примітка. У переглядачах, що не підтримують прозорість PNG-24,

прозорі пікселі можуть показуватися на фоні типового кольору, наприклад,

сірого.

Щоб вибрати матовий колір, клацніть колірний зразок «Матовий» і

виберіть колір з палітри кольорів. Або виберіть потрібний параметр у меню

«Матовий»: Колір піпетки (для використання кольору у полі зразку піпетки),

Колір переднього плану, Колір тла, Білий, Чорний або Інший (для використання

палітри кольорів).

Параметри «Колір переднього плану» та «Колір тла» доступні лише у

програмі Photoshop.

Підведення підсумків лекції, відповіді на питання.

Запитання для обговорення:

1. На метальній карті за силкою

https://www.mindmeister.com/ru/account/login, яка є спільним документом

Google, кожний внесіть формати файлів, які використовуються у процесі

створеня Веб-сайтів.

2. Назвіть засоби спеціалізованого програмного забезпечення, які

дозволяють адаптувати заображення для Веб?

3. Чому дорівнює обсяг графічних даних у зображенні 300x400 пікселів,

якщо інформація про колір описується 4 байтами?

4. Знайдіть кількість графічної інформації в ярлику розміром 30 х 20

пікселів, який виконаний у палітрі з 256 кольорів.

Рекомендації щодо підготовки до лабораторного заняття.

Повідомлення теми наступної лекції.