Відмінності між версіями «Причислий Лабораторна робота №3»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(Порівняльна таблиця)
 
(не показано 6 проміжних версій цього учасника)
Рядок 5: Рядок 5:
  
 
=== Формат bmp ===
 
=== Формат bmp ===
[[Файл:Angry.png|250px|left]]
+
[[Файл:Venice.png|130px|left]]
 
Bitmap-формат (англ. device independent bitmap) - формат файлу зображень растрової графіки, в якому зображення зберігається у вигляді двовимірного масиву пікселів.
 
Bitmap-формат (англ. device independent bitmap) - формат файлу зображень растрової графіки, в якому зображення зберігається у вигляді двовимірного масиву пікселів.
  
Рядок 17: Рядок 17:
  
 
===Формат jpg===
 
===Формат jpg===
[[Файл:bmp0.jpg|250px|left|BMP]]
+
[[Файл:Venice.jpg|130px|left|BMP]]
 
JPEG (Joint Photographic Experts Group) — растровий формат збереження графічної інформації, що використовує стиснення з втратами.
 
JPEG (Joint Photographic Experts Group) — растровий формат збереження графічної інформації, що використовує стиснення з втратами.
 
При необхідності дуже сильного стиснення втрати можуть бути переглянуті за допомогою модуля Matrixmuster (матричний зразок, матричний малюнок). Втрати і спотворення інформації через ступінь стиснення можуть проявлятися вже в призначених для користувача програмах. Допустимий рівень стиснення залежить від характеру зображення та перебуває, як правило, в межах 1:10.
 
При необхідності дуже сильного стиснення втрати можуть бути переглянуті за допомогою модуля Matrixmuster (матричний зразок, матричний малюнок). Втрати і спотворення інформації через ступінь стиснення можуть проявлятися вже в призначених для користувача програмах. Допустимий рівень стиснення залежить від характеру зображення та перебуває, як правило, в межах 1:10.
Рядок 29: Рядок 29:
  
 
===Формат gif===
 
===Формат gif===
[[Файл:mytrain.gif|250px|left]]
+
[[Файл:Venice.gif|130px|left]]
 
GIF (від англ. Graphics Interchange Format — «формат обміну зображеннями») — 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними з головних особливостей формату є підтримка анімації та прозорості.  
 
GIF (від англ. Graphics Interchange Format — «формат обміну зображеннями») — 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними з головних особливостей формату є підтримка анімації та прозорості.  
  
Рядок 40: Рядок 40:
  
 
===Формат png===
 
===Формат png===
[[Файл:batman.png|250px|left]]
+
[[Файл:Venice.png|130px|left]]
 
PNG (Portable Network Graphics) — растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF графічним форматом, який не потребує ліцензії для використання. Зазвичай файли формату PNG мають розширення .png та MIME тип — image/png.Формат PNG зберігає інформацію у стиснутому вигляді, але стиснення проводиться без втрат якості, на відміну від формату JPEG. Формат PNG спроектований на заміну застарілого і простішого формату GIF.<br />
 
PNG (Portable Network Graphics) — растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF графічним форматом, який не потребує ліцензії для використання. Зазвичай файли формату PNG мають розширення .png та MIME тип — image/png.Формат PNG зберігає інформацію у стиснутому вигляді, але стиснення проводиться без втрат якості, на відміну від формату JPEG. Формат PNG спроектований на заміну застарілого і простішого формату GIF.<br />
  
Рядок 52: Рядок 52:
  
 
==Векторний формат SVG==
 
==Векторний формат SVG==
[[Файл:twitter.jpg|250px|left|Векторне зображення]]
+
[[Файл:Venice.jpg|130px|left|Векторне зображення]]
 
<big>'''SVG'''</big> - XML мова розмітки на основі векторної графіки. По суті це текстовий файл, який є відкритим веб-стандартом для опису двовимірних векторних зображень без втрати якості при масштабуванні. Також підтримує інтерактивність і анімацію. Розробляється з 1999 року і використовується для того, щоб описати за допомогою мови програмування графічні елементи сайту.
 
<big>'''SVG'''</big> - XML мова розмітки на основі векторної графіки. По суті це текстовий файл, який є відкритим веб-стандартом для опису двовимірних векторних зображень без втрати якості при масштабуванні. Також підтримує інтерактивність і анімацію. Розробляється з 1999 року і використовується для того, щоб описати за допомогою мови програмування графічні елементи сайту.
 
*Акронім: Scalable Vector Graphics.
 
*Акронім: Scalable Vector Graphics.
Рядок 92: Рядок 92:
 
!  !! BMP !! JPG !! GIF !! PNG !! SVG
 
!  !! BMP !! JPG !! GIF !! PNG !! SVG
 
|-
 
|-
| Приклади || [https://drive.google.com/file/d/1ye6EtGqOnNYwaZxqGY8Tx2UK8mDq8wh6/view?usp=sharing bmp] || [https://drive.google.com/file/d/1-rKwo3UFt0ac21y94-NSUQDd6TcBda9J/view?usp=sharing jpg] || [https://drive.google.com/file/d/1BukHFeQLb72BKgNTQGsX4Vy7OrmFWQWm/view?usp=sharing gif] || [https://drive.google.com/file/d/1OFSNqhtQmbXS-ZQVMa2-WLETlA3H4ykM/view?usp=sharing png] || [https://drive.google.com/file/d/12Wu0Td_d0zlN8-ODKVA98wU7ZCS7KQWi/view?usp=sharing svg]
+
| Приклади || [https://drive.google.com/file/d/1-jW-vlOxdlrvhYvXD0T34QYKd86oluBl/view?usp=sharing bmp] || [https://drive.google.com/file/d/1HF8--B408H3ZN74eLD2qds5LFeyczT0o/view?usp=sharing jpg] || [https://drive.google.com/file/d/1LiXQ5T_mlROLHCoJQHi9Hq8lnb50lUAy/view?usp=sharing gif] || [https://drive.google.com/file/d/1hZNkMdH9syFIESyijR22Nq-8DfUVUiDt/view?usp=sharing png] || [https://drive.google.com/file/d/1Ly17cFJkHi2sP5WySbldcOT1qIJD7mLX/view?usp=sharing svg]
 
|-
 
|-
| Розмір || 46 МБ || 3 МБ || 5 МБ || 16 МБ || 17 МБ
+
| Розмір || 4.7 МБ || 99 КБ || 728 КБ || 939 КБ || 1.3 МБ
 
|-
 
|-
 
| Стиснення (втрата якості) || відсутня || з втратами || відсутня || відсутня || відсутня
 
| Стиснення (втрата якості) || відсутня || з втратами || відсутня || відсутня || відсутня

Поточна версія на 16:46, 10 червня 2021

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

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

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

Формат bmp

Venice.png

Bitmap-формат (англ. device independent bitmap) - формат файлу зображень растрової графіки, в якому зображення зберігається у вигляді двовимірного масиву пікселів.

У даному форматі можна зберігати тільки одношарові растри. На кожен піксель в різних файлах може приходити різна кількість біт (глибина кольору). Microsoft пропонує бітності 1, 2, 4, 8, 16, 24, 32, 48 і 64. В бітності 8 і нижче він вказується індексом з таблиці кольорів (палітри), а при великих: безпосереднім значенням. Колір же в будь-якому випадку можна задати тільки в колірній моделі RGB, але в бітності 16 і 32 можна отримати відтінки сірого з глибиною до 16 і 32-ох біт відповідно.

У більшості випадків пікселі зберігаються у вигляді відносно простого двовимірного масиву. Для бітності 4 і 8 доступно RLE-кодування, яке може зменшити їх розмір. Формат BMP так само підтримує вбудовування даних у форматах JPEG і PNG. Але останнє скоріше більше призначене не для компактного зберігання, а для обходу обмежень архітектури GDI, яка не передбачає пряму роботу із зображеннями форматів відмінних від BMP.

У даному форматі можна зберігати тільки одношарові растри. На кожен піксель в різних файлах може приходити різна кількість біт (глибина кольору). Microsoft пропонує бітності 1, 2, 4, 8, 16, 24, 32, 48 і 64. В бітності 8 і нижче він вказується індексом з таблиці кольорів (палітри), а при великих: безпосереднім значенням. Колір же в будь-якому випадку можна задати тільки в колірній моделі RGB, але в бітності 16 і 32 можна отримати відтінки сірого з глибиною до 16 і 32-ох біт відповідно. Часткова прозорість реалізована альфа-каналом різних бітностей, але при цьому прозорість без градацій можна побічно отримати RLE-кодуванням.

Формат jpg

BMP

JPEG (Joint Photographic Experts Group) — растровий формат збереження графічної інформації, що використовує стиснення з втратами. При необхідності дуже сильного стиснення втрати можуть бути переглянуті за допомогою модуля Matrixmuster (матричний зразок, матричний малюнок). Втрати і спотворення інформації через ступінь стиснення можуть проявлятися вже в призначених для користувача програмах. Допустимий рівень стиснення залежить від характеру зображення та перебуває, як правило, в межах 1:10.

З прикладної точки зору JPEG оптимальний для зображень з великою кількістю кольорів, наприклад, для фотографій. У Інтернеті формат JPEG застосовується для відображення напівтонових ілюстрацій та графічної інформації з плавним переходом тонів. Формат JPEG, на відміну від GIF і PNG, не підтримує ні анімацію, ні прозорість. Область застосування формату досить вузька — розповсюдження високоякісної напівтонової графіки в Інтернеті. Формат підтримується практично всіма сучасними графічними програмами та веб-браузерами. Найбільша роздільна здатність, яку підтримує формат JPEG/JFIF є 65535×65535. До недоліків відносять відсутність підтримки регулювання прозорості. Чим менше розмір файлу, тим вище значення ступеня його стиснення. Об'єднана група експертів, на стадії формування таких зображень, оголосила про те, що JPG формат і JPEG є повністю рівнозначними, їх різниця полягає лише в одній букві. Варто відзначити, що .jfif і .jpe так само відносяться до описуваного розширенню.

Відкрити файл .jpg можна за допомогою різноманітного програмного забезпечення в рамках різних операційних систем. Існує безліч програм для перегляду зображень, як штатного виробництва, так і випущеного сторонніми розробниками і іменитими виробниками. Виділяють такі утиліти як Adobe Photoshop, Paint, Corel PaintShop та інші. Тип файлу можна конвертувати в інші популярні формати.

Формат gif

Venice.gif

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

Зображення у форматі GIF зберігається порядково, підтримується тільки формат з індексованою палітрою кольорів, яка може містити до 256 кольорів із 24-бітного діапазону RGB, хоча спочатку формат розроблявся тільки для підтримки 256-кольорової (8-бітної) палітри.

Один з кольорів у палітрі може бути оголошений «прозорим». У цьому випадку в програмах, які підтримують прозорість GIF (наприклад, більшість сучасних браузерів) крізь пікселі, зафарбовані «прозорим» кольором, буде видно фон. «Напівпрозорість» пікселів (технологія альфа-каналу) не підтримується.

GIF спочатку використовував пропрієтарні алгоритми, проте термін дії патентів на них закінчився. У США патент на алгоритм стиснення LZW, що використовується в GIF (патент № 4 558 302) минув 20 червня 2003 року. Термін дії канадського патенту завершився 7 липня 2004. Дія патенту для Великої Британії, Франції, Німеччини та Італії завершилася 18 червня 2004 року, а для Японії — 20 червня 2004 року.


Формат png

Venice.png

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

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

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

Різниця JPG та PNG

Фотографії та зображення з великою кількістю кольорів найкраще зберігати в JPEG. Але варто пам'ятати, що алгоритми компресії JPEG стискає зображення з втратою якості.
Іконки, схеми, картинки з великою кількістю тексту і зображення з прозорістю оптимальніше зберігати в PNG 24. Алгоритми компресії PNG 24 стискає зображення без втрати якості.

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

Векторне зображення

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

  • Акронім: Scalable Vector Graphics.
  • Тип зображення: векторний.
  • Тип стиснення: зазвичай не стискається, але може бути стиснутий без втрат.






Особливості формату svg:

  • розмір SVG-файлу не залежить від розміру або кольору. На вагу впливає складність точок і ліній, з яких складається зображення;
  • під час зміни масштабу зображення не втрачає інформацію, тому замінює собою кілька варіантів растрових файлів для різних дозволів екрану;
  • підходить для друку та індексації пошуковими системами;
  • може бути вбудований в html-код сайту, а значить, кешируєтся разом з ним і завантажується швидше, ніж зображення в .png або .jpeg.


Підсумок

Растрове зображення:

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

Мінуси: втрата якості при збільшенні: картинка розсипається в кольорові квадратики - пікселі; у великій якості займає дуже багато місця.

Сфера застосування: обробка фотографій, створення макетів сайтів, створення графічних об'єктів з великою колірною гамою.

Векторне зображення:

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

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

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

Порівняльна таблиця

BMP JPG GIF PNG SVG
Приклади bmp jpg gif png svg
Розмір 4.7 МБ 99 КБ 728 КБ 939 КБ 1.3 МБ
Стиснення (втрата якості) відсутня з втратами відсутня відсутня відсутня
Кольори Змінна величина 16 мільйонів 256 16 мільйонів + прозорість 16 мільйонів + прозорість
Використання Растрові зображення Статичні зображення, фото,
зображення з складними
кольорами та динамікою
Проста анімація, маленькі іконки,
графіка с низькою варіацією пікселей
Веб-графіка з прозорістю,складні фото з багатьмакольорами та графікою,
зображення, які потрібно повторно редагувати та експортувати
Логотипи та графіка в веб-дизайні