Відмінності між версіями «Мультимедія. ЛАБ 3. КН17Б, Горбатий М. Ю.»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
 
Рядок 1: Рядок 1:
−
==Растрові формати==
+
== Растрові формати ==
 
{| class="wikitable" border="2" width="100%"
 
{| class="wikitable" border="2" width="100%"
 
| style="background-color:silver;" | '''Формат'''
 
| style="background-color:silver;" | '''Формат'''
Рядок 10: Рядок 10:
 
Формат файлу BMP здатний зберігати 2D цифрові зображення довільної ширини, висоти та роздільної здатності, як монохромні так і кольорові, різної глибини кольору, і, необов'язково, зі стисненням даних, альфа-каналом та керуванням кольору.
 
Формат файлу BMP здатний зберігати 2D цифрові зображення довільної ширини, висоти та роздільної здатності, як монохромні так і кольорові, різної глибини кольору, і, необов'язково, зі стисненням даних, альфа-каналом та керуванням кольору.
 
| *.bmp<br/>*.dib
 
| *.bmp<br/>*.dib
−
| style="background-color:silver;" | [[Файл:GIF-Cat-JPG.jpg|200px|center|BMP]]
+
| style="background-color:silver;" | [[Файл:GIF-Cat-JPG.jpg|200px|center]]
 
|-  
 
|-  
 
| '''JPEG'''
 
| '''JPEG'''
Рядок 21: Рядок 21:
 
Найбільша роздільна здатність, яку підтримує формат JPEG/JFIF є 65535×65535.
 
Найбільша роздільна здатність, яку підтримує формат JPEG/JFIF є 65535×65535.
 
| *.jpg<br/>*.jpeg<br/>*.JPG<br/>*.JPEG
 
| *.jpg<br/>*.jpeg<br/>*.JPG<br/>*.JPEG
−
| style="background-color:silver;" | [[Файл:GIF-Cat-JPG.jpg|200px|center|JPG]]
+
| style="background-color:silver;" | [[Файл:GIF-Cat-JPG.jpg|200px|center]]
 
|-  
 
|-  
 
| '''GIF'''
 
| '''GIF'''
Рядок 31: Рядок 31:
 
GIF-анімація використовує можливість GIF-формату зберігати у файлі декілька зображень. Якщо в GIF-файлі міститься декілька зображень, то вони будуть показані по черзі, як невеликий фільм. Однак на відміну від звичайного фільму, у якому швидкість відтворення визначається кількістю кадрів за секунду, у GIF-файлі зберігається ряд параметрів, що визначають, яким чином і як довго кожне зображення буде показуватися. Крім того, зображення GIF-файлу можуть бути різного розміру і розміщені в потрібній позиції екрану незалежно від зображень інших кадрів. Кожен GIF-файл містить таблицю індексів кольорів, яку називають індексною колірною палітрою. Вона визначає, які кольори використовуються в зображенні і який індекс відповідає кожному кольору. Залежно від способу збереження для індексу потрібно до 4 байтів даних, тому зображення з 256 кольорами має палітру розміром до 1024-х байт.
 
GIF-анімація використовує можливість GIF-формату зберігати у файлі декілька зображень. Якщо в GIF-файлі міститься декілька зображень, то вони будуть показані по черзі, як невеликий фільм. Однак на відміну від звичайного фільму, у якому швидкість відтворення визначається кількістю кадрів за секунду, у GIF-файлі зберігається ряд параметрів, що визначають, яким чином і як довго кожне зображення буде показуватися. Крім того, зображення GIF-файлу можуть бути різного розміру і розміщені в потрібній позиції екрану незалежно від зображень інших кадрів. Кожен GIF-файл містить таблицю індексів кольорів, яку називають індексною колірною палітрою. Вона визначає, які кольори використовуються в зображенні і який індекс відповідає кожному кольору. Залежно від способу збереження для індексу потрібно до 4 байтів даних, тому зображення з 256 кольорами має палітру розміром до 1024-х байт.
 
| *.gif
 
| *.gif
−
| style="background-color:silver;" | [[Файл:GIF-Cat-GIF.gif|200px|center|GIF]]
+
| style="background-color:silver;" | [[Файл:GIF-Cat-GIF.gif|200px|center]]
 
|-  
 
|-  
 
| '''PNG'''
 
| '''PNG'''
Рядок 39: Рядок 39:
 
Проблема підтримки 24-бітної (повної) прозорості зображення формату PNG у internet-браузері Internet Explorer виробництва Microsoft вирішена компанією-виробником цього програмного продукту у сьомій його версії. Попри це, існує ряд прийомів і технік, які дозволяють веб-майстрам уникнути цієї проблеми, застосовуючи різні скрипти і функції. Всі інші сучасні браузери успішно підтримують можливості формату PNG.
 
Проблема підтримки 24-бітної (повної) прозорості зображення формату PNG у internet-браузері Internet Explorer виробництва Microsoft вирішена компанією-виробником цього програмного продукту у сьомій його версії. Попри це, існує ряд прийомів і технік, які дозволяють веб-майстрам уникнути цієї проблеми, застосовуючи різні скрипти і функції. Всі інші сучасні браузери успішно підтримують можливості формату PNG.
 
| *.png
 
| *.png
−
| style="background-color:silver;" | [[Файл:GIF-Cat-PNG.png|200px|center|PNG]]
+
| style="background-color:silver;" | [[Файл:GIF-Cat-PNG.png|200px|center]]
 
|}  
 
|}  
  
 +
== Векторний формат ==
 +
{| class="wikitable" border="2" width="100%"
 +
| style="background-color:silver;" | '''Формат'''
 +
| style="background-color:silver;" | '''Опис'''
 +
| style="background-color:silver;" | '''Розширення'''
 +
|-
 +
| '''SVG'''
 +
| Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двовимірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні посилання шляхом застосування простих XLink-ів. Ця специфікація є відкритим стандартом, розробленим робочою групою англ. SVG Working Group організації World Wide Web Consortium.
 +
Властивості та переваги:<br/>
 +
* Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів;
 +
* Масштабованість — SVG є векторним форматом;
 +
* Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах PNG, GIF або JPG;
 +
* Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів;
 +
* SVG документи легко інтегруються з HTML і XHTML документами;
 +
* Сумісність з CSS;
 +
та ін.
 +
| *.svg
 +
|}
  
−
==Векторні формати==
+
==Не стиснене фото==
−
=== Формат SVG ===
+
[[Файл:PhotoSource.jpg|300px|center]]
−
специфікація мови розмітки, що базується на XML, та формат файлів для двовимірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні посилання шляхом застосування простих XLink-ів.[2] Ця специфікація є відкритим стандартом, розробленим робочою групою англ. SVG Working Group організації World Wide Web Consortium.
+
−
 
+
−
Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів. Працювати з SVG без засобів візуального програмування не складніше ніж з HTML. При прогляданні документів SVG, що містять графіку, є доступ до проглядання коду файлу, що проглядається, і можливість збереження всього документу. Крім того, SVG файли зазвичай виходять меншими за розміром, ніж порівнянні за якістю зображення у форматах JPEG або GIF, а також добре піддаються стисненню.
+
−
Масштабованість — SVG є векторним форматом. Існує можливість збільшити будь-яку частину зображення SVG без втрати якості. Додатково, до елементів SVG документу можливо застосовувати фільтри — спеціальні модифікатори для створення ефектів, подібних вживаним при обробці растрових зображень (розмиття, витискування, складні системи трансформації тощо). В тексті SVG-коду фільтри описуються тегами, візуалізацію яких забезпечує засіб перегляду, що не впливає на розмір початкового файлу, забезпечуючи при цьому необхідну ілюстративну виразність.
+
−
Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах PNG, GIF або JPG.
+
−
Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів.
+
−
Анімація реалізована в SVG за допомогою мови SMIL (Synchronized Multimedia Integration Language), розробленої також консорціумом W3C. Підтримуються скриптові мови на основі специфікації ECMAScript. SVG-елементами можна керувати за допомогою JavaScript. Застосування скриптів і анімації в SVG дозволяє створювати динамічну і інтерактивну графіку. У SVG забезпечується подієва модель, відстежуються події (завантаження сторінки, зміна її параметрів, події миші, клавіатури тощо). Анімація може запускатися по певній події (наприклад «onmouseover» або «onclick»), що додає графіці інтерактивність. У кожного елементу є свої власні події, до яких можна прив'язувати окремі скрипти.
+
−
SVG — відкритий стандарт. На відміну від деяких інших форматів, SVG не є чиєюсь власністю.
+
−
SVG документи легко інтегруються з HTML і XHTML документами. Зовнішні SVG підключаються через тег <embed>, значення атрибуту src ім'я файлу з розширенням «.svg», що містить розмітку SVG. Атрибути width і height визначають розміри області SVG по горизонталі і по вертикалі. Елементи SVG сумісні з HTML і DHTML.
+
−
Сумісність з CSS (англ. Cascading Style Sheets). Відображенням (форматуванням і декоруванням) SVG елементів можна управляти за допомогою таблиці стилів CSS 2.0 і її розширень, або безпосередньо за допомогою атрибутів SVG елементів.
+
−
 
+
  
 
==Таблиця порівняння форматів==
 
==Таблиця порівняння форматів==

Поточна версія на 18:25, 24 травня 2020

Растрові формати

Формат Опис Розширення Приклад
BMP BMP (Bitmap) — bitmap-формат або DIB (англ. device independent bitmap) - формат файлу зображень растрової графіки, в якому зображення зберігається у вигляді двовимірного масиву пікселів. Запам'ятовує одно- і багатокольорові (RGB) ілюстрації у формі Pixel. BMP-формат використовується в операційних системах Windows та OS/2. Дані цього формату включаються в двійкові файли ресурсів RES і в PE-файли.

Формат файлу BMP здатний зберігати 2D цифрові зображення довільної ширини, висоти та роздільної здатності, як монохромні так і кольорові, різної глибини кольору, і, необов'язково, зі стисненням даних, альфа-каналом та керуванням кольору.

*.bmp
*.dib
GIF-Cat-JPG.jpg
JPEG JPEG (Joint Photographic Experts Group) — растровий формат збереження графічної інформації, що використовує стиснення з втратами якості зображення.

Допустимий рівень стиснення залежить від характеру зображення та перебуває, як правило, в межах 1:10. Формат JPEG часто використовується як формат даних в цифрових камерах. У Інтернеті формат JPEG застосовується для відображення напівтонових ілюстрацій та графічної інформації з плавним переходом тонів. Формат JPEG, на відміну від GIF і PNG, не підтримує ні анімацію, ні прозорість. Область застосування формату досить вузька — розповсюдження високоякісної напівтонової графіки в Інтернеті. Формат підтримується практично всіма сучасними графічними програмами та веб-браузерами.

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

Найбільша роздільна здатність, яку підтримує формат JPEG/JFIF є 65535×65535.

*.jpg
*.jpeg
*.JPG
*.JPEG
GIF-Cat-JPG.jpg
GIF GIF (від англ. Graphics Interchange Format — «формат обміну зображеннями») — 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними з головних особливостей формату є підтримка анімації та прозорості.

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

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

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

*.gif
GIF-Cat-GIF.gif
PNG PNG (Portable Network Graphics) — растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF графічним форматом, який не потребує ліцензії для використання. Формат PNG зберігає інформацію у стиснутому вигляді, але стиснення проводиться без втрат якості, на відміну від формату JPEG.

Формат PNG характеризується сильнішим рівнем стиснення для файлів з більшою кількістю кольорів ніж GIF, але різниця становить близько 5-25%, чого недостатньо для абсолютної переваги формату, тому що маленькі картинки GIF стискає принаймні не гірше. Існує також одна особливість GIF, яку не повторює PNG — це можливість збереження множинного зображення, особливо мультиплікації. Призначення PNG — зберігати лише одне зображення. Для передачі множинних зображень використовується розширений формат MNG, опублікований у середині 1999 року, який підтримується у різних прикладних програмах.

Проблема підтримки 24-бітної (повної) прозорості зображення формату PNG у internet-браузері Internet Explorer виробництва Microsoft вирішена компанією-виробником цього програмного продукту у сьомій його версії. Попри це, існує ряд прийомів і технік, які дозволяють веб-майстрам уникнути цієї проблеми, застосовуючи різні скрипти і функції. Всі інші сучасні браузери успішно підтримують можливості формату PNG.

*.png
GIF-Cat-PNG.png

Векторний формат

Формат Опис Розширення
SVG Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двовимірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні посилання шляхом застосування простих XLink-ів. Ця специфікація є відкритим стандартом, розробленим робочою групою англ. SVG Working Group організації World Wide Web Consortium.

Властивості та переваги:

  • Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів;
  • Масштабованість — SVG є векторним форматом;
  • Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах PNG, GIF або JPG;
  • Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів;
  • SVG документи легко інтегруються з HTML і XHTML документами;
  • Сумісність з CSS;

та ін.

*.svg

Не стиснене фото

PhotoSource.jpg

Таблиця порівняння форматів

Формат зображення Доступні кольори Стиснення Розмір файла(середнє значення) Найкраще підходить для
BMP Змінна величина Без втрат Великий (< 2 МБ) -
JPEG 16 мільйонів З втратами Невеликий (< 1 МБ) Інтернета та зберігання
GIF 256 Без втрат Невеликий (< 1 МБ) Анімації
PNG 16 мільйонів + прозорість Без втрат Великий (< 2 МБ) Інтернет, зберігання та редактування
Отримано з https://wiki.cusu.edu.ua/index.php?title=Мультимедія._ЛАБ_3._КН17Б,_Горбатий_М._Ю.&oldid=366161