Відмінності між версіями «Обробка зображень лабораторна №3 Кислий Олександр»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(Створена сторінка: '''''<font color='violet' size=5>ФОРМАТИ ГРАФІЧНИХ ФАЙЛІВ</font>'''''<br />)
 
 
(не показані 23 проміжні версії цього учасника)
Рядок 1: Рядок 1:
'''''<font color='violet' size=5>ФОРМАТИ ГРАФІЧНИХ ФАЙЛІВ</font>'''''<br />
+
'''''<font color='green' size=5>ФОРМАТИ ГРАФІЧНИХ ФАЙЛІВ</font>'''''<br />
 +
 
 +
==''ПОНЯТТЯ ГРАФІЧНОГО ФОРМАТУ''==
 +
 
 +
Графічний формат - це спосіб запису графічної інформації для зберігання зображень (фотографій та малюнків). Формати графічних файлів бувають векторними і растровими.
 +
 
 +
Растрові формати представляють зображення у вигляді так званої сітки пікселів (кольорових крапок).
 +
 
 +
Що ж стосується векторного формату зображення, то він для побудови графіки використовує елементарні геометричні фігури: крапки, сплайни, лінії і багатокутники.
 +
Всі об'єкти векторної графіки є зображеннями математичних функцій. Такий підхід до подання зображення дозволяє збільшувати масштаб картинки без втрати якості,
 +
чого не можна сказати про растрову графіку.
 +
 
 +
Розглянемо найбільш поширені формати графічних файлів.
 +
 
 +
==''РАСТРОВІ ФОРМАТИ''==
 +
Растровий файл є таблицею (bitmap), в кожній клітці якої встановлений піксель. Як правило, растрові формати, призначені для виводу на екран (не на друк), що актуально,
 +
наприклад, у веб-сервері-дизайні. Растрові формати відрізняються один від одного здатністю нести додаткову інформацію (колірні моделі, канали, шари, анімацію)
 +
і мають різні можливості їх стискування.
 +
 
 +
===Формат BMP===
 +
Формат BMP (від слова bitmap) - це рідний формат для графічного редактора MS Paint. Він підтримується всіма графічними редакторами, що працюють під управлінням операційної системи Windows.
 +
Не використовується в Інтернеті.
 +
 
 +
Файли BMP підтримують кілька різних глибин кольору - від чорно-білого зображення (1 біт) до Deep color (64 біт). Реалізована підтримка часткової прозорості різної бітности.
 +
 
 +
Перевагою формату є той факт, що зображення зберігається без втрат якості. Однак, чим більше геометричні розміри BMP-зображення і колірна глибина, тим більше розмір файлу.
 +
 
 +
У даному форматі можна зберігати тільки одношарові растри. В останніх версіях з'явилися можливості управління кольором. Зокрема, можна вказувати кінцеві точки, виконувати гама-корекцію
 +
і вбудовувати колірні профілі.
 +
 
 +
===Формат JPG===
 +
Формат JPEG (розширення імені файлу .JPG). JPEG призначений для зменшення розмірів файлів растрових зображень, що мають плавні переходи кольорових тонів і відтінків.
 +
Дозволяє регулювати співвідношення між мірою стискання файлу і якістю зображення. JPEG стискує зображення, зберігаючи його повну чорно-білу версію і більшу частину колірної інформації.
 +
Так як зберігається не вся колірна інформація, JPEG є форматом зі втратами, що проявляється, особливо в сильно стиснених файлах, в вигляді розмитого або випадкового розподілення пікселів.
 +
На відмінність від алгоритму стискання GIF, який аналізує файли по рядках, JPEG розбиває зображення на області близьких кольорів.
 +
 
 +
Якщо використовувати формат JPEG для різкої графіки з великими областями одного і того ж кольору, то звичайно отримують погані результати.
 +
Прогресивні файли JPEG подібні на черезрядкові файли GIF тим, що вони визначають спосіб виводу зображення на екран при завантаженні (завантажують різні області графічного файлу одночасно).
 +
При цьому користувач може бачити, що містить зображення ще до того, як весь файл буде повністю завантажений. JPEG не дозволяє включати в файл більше одного зображення, тому анімація JPEG не дуже поширена в Web.
 +
Якщо потрібно відтворити послідовність файлів JPEG в одному і тому ж місці Web-сторінки, можна використати сценарій або додаток, що завантажується, написані на Java.
 +
Однак Java-аплет може вимагати багато часу для ініціалізації і виконання на повільних комп’ютерах.
 +
JPEG найбільше всього підходить для фотографій або графіки зі складними тінями та ефектами освітлення і використовується в Web для фотографій товарів, об’ємних зображень і графіки з ефектами освітлення.
 +
 
 +
===Формат GIF===
 +
GIF (Graphics Interchange Format) - використовує 8-бітовий колір і ефективно стискує суцільні кольорові області, при цьому зберігаючи деталі зображення.
 +
Кількість кольорів в зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітової палітри. Файл у форматі GIF може містити прозорі ділянки.
 +
Якщо використовується відмінний від білого кольору фон, він проглядатиме крізь "діри" в зображенні.
 +
 
 +
Підтримує покадрову зміну зображень, що робить формат популярним для створення банерів і простої анімації.
 +
Для здобуття кольорів, які відсутні в палітрі, можливе вживання розсіювання (dithering), накладення періодичної структури (patttern) і домішування шуму (noise).
 +
GIF формат зберігає зображення в колірній моделі RGB, задані як індексовані кольори (Indexed color в Photoshop).
 +
 
 +
При збереженні файлу використовується непогіршуюча якість вихідного зображення RLE або LZW-подобная компресія.
 +
 
 +
===Формат PNG===
 +
PNG (portable network graphics) - даний формат був спеціально розроблений для Мережі. Передбачалося, що новий формат PNG зможе замінити GIF. У форматі PNG реалізоване: компресія без втрат (на відміну від JPEG), чересстрочная завантаження interlacing і прозорість фону - transparency, (як в GIF, правда, чересстрочность в PNG - 7-мі рівнева), передача кольору з глибиною кольору до 48 біт на піксель плюс альфа-канал і гамма-індикатор. PNG реалізує відкритий, незапатентований алгоритм стискування даних, що дає, проте, кращі результати, чим GIF.
 +
 
 +
На відміну від GIF з його максимум 256 кольорами, PNG дозволяє зберігати повнокольорові зображення з 24 і навіть 48 бітами на піксел. PNG реалізує набагато ефективніший алгоритм чересстрочности (яку в даному випадку правильніше було б називати "через-пиксельностью"). Досить сказати, що перший прохід, що дає загальне уявлення про зображення, займає в PNG не одну восьму вихідного файлу, як в GIF, а всього лише одну шістдесят четвертую - і проте розпізнаваність картинки при цьому помітно краще. PNG дозволяє зберігати повну інформацію про міру прозорості в кожній точці зображення у вигляді так званого альфа-каналу.
 +
 
 +
Кожен піксел PNG-файла, незалежно від його кольору і місця розташування, може мати будь-яку градацію прозорості - від нульової (повна непрозорість) до абсолютної невидимості. Одним з недоліків нового формату PNG з'явилася неможливість зберігати декілька зображень в одному файлі і створювати що-небудь схоже на GIF- анімацію. Хоч і існують спеціальні формати, які дозволяють зберігати не лише анімацію, але і звуковий супровід до нього (формати AVI, MPEG та інші), проте розмір файлів цих форматів, що вийшли, виявляється більше, ніж в анімації, створеної у форматі GIF (хай і з ледве гіршою якістю).
 +
 
 +
PNG підтримує три типи зображень – кольорові з глибиною 8 або 24 біти і чорно-білі з градацією 256 відтінків сірого. Стискання інформації здійснюється без втрат, передбачені 254 рівня альфа-каналу та черезрядкова розгортка. Вважається, що PNG забезпечує краще стискання, ніж GIF (на 10 –30 %), що залежить від якості кодувальника. Специфікація формату PNG включає можливості автоматичної корекції кольорів при перенесенні зображень між апаратними платформами і ефектів змінної прозорості.
 +
 
 +
==''ВЕКТОРНІ ФОРМАТИ''==
 +
Як правило, кожна програма, що працює з векторною графікою, підтримує власний формат зображень. Також потрібно відзначити, що векторна графіка буває двомірною і тривимірною.
 +
 
 +
Для роботи з двомірної графікою може використовуватися програмний пакет Adobe Illustrator, у якого формат для збереження зображень називається AI. Програма CorelDRAW використовує формат CDR.
 +
 
 +
Що ж стосується тривимірної графіки, то для обміну між додатками був розроблений формат COLLADA. З ним можуть працювати такі програми, як 3ds Max, Maya, Cinema 4D і багато інших. Крім того, остання версія програми Adobe Photoshop підтримує роботу з тривимірною графікою.
 +
 
 +
===Формат SVG===
 +
SVG є векторним форматом, що здатен зберігати високоякісну, інтерактивну веб-графіку. Існують дві версії формату SVG: SVG та Стиснений SVG (SVGZ).
 +
Економія розміру файлу для SVGZ складає від 50% до 80%; однак ви не зможете редагувати файли SVGZ за допомогою текстового редактора.
 +
 
 +
плюси:
 +
* малий розмір: об'єкти .svg займають набагато менше місця, ніж їх близнюки, створені як об'єкт растрової графіки;
 +
* гнучкість: за допомогою CSS можна швидко змінити параметр графіки на сайті, наприклад, колір фону або позицію логотипу на сторінці. Для цього можна відредагувати файл в будь-якому текстовому редакторі;
 +
* масштабованість без зміни якості. Це широко використовується для пристроїв з екранами retina і близьких до них;
 +
* переглянути вміст файлу .svg можна практично будь-яким браузером (IE, Chrome, Opera, FireFox, Safari і т.д.).
 +
 
 +
мінуси:
 +
* створення досить примітивних об'єктів, які можуть бути описані простими фігурами або їх частинами (окружність, пряма, еліпс, прямокутник і т.д.);
 +
* дуже швидко зростає розмір файлу, якщо об'єкт .svg складається з великої кількості дрібних деталей;
 +
* неможливо прочитати частину графічного об'єкта, тільки весь об'єкт цілком, це уповільнює роботу.
 +
 
 +
Де використовується?
 +
 
 +
.svg використовують в дизайні іконок для веб-сайтів. Зображення без втрат розтягується і стискається, менше важить і не виглядає розмитим на пристроях з високою щільністю пікселів.
 +
Як не можна актуально для смартфонів, планшетів. Крім того відкриваються ці файли будь-яким браузером.
 +
 
 +
Коли ви зберігаєте ілюстрацію у форматі SVG, сітчасті об’єкти растеризуються. Окрім того, зображення, які не мають альфа-каналів, перетворюються у формат JPEG.
 +
Зображення з альфа-каналами перетворюються у формат PNG. Якщо у документі є кілька монтажних областей, і документ зберігається у форматі SVG,
 +
зберігається активна монтажна область. Неможливо зберегти окремі монтажні області як окремі файли SVG.
 +
 
 +
==''ФОТО У РОЗГЛЯНУТИХ ФОРМАТАХ''==
 +
 
 +
# [https://drive.google.com/file/d/1TjMxkKVkOdbZrMAWwrXGwtWo-t_rl9gt/view?usp=sharing BMP]
 +
# [https://drive.google.com/file/d/1ATJP8Nj-js9NvugHN7KZ9NwZ-C1xGEx5/view?usp=sharing JPG]
 +
# [https://drive.google.com/file/d/165BdGESDGrhAHJ4y7m1Tq2601JQtX-j9/view?usp=sharing GIF]
 +
# [https://drive.google.com/file/d/1-Fb6gb6MOwNoDK1m5MzS9hMQbiXsaQQN/view?usp=sharing PNG]
 +
 
 +
==''ТАБЛИЦЯ ПОРІВНЯННЯ''==
 +
 
 +
{| class="wikitable" border="1" width="100%"
 +
|-
 +
! Назва формату
 +
| '''Формат BMP'''
 +
| '''Формат PNG'''
 +
| '''Формат JPG'''
 +
| '''Формат GIF'''
 +
|-
 +
| '''Якість зображень'''
 +
| З втратою якості
 +
| З втратою якості
 +
| Без втрати якості
 +
| Присутня втрата якості
 +
|-
 +
| '''Розміри файлів'''
 +
| 450 КБ
 +
| 268 КБ
 +
| 110 КБ
 +
| 306 КБ
 +
|-
 +
| '''Використання'''
 +
| в ОС Windows (Paint) та OS/2.
 +
Не використовується в Інтернеті
 +
| web-сторінки
 +
| майже усі web-сайти та зображення в Інтернеті
 +
| зображення на web-сторінках
 +
|-
 +
| '''Фото'''
 +
| [https://drive.google.com/file/d/1TjMxkKVkOdbZrMAWwrXGwtWo-t_rl9gt/view?usp=sharing BMP]
 +
| [https://drive.google.com/file/d/1-Fb6gb6MOwNoDK1m5MzS9hMQbiXsaQQN/view?usp=sharing PNG]
 +
| [https://drive.google.com/file/d/1ATJP8Nj-js9NvugHN7KZ9NwZ-C1xGEx5/view?usp=sharing JPG]
 +
| [https://drive.google.com/file/d/165BdGESDGrhAHJ4y7m1Tq2601JQtX-j9/view?usp=sharing GIF]
 +
|-
 +
|}
 +
 
 +
'''''ВИСНОВОК:'''''
 +
 
 +
  На мою думку ящко потрібна мінімальні втрати при стисненні(при цьому якість зображення не змінюється), зручний для зберігання проміжних версій зображення, при 
 +
  повторному збережені не втрачає якість, підтримує велику кількість кольорів, підтримка багаторівневої прозорості, та невеликі розміри файлів я б використовував
 +
  PNG. Але цей формат не підтримує анімацію, треба використовувати GIF, та погано підходить для роботи з повноколірними зображенями, треба використовувати JPG.

Поточна версія на 12:11, 17 квітня 2019

ФОРМАТИ ГРАФІЧНИХ ФАЙЛІВ

ПОНЯТТЯ ГРАФІЧНОГО ФОРМАТУ

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

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

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

Розглянемо найбільш поширені формати графічних файлів.

РАСТРОВІ ФОРМАТИ

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

Формат BMP

Формат BMP (від слова bitmap) - це рідний формат для графічного редактора MS Paint. Він підтримується всіма графічними редакторами, що працюють під управлінням операційної системи Windows. Не використовується в Інтернеті.

Файли BMP підтримують кілька різних глибин кольору - від чорно-білого зображення (1 біт) до Deep color (64 біт). Реалізована підтримка часткової прозорості різної бітности.

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

У даному форматі можна зберігати тільки одношарові растри. В останніх версіях з'явилися можливості управління кольором. Зокрема, можна вказувати кінцеві точки, виконувати гама-корекцію і вбудовувати колірні профілі.

Формат JPG

Формат JPEG (розширення імені файлу .JPG). JPEG призначений для зменшення розмірів файлів растрових зображень, що мають плавні переходи кольорових тонів і відтінків. Дозволяє регулювати співвідношення між мірою стискання файлу і якістю зображення. JPEG стискує зображення, зберігаючи його повну чорно-білу версію і більшу частину колірної інформації. Так як зберігається не вся колірна інформація, JPEG є форматом зі втратами, що проявляється, особливо в сильно стиснених файлах, в вигляді розмитого або випадкового розподілення пікселів. На відмінність від алгоритму стискання GIF, який аналізує файли по рядках, JPEG розбиває зображення на області близьких кольорів.

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

Формат GIF

GIF (Graphics Interchange Format) - використовує 8-бітовий колір і ефективно стискує суцільні кольорові області, при цьому зберігаючи деталі зображення. Кількість кольорів в зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітової палітри. Файл у форматі GIF може містити прозорі ділянки. Якщо використовується відмінний від білого кольору фон, він проглядатиме крізь "діри" в зображенні.

Підтримує покадрову зміну зображень, що робить формат популярним для створення банерів і простої анімації. Для здобуття кольорів, які відсутні в палітрі, можливе вживання розсіювання (dithering), накладення періодичної структури (patttern) і домішування шуму (noise). GIF формат зберігає зображення в колірній моделі RGB, задані як індексовані кольори (Indexed color в Photoshop).

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

Формат PNG

PNG (portable network graphics) - даний формат був спеціально розроблений для Мережі. Передбачалося, що новий формат PNG зможе замінити GIF. У форматі PNG реалізоване: компресія без втрат (на відміну від JPEG), чересстрочная завантаження interlacing і прозорість фону - transparency, (як в GIF, правда, чересстрочность в PNG - 7-мі рівнева), передача кольору з глибиною кольору до 48 біт на піксель плюс альфа-канал і гамма-індикатор. PNG реалізує відкритий, незапатентований алгоритм стискування даних, що дає, проте, кращі результати, чим GIF.

На відміну від GIF з його максимум 256 кольорами, PNG дозволяє зберігати повнокольорові зображення з 24 і навіть 48 бітами на піксел. PNG реалізує набагато ефективніший алгоритм чересстрочности (яку в даному випадку правильніше було б називати "через-пиксельностью"). Досить сказати, що перший прохід, що дає загальне уявлення про зображення, займає в PNG не одну восьму вихідного файлу, як в GIF, а всього лише одну шістдесят четвертую - і проте розпізнаваність картинки при цьому помітно краще. PNG дозволяє зберігати повну інформацію про міру прозорості в кожній точці зображення у вигляді так званого альфа-каналу.

Кожен піксел PNG-файла, незалежно від його кольору і місця розташування, може мати будь-яку градацію прозорості - від нульової (повна непрозорість) до абсолютної невидимості. Одним з недоліків нового формату PNG з'явилася неможливість зберігати декілька зображень в одному файлі і створювати що-небудь схоже на GIF- анімацію. Хоч і існують спеціальні формати, які дозволяють зберігати не лише анімацію, але і звуковий супровід до нього (формати AVI, MPEG та інші), проте розмір файлів цих форматів, що вийшли, виявляється більше, ніж в анімації, створеної у форматі GIF (хай і з ледве гіршою якістю).

PNG підтримує три типи зображень – кольорові з глибиною 8 або 24 біти і чорно-білі з градацією 256 відтінків сірого. Стискання інформації здійснюється без втрат, передбачені 254 рівня альфа-каналу та черезрядкова розгортка. Вважається, що PNG забезпечує краще стискання, ніж GIF (на 10 –30 %), що залежить від якості кодувальника. Специфікація формату PNG включає можливості автоматичної корекції кольорів при перенесенні зображень між апаратними платформами і ефектів змінної прозорості.

ВЕКТОРНІ ФОРМАТИ

Як правило, кожна програма, що працює з векторною графікою, підтримує власний формат зображень. Також потрібно відзначити, що векторна графіка буває двомірною і тривимірною.

Для роботи з двомірної графікою може використовуватися програмний пакет Adobe Illustrator, у якого формат для збереження зображень називається AI. Програма CorelDRAW використовує формат CDR.

Що ж стосується тривимірної графіки, то для обміну між додатками був розроблений формат COLLADA. З ним можуть працювати такі програми, як 3ds Max, Maya, Cinema 4D і багато інших. Крім того, остання версія програми Adobe Photoshop підтримує роботу з тривимірною графікою.

Формат SVG

SVG є векторним форматом, що здатен зберігати високоякісну, інтерактивну веб-графіку. Існують дві версії формату SVG: SVG та Стиснений SVG (SVGZ). Економія розміру файлу для SVGZ складає від 50% до 80%; однак ви не зможете редагувати файли SVGZ за допомогою текстового редактора.

плюси:

  • малий розмір: об'єкти .svg займають набагато менше місця, ніж їх близнюки, створені як об'єкт растрової графіки;
  • гнучкість: за допомогою CSS можна швидко змінити параметр графіки на сайті, наприклад, колір фону або позицію логотипу на сторінці. Для цього можна відредагувати файл в будь-якому текстовому редакторі;
  • масштабованість без зміни якості. Це широко використовується для пристроїв з екранами retina і близьких до них;
  • переглянути вміст файлу .svg можна практично будь-яким браузером (IE, Chrome, Opera, FireFox, Safari і т.д.).

мінуси:

  • створення досить примітивних об'єктів, які можуть бути описані простими фігурами або їх частинами (окружність, пряма, еліпс, прямокутник і т.д.);
  • дуже швидко зростає розмір файлу, якщо об'єкт .svg складається з великої кількості дрібних деталей;
  • неможливо прочитати частину графічного об'єкта, тільки весь об'єкт цілком, це уповільнює роботу.

Де використовується?

.svg використовують в дизайні іконок для веб-сайтів. Зображення без втрат розтягується і стискається, менше важить і не виглядає розмитим на пристроях з високою щільністю пікселів. Як не можна актуально для смартфонів, планшетів. Крім того відкриваються ці файли будь-яким браузером.

Коли ви зберігаєте ілюстрацію у форматі SVG, сітчасті об’єкти растеризуються. Окрім того, зображення, які не мають альфа-каналів, перетворюються у формат JPEG. Зображення з альфа-каналами перетворюються у формат PNG. Якщо у документі є кілька монтажних областей, і документ зберігається у форматі SVG, зберігається активна монтажна область. Неможливо зберегти окремі монтажні області як окремі файли SVG.

ФОТО У РОЗГЛЯНУТИХ ФОРМАТАХ

  1. BMP
  2. JPG
  3. GIF
  4. PNG

ТАБЛИЦЯ ПОРІВНЯННЯ

Назва формату Формат BMP Формат PNG Формат JPG Формат GIF
Якість зображень З втратою якості З втратою якості Без втрати якості Присутня втрата якості
Розміри файлів 450 КБ 268 КБ 110 КБ 306 КБ
Використання в ОС Windows (Paint) та OS/2.

Не використовується в Інтернеті

web-сторінки майже усі web-сайти та зображення в Інтернеті зображення на web-сторінках
Фото BMP PNG JPG GIF

ВИСНОВОК:

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