Відмінності між версіями «ОЗМ 2-3 Міхав»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(Створена сторінка: == BMP ==)
 
(→‎Порівняння форматів)
 
(не показані 32 проміжні версії цього учасника)
Рядок 1: Рядок 1:
 
== BMP ==
 
== BMP ==
 +
 +
BMP-файл має структуру, представлену в таблиці. Розширений Windows95 BMP Header можна проігнорувати, оскільки майже всі програми генерують звичайний Windows 3.11 BMP Header. Рядки зображення у файлі мають бути кратними 4-ом. Наприклад якщо ширина картинки = 121 Pixel, то під час запису в файл кожному рядку необхідно добавити ще 3 нульових байта.
 +
 +
Для імені файлу, представленого в BMP-форматі, частіше за все використовується розширенняBMP, хоча деякі файли мають розширення RLE, що означає run length encoding (кодування довжини серій). Розширення RLE імені файла зазвичай вказує на те, що було здійснене стиснення за допомогою алгоритму RLE.
 +
 +
Значення пікселів зберігаються у порядку їх розташування зліва направо, починаючи (як правило) з нижнього рядка зображення. Таким чином, у BMP-файлі перший байт даних растрового масива - це індекс для кольору пікселя, що знаходиться в нижньому лівому кутку зображення.
 +
 +
BMP з глибиною 16 і 24 біт/піксель не мають таблиць кольорів; в цих файлах значення пікселів растрового масива безпосередньо характеризують значення кольорів RGB. Також можуть відрізнятись внутрішні формати збереження окремих розділів файла. Наприклад, інформація растрового масива в деяких 16 и 256-кольорових BMP-файлах може стискатись за допомогою алгоритму RLE, який заміняє послідовності ідентичних пікселів зображення на лексеми, що визначають число пікселів у послідовності та їх колір.
 +
{| class="wikitable"
 +
! Offset
 +
! Bytes
 +
! Name
 +
! Опис
 +
|-
 +
| 00h
 +
| 2
 +
| bfType
 +
| BMP сигнатура ("BM")
 +
|-
 +
| 02h
 +
| 4
 +
| bfSize
 +
| Розмір файла в байтах
 +
|-
 +
| 06h
 +
| 2
 +
|
 +
| Зарезервовано, має бути 0
 +
|-
 +
| 08h
 +
| 2
 +
|
 +
| Зарезервовано, має бути 0
 +
|-
 +
| 0Ah
 +
| 4
 +
| bfOffs
 +
| Зміщення області даних
 +
|-
 +
! colspan="4" style="text-align: center;" | Розширений Header Windows 3.x
 +
|-
 +
| 0Eh
 +
| 4
 +
| biSize
 +
| Довжина
 +
|-
 +
| 12h
 +
| 4
 +
| biWidth
 +
| Ширина Bitmap-а в пікселях
 +
|-
 +
| 16h
 +
| 4
 +
| biHeight
 +
| Висота Bitmap-а в пікселях
 +
|-
 +
| 1Ah
 +
| 2
 +
| BiPlanes
 +
| Кольорові площини (має бути 1)
 +
|-
 +
| 1Ch
 +
| 2
 +
| BiBit
 +
| Кількість біт на піксель
 +
|-
 +
| 1Eh
 +
| 4
 +
| biCompr
 +
| Тип стиснення (0 - не стиснено )
 +
|-
 +
| 22h
 +
| 4
 +
| biSizeIm
 +
| Розмір зображення в байтах
 +
|-
 +
| 26h
 +
| 4
 +
| BiXPels/m
 +
| Горизонтальна роздільна здатність в DPI
 +
|-
 +
| 2Ah
 +
| 4
 +
| BiYPels/m
 +
| Вертикальна роздільна здатність в DPI
 +
|-
 +
| 2Eh
 +
| 4
 +
| biClrUsed
 +
| Кількість використаних кольорів
 +
|-
 +
| 32h
 +
| 4
 +
| BiClrImp.
 +
| Кількість важливих кольорів RGB_QUAD
 +
|-
 +
| 36h
 +
| N*4
 +
|
 +
| Визначення для n кольорів з :
 +
|-
 +
| rowspan="4" colspan="2" |
 +
| RgbBlue
 +
| 1 Byte частка блакитного
 +
|-
 +
| RgbGreen
 +
| 1 Byte частка зеленого
 +
|-
 +
| RgbRed
 +
| 1 Byte частка червоного
 +
|-
 +
| RgbRes
 +
| 1 Byte зарезервовано
 +
|-
 +
! colspan="4" style="text-align: center;" | Розширений Header Windows 95
 +
|-
 +
| 0Eh
 +
| 4
 +
|
 +
| Довжина заголовка в байтах
 +
|-
 +
| 12h
 +
| 4
 +
|
 +
| Ширина Bitmap-а в пікселях
 +
|-
 +
| 16h
 +
| 4
 +
|
 +
| Висота Bitmap-а в пікселях
 +
|-
 +
| 1Ah
 +
| 2
 +
|
 +
| Кольорові площини (має бути 1 )
 +
|-
 +
| 1Ch
 +
| 2
 +
|
 +
| Кількість бітів на піксель
 +
|-
 +
| 1Eh
 +
| 4
 +
|
 +
| Тип стиснення (0 - не стиснено )
 +
|-
 +
| 22h
 +
| 4
 +
|
 +
| Розмір зображення в байтах
 +
|-
 +
| 26h
 +
| 4
 +
|
 +
| Горизонтальна роздільна здатність в DPI
 +
|-
 +
| 2Ah
 +
| 4
 +
|
 +
| Вертикальна роздільна здатність в DPI
 +
|-
 +
| 2Eh
 +
| 4
 +
|
 +
| Кількість використаних кольорів
 +
|-
 +
| 32h
 +
| 4
 +
|
 +
| Кількість важливих кольорів
 +
|-
 +
! colspan="4" style="text-align: center;" | додаткові 4-поля BMP
 +
|-
 +
| 36h
 +
| 4
 +
|
 +
| Маска червоних частин кольору
 +
|-
 +
| 3Ah
 +
| 4
 +
|
 +
| Маска зелених частин кольору
 +
|-
 +
| 3Eh
 +
| 4
 +
|
 +
| Маска блакитних частин кольору
 +
|-
 +
| 42h
 +
| 4
 +
|
 +
| Маска альфа каналу
 +
|-
 +
| 46h
 +
| 4
 +
|
 +
| Color Space Type
 +
|-
 +
| 4Ah
 +
| 4
 +
|
 +
| X-координата червоного CIE-кінця
 +
|-
 +
| 4Eh
 +
| 4
 +
|
 +
| Y-координата червоного CIE-кінця
 +
|-
 +
| 52h
 +
| 4
 +
|
 +
| Z-координата червоного CIE-кінця
 +
|-
 +
| 56h
 +
| 4
 +
|
 +
| X-координата зеленого CIE-кінця
 +
|-
 +
| 5Ah
 +
| 4
 +
|
 +
| Y-координата зеленого CIE-кінця
 +
|-
 +
| 5Eh
 +
| 4
 +
|
 +
| Z-координата зеленого CIE-кінця
 +
|-
 +
| 62h
 +
| 4
 +
|
 +
| X-координата блакитного CIE-кінця
 +
|-
 +
| 66h
 +
| 4
 +
|
 +
| Y-координата блакитного CIE-кінця
 +
|-
 +
| 5Eh
 +
| 4
 +
|
 +
| Z-координата блакитного CIE-кінця
 +
|-
 +
| 62h
 +
| 4
 +
|
 +
| Гамма червоної координати
 +
|-
 +
| 66h
 +
| 4
 +
|
 +
| Гамма зеленої координати
 +
|-
 +
| 6Ah
 +
| 4
 +
|
 +
| Гамма блакитної координати
 +
|-
 +
! colspan="4" style="text-align: center;" | Власне дані растрового масива
 +
|}
 +
 +
== JPEG ==
 +
'''Алгоритм стиснення у форматі'''
 +
#Зазвичай зображення перетворюється з кольоровго простору RGB в [https://ru.wikipedia.org/wiki/YCbCr YCbCr].
 +
#Часто канали Cb и Cr проріджують, тобто блоку пикселів надається усереднене значення.
 +
#Значення каналів розбиваються на блоки 8x8 (всі бачили квадратики на занадто стисненому зображенні).
 +
#Кожний блок піддається дискретно-косинусному перетворенню, що є різновидом дискретного перетворення Фур'є. Отримаємо матрицю коефіцієнтів 8x8. При чому лівий верхній коефіцієнт називається DC-коефіцієнтом (він найважливіший і є усередненим значенням всіх значень), а інші 63 — AC-коефіцієнтами.
 +
#Отримані коефіцієнти квантуються, тобто кожен домножується на коефіцієнт матриці квантування (кожен кодувальник зазвичай використовує свою матрицю).
 +
#Потім вони кодуються кодами Хаффмана.
 +
 +
 +
'''Структура jpeg файлу'''
 +
 +
[FF D8] — маркер початку. Він завжди знаходиться на початку всіх jpg-файлов.
 +
 +
Далі йдут байти [FF FE]. Це маркер, що означає початок секції з коментарем. Наступні 2 байта — довжина секції (включно з цими 2 байтами). Отже в наступних n-2 — сам коментар.
 +
 +
Після того, як ми вилучили коментар, буде легко зрозуміти, що:
 +
*Файл поділений на сектори, на початку яких знаходяться маркери.
 +
*Маркери мають довжину 2 байта, при чому перший байт [FF].
 +
*Майже всі сектори зберігають свою довжину в наступних 2 байтах після маркера.
 +
 +
 +
''Маркер [FF DB]: DQT — таблица квантування.''
 +
 +
Заголовок секції завжди займає 3 байта, наприклад [00 43 00]. Заголовок складається з:
 +
*[00 43] Довжина: 0x43 = 67 байт
 +
*[0_]    Довжина значень в таблиці: 0 (0 — 1 байт, 1 — 2 байта)
 +
*[_0]    Ідентифікатор таблиці: 0
 +
За допомогою інших 64-х байт потрібно заповнити таблицю 8x8. Значення заповнюються в zigzag order.
 +
 +
 +
''Маркер [FF C0]: SOF0 — Baseline DCT''
 +
 +
Цей маркер называється SOF0, і означає, що зображення закодовано базовим методом. Він дуже поширений.
 +
 +
FF C0 00 11 08 00 10 00 10 03 01 22 00 02 11 01 03 11 01
 +
 +
*[00 11] Довжина: 17 байт.
 +
*[08]    Precision: 8 біт. У базовому методі завжди 8.
 +
*[00 10] Висота зображення: 0x10 = 16
 +
*[00 10] Ширина зображення: 0x10 = 16
 +
*[03]    Кількість компонентів: 3. Найчастіше це Y, Cb, Cr.
 +
 +
Компонент:
 +
*[01] Ідентифікатор: 1
 +
*[2_] Горизонтальне прорідження (H1): 2
 +
*[_2] Вертикальне прорідження (V1): 2
 +
*[00] Ідентифікатор таблиці квантувания: 0
 +
 +
 +
''Маркер [FF C4]: DHT (таблица Хаффмана)''
 +
 +
Ця секція зберігає коди і значення, отримані кодуванням Хаффмана.
 +
 +
FF C4 00 15 00 01 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00 03 02
 +
 +
*[00 15] довжина: 21 байт.
 +
*[0_]    клас: 0 (0 — таблиця DC коефіцієнтів, 1 — таблиця AC коефіцієнтів).
 +
*[_0]    ідентифікатор таблиці: 0
 +
Довжина кода Хаффмана: 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16
 +
 +
Кількість кодів:  [01 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00]
 +
 +
Кількість кодів означає кількість кодів такої довжини. Секция зберігає тільки довжини кодів, а не самі коди. У прикладі є один код довжини 1 і один — довжини 2.
 +
 +
 +
''Маркер [FF DA]: SOS (Start of Scan)''
 +
 +
Байт [DA] в маркере означає — «ТАК! Нарешті ми перейшли безпосередньо до розбору секції закодованого зображення!». Але секції символічно називається SOS.
 +
 +
FF DA 00 0C 03 01 00 02 11 03 11 00 3F 00
 +
 +
*[00 0C] Довжина заголовковох частини (а не всієї секції): 12 байт.
 +
*[03]    Кількість компонентів сканування. У прикладі 3, по одному на Y, Cb, Cr.
 +
 +
Компонент:
 +
*[01] Номер компонента зображення: 1 (Y)
 +
*[0_] Ідентифікатор таблиці Хаффмана для DC коефіцієнтів: 0
 +
*[_0] Ідентифікатор таблиці Хаффмана для AC коефіцієнтів: 0
 +
 +
 +
'''Недоліки формату'''
 +
 +
Стиснення формату jpeg є як головною перевагою, так і його недоліком. Формат JPEG в режиме стиснення з втратами малопридатний для стиснення креслень, текстової та знакової графіки, де різкий контраст між сусідніми пікселями призводить до появи помітних артефактів.
 +
JPEG (як і інші формати стиснення з втратами) не підходить для стиснення зображень при багатоетапній обробці, так як дефекти у зображення будут вноситися щоразу при збереженні проміжних результатів обробки.
 +
 +
На відновлених зображеннях при високих степенях стиснення з'являються характерні артефакти: зображення розсипається на блоки розміром 8x8 пікселів. У стандарті передбачені фільтри для корекції цих артефактів, але на практиці подібні фільтри, не дивлячись на їх высоку ефективність, майже не використовуються.
 +
 +
 +
'''Вдосконалення стандарту JPEG'''
 +
*JPEG 2000 - графичний формат, який замість дискретного косинусного перетворення, що використовується у форматі JPEG, використовує технологію вейвлет-перетворення, що грунтується на представленні сигнала у вигляді суперпозиції базових функцій — хвильових пакетів. Крім того, що отримане зображення має менший розмір, відновлене зображення не містить решітки артефактів.
 +
*JPEG-LS - група експертів в областв фотографвї (Joint Photographic Experts Group) запропонувала стандарт на стиснення без втрат (в якому, правда, передбачений також режим стиснення з обмеженими втратами).
 +
*JPEG XR -  формат кодування і файловий формат для фотографій, розроблений і запатентований корпорацією Microsoft. У порівнянні з JPEG 2000 85 % за меншого розміру файла JPEG XR дає менше артефактів. Але поширюється під закритою ліцензією, через що може використовуватись лише на ОС сімейства Windows.
 +
 +
 +
[https://jpeg.org jpeg.org]
 +
 +
[https://habrahabr.ru/post/102521/ Декодирование JPEG для чайников]
 +
 +
== GIF ==
 +
 +
Основні переваги GIF полягають у широкому поширенні цього формату і його компактності. Але у нього два достатньо серйозних недоліки. Один з них полягає у тому, що у зображеннях, що зберігаються у вигляді GIF-файла, не може бути використано більше 256 кольорів. Другий недолік полягає у тому, що за кожен екземпляр програми, що використовує алгоритм LZW, потрібно було вносити плату компанії CompuServe (до закінчення дії патентів у 2006 році).
 +
 +
Структура файла GIF залежить від версії GIF-специфікації, якій відповідає файл. Зараз застосовуються дві версії, GIF87a і GIF89a. Перша з них простіша. Якщо файл зберігає лише одне зображення, після заголовку зазвичай розташовується загальна таблиця кольорів, що визначає кольори зображення. Якщо у файлі зберігається кілька зображень (формат GIF, аналогічно TIFF, дозволяє в одному файлі кодувати два і більше зображень), то замість загальної таблиці кольорів кожне зображення супроводжується локальною таблицею кольорів.
 +
 +
Файл складається з 13 байт заголовку і додаткових блоків. Перед кожним блоком додаткової інформації йде ідентифікатор. Існує три типи ідентифікаторів:
 +
#000h-07Fh (  0-127) - блоки відображення графіки, крім кінця файла (3Bh)
 +
#080h-0F9h (128-249) - блоки керування
 +
#0FAh-0FFh (250-255) - спеціальні блоки
 +
 +
{| class="wikitable"
 +
! colspan="3" | Заголовок
 +
|-
 +
| Підпис
 +
| 3
 +
| Містить рядок "GIF".
 +
|-
 +
| Версія
 +
| 3
 +
| Містить останні дві цифри року (з 1987 по 2086 ) і літеру в нижньому регістрі (від a до z).
 +
|-
 +
| Ширина
 +
| 2
 +
| Логічна ширина екрана в пікселях.
 +
|-
 +
| Висота
 +
| 2
 +
| Логічна висота екрана в пікселях.
 +
|-
 +
| біти 0-2 - глибина кольору
 +
| 3/8
 +
| Призначені для визначення розміру палітри.
 +
|-
 +
| біт 3 - сортування
 +
| 1/8
 +
| Якщо встановлено, то кольори в палітрі відсортовані від найбільш значимого до найменш значимого. Це допомогає при виведенні зображення на пристрій, що не підтримує його глибину кольору.
 +
|-
 +
| біти 4-6 - глибина кольорової роздільної здатності
 +
| 3/8
 +
| Містить кількість біт на піксель мінус 1.
 +
|-
 +
| біт 7 - палітра
 +
| 1/8
 +
| Якщо цей біт встановлений, то поле "Палітра" наявне.
 +
|-
 +
| Колір фону
 +
| 1
 +
| Індекс кольору для заповнення прозорих ділянок зображення
 +
|-
 +
| Співвідношення ширини до висоти
 +
| 1
 +
| Використовується для розрахунку співвідношення ширини до висоти (aspect ratio) за формулою Aspect Ratio = (Pixel Aspect Ratio + 15)/64. Таким чином забезпечується однакове відображення за різноманітних роздільних здатностей екрана.
 +
|-
 +
| Палітра
 +
| ?
 +
| Містит таблицю кольорів у форматі RGB 24 біта
 +
|-
 +
! colspan="3" | Блок інформації для додатку
 +
|-
 +
| Ідентифікатор блока
 +
| 1
 +
| Містить знак оклику - 21h.
 +
|-
 +
| Тип розширення
 +
| 1
 +
| Містить 0FFh.
 +
|-
 +
| Розмір блока
 +
| 1
 +
| Містить розмір блока від наступного поля до початку даних (11 байт)
 +
|-
 +
| Ідентифікатор додатку
 +
| 8
 +
| Назва додатку для обробки даних в ASCII кодуванні.
 +
|-
 +
| Код идентификации
 +
| 3
 +
| Уникальный идентификатор приложения
 +
|-
 +
! colspan="3" | Блок керування
 +
|-
 +
| Ідентифікатор блока
 +
| 1
 +
| Містить знак оклику - 21h.
 +
|-
 +
| Тип розширення
 +
| 1
 +
| Містить 0F9h
 +
|-
 +
| Размер блока
 +
| 1
 +
| Містить розмір блоку від наступного поля до символа завершення (4 байта)
 +
|-
 +
| бит 0 - прозорість
 +
| 1/8
 +
| Якщо цей біт встановлено, то поле індексу прозорості має сенс
 +
|-
 +
| біт 1 - очікування введення
 +
| 1/8
 +
| Якщо біт встановлено, то додаток має завантажувати наступний кадр за виявлення активності користувача. Але це не відміняє час затримки
 +
|-
 +
| біти 2-4 - Метод переходу
 +
| 3/8
 +
| Визначає дію при зміні кадру.
 +
*0 - Нічого не робити
 +
*1 - Лишити картинку на екрані
 +
*2 - Зафарбувати екран фоновим кольором
 +
*3 - Відновити вміст екрану
 +
|-
 +
| біти 5-7 - ?
 +
| 3/8
 +
| -//-
 +
|-
 +
| Час затримки
 +
| 2
 +
| Містить час в мілісекундах і визначає затримку між кадрами.
 +
|-
 +
| Індекс прозорості
 +
| 1
 +
| Містить індекс кольору, який визначений як прозорий
 +
|-
 +
! colspan="3" | Дескриптор зображення
 +
|-
 +
| Ідентифікатор блоку
 +
| 1
 +
| Містить кому - 2Ch
 +
|-
 +
| X-координата
 +
| 2
 +
| Позиція лівого краю зображення відносно лівої межі екрана в пікселях
 +
|-
 +
| Y-координата
 +
| 2
 +
| Позиція верхнього краю зображення відносно верхньої межі екрана в пікселях
 +
|-
 +
| Ширина
 +
| 2
 +
| Ширина растра в пікселях
 +
|-
 +
| Висота
 +
| 2
 +
| Висота растра в пікселях
 +
|-
 +
| біти 0-2 - локальна глибина кольору
 +
| 3/8
 +
| Призначено для визначення розміру локальної палитри
 +
|-
 +
| біти 3-4 - зарезервовано
 +
| 2/8
 +
| -//-
 +
|-
 +
| біт 5 - сортування
 +
| 1/8
 +
| Якщо цей біт встановлено, то кольори в локальній палітрі відсортовані за спаданням важливості.
 +
|-
 +
| біт 6 - черезрядкове зображення
 +
| 1/8
 +
| Якщо цей біт встановлено, то растр збережений у черезрядковому порядку:
 +
*Кожен 8 рядок починаючи з 0 рядка
 +
*Кожен 8 рядок починаючи з 4 рядка
 +
*Кожен 4 рядок починаючи з 2 рядка
 +
*Кожен 2 рядок починаючи з 1 рядка
 +
|-
 +
| біт 7 - локальна палітра
 +
| 1/8
 +
| Якщо біт встановлено, то локальна палітра наявна
 +
|-
 +
| Локальна палітра
 +
| ?
 +
| Містить таблицю кольорів у форматі RGB 24 біта
 +
|-
 +
| Розмір кореню LZW
 +
| 1
 +
| Містить початковий розмір коду архива мінус 1
 +
|-
 +
! colspan="3" | Текст
 +
|-
 +
| Ідентифікатор блоку
 +
| 1
 +
| Містить знак оклику - 21h
 +
|-
 +
| Тип розширення
 +
| 1
 +
| Містить 1
 +
|-
 +
| Розмір блока
 +
| 1
 +
| Містить розмір блока від наступного поля до початку даних (12 байт)
 +
|-
 +
| X-координата
 +
| 2
 +
| Розташування лівого краю текстового рядка відносно лівої межі екрану в пікселях
 +
|-
 +
| Y-координата
 +
| 2
 +
| Розташування верхнього краю текстового рядка відносно верхньої межі екрану в пікселях
 +
|-
 +
| Ширина
 +
| 2
 +
| Ширина текстового рядка в пікселях
 +
|-
 +
| Висота
 +
| 2
 +
| Висота текстового рядка в пікселях
 +
|-
 +
| Ширина символа
 +
| 1
 +
| Ширина символа в пікселях
 +
|-
 +
| Висота символа
 +
| 1
 +
| Висота символа в пікселях
 +
|-
 +
| Колір тексту
 +
| 1
 +
| Індекс кольору у глобальній палітрі для тексту
 +
|-
 +
| Колір фону
 +
| 1
 +
| Індекс кольору в глобальній палітрі для фону
 +
|}
 +
 +
'''Характеристики анімації'''
 +
*Число повторів анімації - від 1 до 65535, а також нескінченно.
 +
*Час показу одного кадру анімації - від 1/100 секунди до 655 секунд.
 +
*Число кадрів анімації - необмежено.
 +
 +
Хоч формат і має обмеження в 256 кольорів, на зображенні їх може бути значно більше. Для цього зображення розбивають на дрібніші фрагменти, кожен з яких містить в собі не більше 256 кольорів. Завдяки цьому сумарна кількість доступних кольорів значно зростає.
 +
 +
[http://home.onego.ru/~chiezo/gif.htm Короткий опис формату GIF]
 +
 +
== PNG ==
 +
 +
Растровий графічний формат PNG, з'явився у 1995 році як заміна GIF (і, частково, TIFF).
 +
 +
'''Переваги формату'''
 +
 +
*повноцінна підтримка alpha-transparency – прозорості. Дає можливість зробити зображення прозорими та частково прозорими.
 +
*Якісний алгоритм стиснення без втрати якості. Схожий на LZW, але дещо ефективніший.
 +
*Можливість черезрядкової розгортки, при чому (на відміну від GIF) як по вертикалі, так і по горизонталі одночасно.
 +
*Вбудована гамма-корекція. Дає можливість прикріпити до зображення налаштування його відображення, щоб на різних моніторах зображення відображалось так само, як і у автора.
 +
 +
 +
'''Недоліки формату'''
 +
 +
*стиснення не може застосовуватися до частини рядка/стовпця. Тому велике зображення, збережене одним файлом, може займати значно більше місця, ніж це ж зображення, попередньо розбите на кілька частин і збережене в різних файлах.
 +
*APNG не підтримує палітри для різних кадрів, тому анімація в GIF може займати значно менше місця
 +
 +
Існує 3 версії формату з глибиною кольору 16, 24 та 48 біт. PNG-8 схожий на GIF – використовує індексні кольори, PNG-24 ближче до JPEG – має повнокольорову палітру.
 +
 +
[[Файл:86467e3b4f83d8ab1f56b3cfcc2aa924.png|thumb|Якщо у вас рушій Presto (Opera 15-) чи Gecko (Firefox), Ви побачите анімацію]]
 +
 +
Практика показувє, що прості невеликі зображення GIF стискає краще. Але коли йдеться мова про великі зображення, GIF все ж лишається позаду.
 +
PNG не може відображати анімацію, тож для компенсації цього недоліку було розроблено формати MNG у 1999 та APNG у 2004 роках, хоча обидва так у не набули популярності.
 +
 +
Якщо прозорість нам не потрібна, PNG зазвичай програє JPEG-у. Проте результати значно залежать від самого зображення: PNG краще стискає градієнти і однотонні ділянки, але для фотографій краще стиснення дає JPEG.
 +
 +
 +
'''Структура файлу'''
 +
 +
Файл зображення складається з сигнатури та чанків (Chunks).
 +
 +
Заголовок має наступну структуру:
 +
{|class=wikitable
 +
! style="text-align:left; background:#def;"|Значення
 +
! style="text-align:left; background:#def;"|Пояснення
 +
|-
 +
|<code>89</code>
 +
|non-ASCII символ. Не дає розпізнати PNG як текстовий файл, і навпаки.
 +
|-
 +
|<code>50&nbsp;4E&nbsp;47</code>
 +
|слово ''PNG'' в ASCII записі.
 +
|-
 +
|<code>0D 0A</code>
 +
|DOS-style переведення рядка (CRLF).
 +
|-
 +
|<code>1A</code>
 +
|символ EOF
 +
|-
 +
|<code>0A</code>
 +
|UNIX-style переведення рядка (LF).
 +
|}
 +
 +
Структура чанка:
 +
{|class=wikitable
 +
! style="text-align:left; background:#def;"|Поле
 +
! style="text-align:left; background:#def;"|Розмір, байт
 +
|-
 +
|Довжина
 +
|4
 +
|-
 +
|Тип
 +
|4
 +
|-
 +
|Вміст
 +
|lenght
 +
|-
 +
|CRC
 +
|4
 +
|}
 +
Тип чанка - це 4 регістрозалежні символи. Позиція символу визначає тип параметру, регістр - його значення.
 +
{|class=wikitable
 +
! style="text-align:left; background:#def;"|Параметр
 +
! style="text-align:left; background:#def;"|Нижній регістр
 +
! style="text-align:left; background:#def;"|Верхній регістр
 +
|-
 +
|1. Важливість
 +
|Допоміжний
 +
|Критичний (якщо декодер не може розпізнати критичний чанк, він має завершити роботу з помилкою)
 +
|-
 +
|2. Публічність
 +
|Приватний (не задокументований)
 +
|Публічний (офіційний, задокументований, розпізнається більшістю декодерів)
 +
|-
 +
|3. Версія стандарту
 +
|Не визначено (обробляється як нерозпізнаний)
 +
|Версія 1.0/1.1
 +
|-
 +
|4. Можливість копіювання нерозпізнаного чанку
 +
|Копіюється завжди
 +
|Копієються лише якщо не змінено критичні чанки
 +
|}
 +
 +
Критичні чанки
 +
*IHDR — заголовок файла, містить основну інформацію про зображення. Має бути після заголовку.
 +
*PLTE — палітра, список кольорів.
 +
*IDAT — містить зображення. Кількість таких чанків ≥ 1
 +
*IEND — фіналізуючий чанк, має бути останнім в файлі.
 +
 +
Допоміжні чанки
 +
*bKGD — задає основний фоновий колір.
 +
*cHRM — задає CIE 1931 кольоровий прострір.
 +
*gAMA — визначає гамму.
 +
*hIST — гістограма.
 +
*iCCP — кольоровий профіль ICC
 +
*iTXt — текст в UTF-8, можливо стиснений, з необов'язковою часовою міткою. iTXt чанк з ключовим словом 'XML:com.adobe.xmp' може містити Extensible Metadata Platform (XMP).
 +
*pHYs — очікуваний розмір пікселя і/або співвідношення сторін зображення.
 +
*sBIT (significant bits) — визначає «кольорову точність» (color-accuracy) зображення для простішого декодування.
 +
*sPLT — палітра для використання, якщо повний спектр кольорів недоступний.
 +
*sRGB — свідчить про використання стандартної sRGB схеми.
 +
*sTER — індикатор стереоскопічних зображень.
 +
*tEXt — може містити текст в ISO/IEC 8859-1 форматі, з одною name=value парою для кожного чанка.
 +
*tIME — зберігає дату останньої зміни зображення.
 +
*tRNS — містить інформацію про прозорість.
 +
*zTXt — стиснений текст, з тими ж обмеженнями, що і tEXt.
 +
 +
Блок даних в IHDR містить наступні поля:
 +
*Ширина, 4 байта
 +
*Висота, 4 байта
 +
*Бітова глибина (bit depth), визначає кількість біт на кожен семпл (не піксель), 1 байт
 +
*Тип кольору, складається з 3 прапорців: 1 (використовується палітра), 2 (використовується колір, не монохромне зображення), і 4 (є альфа-канал), 1 байт
 +
*Метод стиснення. На даний момент доступне тілько значення 0 — стиснення за алгоритмом deflate. 1 байт
 +
*Метод фільтрації. На даний момент може бути тільки нулем. 1 байт
 +
*Interlace метод. Визначає порядок передачі даних. На даний момент доступно 2 значення: 0 (no interlace) і 1 (Adam7 interlace (поступове покращення якості зображення)). 1 байт
 +
 +
Блок IEND сигналізує про кінець файла. Він не містить даних.
 +
 +
[https://www.artlebedev.ru/tools/technogrette/img/png-1/ Про PNG. Частина перша]
 +
 +
[https://www.artlebedev.ru/tools/technogrette/img/png-2/ Про PNG. Частина друга]
 +
 +
[https://www.artlebedev.ru/tools/technogrette/img/png-3/ Про PNG. Частина третя]
 +
 +
[https://www.artlebedev.ru/tools/technogrette/img/png-4/ Про PNG. Частина четверта]
 +
 +
== SVG ==
 +
SVG - Scalable Vector Graphic (масштабована векторна графіка) широко застосовується в поліграфії. Для веб-сайтів існує SVG, яка згідно з офіційною специфікацією на w3.org - мова для опису двовимірної графіки в XML. SVG включає в себе три типа об'єктів: фігури, зображення і текст. SVG існує з 1999 года, а з 16 серпня 2011 включена в рекомендації W3C.
 +
 +
SVG підтримується майже усіма сучасними браузерами, за виключенням Internet Explorer 8 і нижче.
 +
 +
За допомогою тега svg можна малювати прості об'єкти у SVG: прямокутник, коло, лінію, еліпс, ламану лінію або багатокутник.
 +
 +
'''Переваги SVG'''
 +
*Масштабування: на відміну від растрової графіки, SVG не втрачає якість при масштабуванні, тому її зручно використовувати для розробки під retina (загальна маркетингова назва РК-дисплеїв, що використовуються у пристроях Apple і мають настольки высоку щільність пікселів, що людське око не може помітити, що зображення складаєтьяс з них).
 +
*Зменшення HTTP-запитів: за застосування SVG скорочується кількість звернень до серверу, відповідно збільшується швидкість завантаження сайту.
 +
*Стилізація: за допомогою CSS можна змінювати параметри графіки на сайті, наприклад фон, прозорість або межі.
 +
*Анімація і редагування: SVG можна анимувати за допомогою SMIL (Synchronized Multimedia Integration Language) або javascript, а також редагувати в текстовому або графічному редакторі (InkScape чи Adobe Illustrator).
 +
*Малий розмір: об'єкти SVG займають значно менше місця, ніж растрові зображення.
 +
*Компресія: оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в gzip, а отриманому архіву зазвичай надають розширення «SVGZ». SVG добре стискається, оскільки це текстовий XML-документ, що має регулярну структуру.
 +
*Відкритість: SVG — відкритий стандарт. На відміну від деяких інших форматів, SVG не є чиєюсь власністю.
 +
*Індексація: текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексуються пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів.
 +
 +
'''Недоліки SVG'''
 +
*Складність використання у великих картографічних додатках через те, що для правильного відображення маленької частини зображення документ потрібно прочитати повністю.
 +
*Чи більше в зображенні дрібних деталей, тем швидше зростає розмір SVG-данных. Крайній випадок — коли зображення - це білий шум. На практиці, SVG стає невигідним уже задовго до того, як зображення дійде до стадії білого шуму.
 +
 +
 +
[http://y3x.ru/sandbox/halloween/halloween.svg Приклад SVG з використанням анімації]
 +
 +
[https://www.w3.org/TR/SVG11/shapes.html Офіційна специфікація]
 +
 +
== Порівняння форматів ==
 +
{| class="wikitable"
 +
! Формат
 +
! Макс. число біт/піксель
 +
! Макс. число кольорів
 +
! Макс. розмір зображення, піксель
 +
! Методи стиснення
 +
! Кодуванння кількох зображень
 +
|-
 +
| BMP
 +
| 24
 +
| 16 777 216
 +
| 65 535 x 65 535
 +
| RLE*
 +
| -
 +
|-
 +
| JPEG
 +
| 24
 +
| 16 777 216
 +
| 65 535 x 65 535
 +
| JPEG
 +
| -
 +
|-
 +
| GIF
 +
| 8
 +
| 256
 +
| 65 535 x 65 535
 +
| LZW
 +
| +
 +
|-
 +
| PNG
 +
| 48
 +
| 281 474 976 710 656
 +
| 2 147 483 647 x 2 147 483 647
 +
| Deflation (варіант LZ77)
 +
| -
 +
|}
 +
 +
''Примітка:'' потенційно у будь-якому растровому форматі зображення можна зберігати кілька зображень в одному файлі, використавши, наприклад, RAR-архів. Оскільки початок архіву знаходиться за сигнатурою, його можна дописати після першого зображення. Таким чином отримаємо "фотоальбом" з обкладинкою, який можна розпакувати.
 +
 +
[https://drive.google.com/folderview?id=0B81G-cl_-qjqc0xzZEcwYjQxZ2s&usp=sharing Збережені зображення]
 +
 +
[[Файл:1455751510_media-flash.png|right|250px|alt=Зображення, що тестувалось]]
 +
{| class="wikitable"
 +
! Формат
 +
! Біт на точку / якість
 +
! Розмір, KiB
 +
|-
 +
| rowspan="2" | BMP
 +
| 8
 +
| 257
 +
|-
 +
| 24
 +
| 768
 +
|-
 +
| GIF
 +
| 8
 +
| 31
 +
|-
 +
| rowspan="4" | JPEG
 +
| 20
 +
| 11
 +
|-
 +
| 40
 +
| 14,8
 +
|-
 +
| 70
 +
| 19
 +
|-
 +
| 90
 +
| 29
 +
|-
 +
| rowspan="3" | PNG
 +
| 8
 +
| 22
 +
|-
 +
| 24
 +
| 43
 +
|-
 +
| 32
 +
| 46
 +
|-
 +
| SVG
 +
| -
 +
| 19
 +
|}

Поточна версія на 13:17, 3 березня 2016

BMP

BMP-файл має структуру, представлену в таблиці. Розширений Windows95 BMP Header можна проігнорувати, оскільки майже всі програми генерують звичайний Windows 3.11 BMP Header. Рядки зображення у файлі мають бути кратними 4-ом. Наприклад якщо ширина картинки = 121 Pixel, то під час запису в файл кожному рядку необхідно добавити ще 3 нульових байта.

Для імені файлу, представленого в BMP-форматі, частіше за все використовується розширенняBMP, хоча деякі файли мають розширення RLE, що означає run length encoding (кодування довжини серій). Розширення RLE імені файла зазвичай вказує на те, що було здійснене стиснення за допомогою алгоритму RLE.

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

BMP з глибиною 16 і 24 біт/піксель не мають таблиць кольорів; в цих файлах значення пікселів растрового масива безпосередньо характеризують значення кольорів RGB. Також можуть відрізнятись внутрішні формати збереження окремих розділів файла. Наприклад, інформація растрового масива в деяких 16 и 256-кольорових BMP-файлах може стискатись за допомогою алгоритму RLE, який заміняє послідовності ідентичних пікселів зображення на лексеми, що визначають число пікселів у послідовності та їх колір.

Offset Bytes Name Опис
00h 2 bfType BMP сигнатура ("BM")
02h 4 bfSize Розмір файла в байтах
06h 2 Зарезервовано, має бути 0
08h 2 Зарезервовано, має бути 0
0Ah 4 bfOffs Зміщення області даних
Розширений Header Windows 3.x
0Eh 4 biSize Довжина
12h 4 biWidth Ширина Bitmap-а в пікселях
16h 4 biHeight Висота Bitmap-а в пікселях
1Ah 2 BiPlanes Кольорові площини (має бути 1)
1Ch 2 BiBit Кількість біт на піксель
1Eh 4 biCompr Тип стиснення (0 - не стиснено )
22h 4 biSizeIm Розмір зображення в байтах
26h 4 BiXPels/m Горизонтальна роздільна здатність в DPI
2Ah 4 BiYPels/m Вертикальна роздільна здатність в DPI
2Eh 4 biClrUsed Кількість використаних кольорів
32h 4 BiClrImp. Кількість важливих кольорів RGB_QUAD
36h N*4 Визначення для n кольорів з :
RgbBlue 1 Byte частка блакитного
RgbGreen 1 Byte частка зеленого
RgbRed 1 Byte частка червоного
RgbRes 1 Byte зарезервовано
Розширений Header Windows 95
0Eh 4 Довжина заголовка в байтах
12h 4 Ширина Bitmap-а в пікселях
16h 4 Висота Bitmap-а в пікселях
1Ah 2 Кольорові площини (має бути 1 )
1Ch 2 Кількість бітів на піксель
1Eh 4 Тип стиснення (0 - не стиснено )
22h 4 Розмір зображення в байтах
26h 4 Горизонтальна роздільна здатність в DPI
2Ah 4 Вертикальна роздільна здатність в DPI
2Eh 4 Кількість використаних кольорів
32h 4 Кількість важливих кольорів
додаткові 4-поля BMP
36h 4 Маска червоних частин кольору
3Ah 4 Маска зелених частин кольору
3Eh 4 Маска блакитних частин кольору
42h 4 Маска альфа каналу
46h 4 Color Space Type
4Ah 4 X-координата червоного CIE-кінця
4Eh 4 Y-координата червоного CIE-кінця
52h 4 Z-координата червоного CIE-кінця
56h 4 X-координата зеленого CIE-кінця
5Ah 4 Y-координата зеленого CIE-кінця
5Eh 4 Z-координата зеленого CIE-кінця
62h 4 X-координата блакитного CIE-кінця
66h 4 Y-координата блакитного CIE-кінця
5Eh 4 Z-координата блакитного CIE-кінця
62h 4 Гамма червоної координати
66h 4 Гамма зеленої координати
6Ah 4 Гамма блакитної координати
Власне дані растрового масива

JPEG

Алгоритм стиснення у форматі

  1. Зазвичай зображення перетворюється з кольоровго простору RGB в YCbCr.
  2. Часто канали Cb и Cr проріджують, тобто блоку пикселів надається усереднене значення.
  3. Значення каналів розбиваються на блоки 8x8 (всі бачили квадратики на занадто стисненому зображенні).
  4. Кожний блок піддається дискретно-косинусному перетворенню, що є різновидом дискретного перетворення Фур'є. Отримаємо матрицю коефіцієнтів 8x8. При чому лівий верхній коефіцієнт називається DC-коефіцієнтом (він найважливіший і є усередненим значенням всіх значень), а інші 63 — AC-коефіцієнтами.
  5. Отримані коефіцієнти квантуються, тобто кожен домножується на коефіцієнт матриці квантування (кожен кодувальник зазвичай використовує свою матрицю).
  6. Потім вони кодуються кодами Хаффмана.


Структура jpeg файлу

[FF D8] — маркер початку. Він завжди знаходиться на початку всіх jpg-файлов.

Далі йдут байти [FF FE]. Це маркер, що означає початок секції з коментарем. Наступні 2 байта — довжина секції (включно з цими 2 байтами). Отже в наступних n-2 — сам коментар.

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

  • Файл поділений на сектори, на початку яких знаходяться маркери.
  • Маркери мають довжину 2 байта, при чому перший байт [FF].
  • Майже всі сектори зберігають свою довжину в наступних 2 байтах після маркера.


Маркер [FF DB]: DQT — таблица квантування.

Заголовок секції завжди займає 3 байта, наприклад [00 43 00]. Заголовок складається з:

  • [00 43] Довжина: 0x43 = 67 байт
  • [0_] Довжина значень в таблиці: 0 (0 — 1 байт, 1 — 2 байта)
  • [_0] Ідентифікатор таблиці: 0

За допомогою інших 64-х байт потрібно заповнити таблицю 8x8. Значення заповнюються в zigzag order.


Маркер [FF C0]: SOF0 — Baseline DCT

Цей маркер называється SOF0, і означає, що зображення закодовано базовим методом. Він дуже поширений.

FF C0 00 11 08 00 10 00 10 03 01 22 00 02 11 01 03 11 01

  • [00 11] Довжина: 17 байт.
  • [08] Precision: 8 біт. У базовому методі завжди 8.
  • [00 10] Висота зображення: 0x10 = 16
  • [00 10] Ширина зображення: 0x10 = 16
  • [03] Кількість компонентів: 3. Найчастіше це Y, Cb, Cr.

Компонент:

  • [01] Ідентифікатор: 1
  • [2_] Горизонтальне прорідження (H1): 2
  • [_2] Вертикальне прорідження (V1): 2
  • [00] Ідентифікатор таблиці квантувания: 0


Маркер [FF C4]: DHT (таблица Хаффмана)

Ця секція зберігає коди і значення, отримані кодуванням Хаффмана.

FF C4 00 15 00 01 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00 03 02

  • [00 15] довжина: 21 байт.
  • [0_] клас: 0 (0 — таблиця DC коефіцієнтів, 1 — таблиця AC коефіцієнтів).
  • [_0] ідентифікатор таблиці: 0

Довжина кода Хаффмана: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Кількість кодів: [01 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00]

Кількість кодів означає кількість кодів такої довжини. Секция зберігає тільки довжини кодів, а не самі коди. У прикладі є один код довжини 1 і один — довжини 2.


Маркер [FF DA]: SOS (Start of Scan)

Байт [DA] в маркере означає — «ТАК! Нарешті ми перейшли безпосередньо до розбору секції закодованого зображення!». Але секції символічно називається SOS.

FF DA 00 0C 03 01 00 02 11 03 11 00 3F 00

  • [00 0C] Довжина заголовковох частини (а не всієї секції): 12 байт.
  • [03] Кількість компонентів сканування. У прикладі 3, по одному на Y, Cb, Cr.

Компонент:

  • [01] Номер компонента зображення: 1 (Y)
  • [0_] Ідентифікатор таблиці Хаффмана для DC коефіцієнтів: 0
  • [_0] Ідентифікатор таблиці Хаффмана для AC коефіцієнтів: 0


Недоліки формату

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

На відновлених зображеннях при високих степенях стиснення з'являються характерні артефакти: зображення розсипається на блоки розміром 8x8 пікселів. У стандарті передбачені фільтри для корекції цих артефактів, але на практиці подібні фільтри, не дивлячись на їх высоку ефективність, майже не використовуються.


Вдосконалення стандарту JPEG

  • JPEG 2000 - графичний формат, який замість дискретного косинусного перетворення, що використовується у форматі JPEG, використовує технологію вейвлет-перетворення, що грунтується на представленні сигнала у вигляді суперпозиції базових функцій — хвильових пакетів. Крім того, що отримане зображення має менший розмір, відновлене зображення не містить решітки артефактів.
  • JPEG-LS - група експертів в областв фотографвї (Joint Photographic Experts Group) запропонувала стандарт на стиснення без втрат (в якому, правда, передбачений також режим стиснення з обмеженими втратами).
  • JPEG XR - формат кодування і файловий формат для фотографій, розроблений і запатентований корпорацією Microsoft. У порівнянні з JPEG 2000 85 % за меншого розміру файла JPEG XR дає менше артефактів. Але поширюється під закритою ліцензією, через що може використовуватись лише на ОС сімейства Windows.


jpeg.org

Декодирование JPEG для чайников

GIF

Основні переваги GIF полягають у широкому поширенні цього формату і його компактності. Але у нього два достатньо серйозних недоліки. Один з них полягає у тому, що у зображеннях, що зберігаються у вигляді GIF-файла, не може бути використано більше 256 кольорів. Другий недолік полягає у тому, що за кожен екземпляр програми, що використовує алгоритм LZW, потрібно було вносити плату компанії CompuServe (до закінчення дії патентів у 2006 році).

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

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

  1. 000h-07Fh ( 0-127) - блоки відображення графіки, крім кінця файла (3Bh)
  2. 080h-0F9h (128-249) - блоки керування
  3. 0FAh-0FFh (250-255) - спеціальні блоки
Заголовок
Підпис 3 Містить рядок "GIF".
Версія 3 Містить останні дві цифри року (з 1987 по 2086 ) і літеру в нижньому регістрі (від a до z).
Ширина 2 Логічна ширина екрана в пікселях.
Висота 2 Логічна висота екрана в пікселях.
біти 0-2 - глибина кольору 3/8 Призначені для визначення розміру палітри.
біт 3 - сортування 1/8 Якщо встановлено, то кольори в палітрі відсортовані від найбільш значимого до найменш значимого. Це допомогає при виведенні зображення на пристрій, що не підтримує його глибину кольору.
біти 4-6 - глибина кольорової роздільної здатності 3/8 Містить кількість біт на піксель мінус 1.
біт 7 - палітра 1/8 Якщо цей біт встановлений, то поле "Палітра" наявне.
Колір фону 1 Індекс кольору для заповнення прозорих ділянок зображення
Співвідношення ширини до висоти 1 Використовується для розрахунку співвідношення ширини до висоти (aspect ratio) за формулою Aspect Ratio = (Pixel Aspect Ratio + 15)/64. Таким чином забезпечується однакове відображення за різноманітних роздільних здатностей екрана.
Палітра  ? Містит таблицю кольорів у форматі RGB 24 біта
Блок інформації для додатку
Ідентифікатор блока 1 Містить знак оклику - 21h.
Тип розширення 1 Містить 0FFh.
Розмір блока 1 Містить розмір блока від наступного поля до початку даних (11 байт)
Ідентифікатор додатку 8 Назва додатку для обробки даних в ASCII кодуванні.
Код идентификации 3 Уникальный идентификатор приложения
Блок керування
Ідентифікатор блока 1 Містить знак оклику - 21h.
Тип розширення 1 Містить 0F9h
Размер блока 1 Містить розмір блоку від наступного поля до символа завершення (4 байта)
бит 0 - прозорість 1/8 Якщо цей біт встановлено, то поле індексу прозорості має сенс
біт 1 - очікування введення 1/8 Якщо біт встановлено, то додаток має завантажувати наступний кадр за виявлення активності користувача. Але це не відміняє час затримки
біти 2-4 - Метод переходу 3/8 Визначає дію при зміні кадру.
  • 0 - Нічого не робити
  • 1 - Лишити картинку на екрані
  • 2 - Зафарбувати екран фоновим кольором
  • 3 - Відновити вміст екрану
біти 5-7 - ? 3/8 -//-
Час затримки 2 Містить час в мілісекундах і визначає затримку між кадрами.
Індекс прозорості 1 Містить індекс кольору, який визначений як прозорий
Дескриптор зображення
Ідентифікатор блоку 1 Містить кому - 2Ch
X-координата 2 Позиція лівого краю зображення відносно лівої межі екрана в пікселях
Y-координата 2 Позиція верхнього краю зображення відносно верхньої межі екрана в пікселях
Ширина 2 Ширина растра в пікселях
Висота 2 Висота растра в пікселях
біти 0-2 - локальна глибина кольору 3/8 Призначено для визначення розміру локальної палитри
біти 3-4 - зарезервовано 2/8 -//-
біт 5 - сортування 1/8 Якщо цей біт встановлено, то кольори в локальній палітрі відсортовані за спаданням важливості.
біт 6 - черезрядкове зображення 1/8 Якщо цей біт встановлено, то растр збережений у черезрядковому порядку:
  • Кожен 8 рядок починаючи з 0 рядка
  • Кожен 8 рядок починаючи з 4 рядка
  • Кожен 4 рядок починаючи з 2 рядка
  • Кожен 2 рядок починаючи з 1 рядка
біт 7 - локальна палітра 1/8 Якщо біт встановлено, то локальна палітра наявна
Локальна палітра  ? Містить таблицю кольорів у форматі RGB 24 біта
Розмір кореню LZW 1 Містить початковий розмір коду архива мінус 1
Текст
Ідентифікатор блоку 1 Містить знак оклику - 21h
Тип розширення 1 Містить 1
Розмір блока 1 Містить розмір блока від наступного поля до початку даних (12 байт)
X-координата 2 Розташування лівого краю текстового рядка відносно лівої межі екрану в пікселях
Y-координата 2 Розташування верхнього краю текстового рядка відносно верхньої межі екрану в пікселях
Ширина 2 Ширина текстового рядка в пікселях
Висота 2 Висота текстового рядка в пікселях
Ширина символа 1 Ширина символа в пікселях
Висота символа 1 Висота символа в пікселях
Колір тексту 1 Індекс кольору у глобальній палітрі для тексту
Колір фону 1 Індекс кольору в глобальній палітрі для фону

Характеристики анімації

  • Число повторів анімації - від 1 до 65535, а також нескінченно.
  • Час показу одного кадру анімації - від 1/100 секунди до 655 секунд.
  • Число кадрів анімації - необмежено.

Хоч формат і має обмеження в 256 кольорів, на зображенні їх може бути значно більше. Для цього зображення розбивають на дрібніші фрагменти, кожен з яких містить в собі не більше 256 кольорів. Завдяки цьому сумарна кількість доступних кольорів значно зростає.

Короткий опис формату GIF

PNG

Растровий графічний формат PNG, з'явився у 1995 році як заміна GIF (і, частково, TIFF).

Переваги формату

  • повноцінна підтримка alpha-transparency – прозорості. Дає можливість зробити зображення прозорими та частково прозорими.
  • Якісний алгоритм стиснення без втрати якості. Схожий на LZW, але дещо ефективніший.
  • Можливість черезрядкової розгортки, при чому (на відміну від GIF) як по вертикалі, так і по горизонталі одночасно.
  • Вбудована гамма-корекція. Дає можливість прикріпити до зображення налаштування його відображення, щоб на різних моніторах зображення відображалось так само, як і у автора.


Недоліки формату

  • стиснення не може застосовуватися до частини рядка/стовпця. Тому велике зображення, збережене одним файлом, може займати значно більше місця, ніж це ж зображення, попередньо розбите на кілька частин і збережене в різних файлах.
  • APNG не підтримує палітри для різних кадрів, тому анімація в GIF може займати значно менше місця

Існує 3 версії формату з глибиною кольору 16, 24 та 48 біт. PNG-8 схожий на GIF – використовує індексні кольори, PNG-24 ближче до JPEG – має повнокольорову палітру.

Якщо у вас рушій Presto (Opera 15-) чи Gecko (Firefox), Ви побачите анімацію

Практика показувє, що прості невеликі зображення GIF стискає краще. Але коли йдеться мова про великі зображення, GIF все ж лишається позаду. PNG не може відображати анімацію, тож для компенсації цього недоліку було розроблено формати MNG у 1999 та APNG у 2004 роках, хоча обидва так у не набули популярності.

Якщо прозорість нам не потрібна, PNG зазвичай програє JPEG-у. Проте результати значно залежать від самого зображення: PNG краще стискає градієнти і однотонні ділянки, але для фотографій краще стиснення дає JPEG.


Структура файлу

Файл зображення складається з сигнатури та чанків (Chunks).

Заголовок має наступну структуру:

Значення Пояснення
89 non-ASCII символ. Не дає розпізнати PNG як текстовий файл, і навпаки.
50 4E 47 слово PNG в ASCII записі.
0D 0A DOS-style переведення рядка (CRLF).
1A символ EOF
0A UNIX-style переведення рядка (LF).

Структура чанка:

Поле Розмір, байт
Довжина 4
Тип 4
Вміст lenght
CRC 4

Тип чанка - це 4 регістрозалежні символи. Позиція символу визначає тип параметру, регістр - його значення.

Параметр Нижній регістр Верхній регістр
1. Важливість Допоміжний Критичний (якщо декодер не може розпізнати критичний чанк, він має завершити роботу з помилкою)
2. Публічність Приватний (не задокументований) Публічний (офіційний, задокументований, розпізнається більшістю декодерів)
3. Версія стандарту Не визначено (обробляється як нерозпізнаний) Версія 1.0/1.1
4. Можливість копіювання нерозпізнаного чанку Копіюється завжди Копієються лише якщо не змінено критичні чанки

Критичні чанки

  • IHDR — заголовок файла, містить основну інформацію про зображення. Має бути після заголовку.
  • PLTE — палітра, список кольорів.
  • IDAT — містить зображення. Кількість таких чанків ≥ 1
  • IEND — фіналізуючий чанк, має бути останнім в файлі.

Допоміжні чанки

  • bKGD — задає основний фоновий колір.
  • cHRM — задає CIE 1931 кольоровий прострір.
  • gAMA — визначає гамму.
  • hIST — гістограма.
  • iCCP — кольоровий профіль ICC
  • iTXt — текст в UTF-8, можливо стиснений, з необов'язковою часовою міткою. iTXt чанк з ключовим словом 'XML:com.adobe.xmp' може містити Extensible Metadata Platform (XMP).
  • pHYs — очікуваний розмір пікселя і/або співвідношення сторін зображення.
  • sBIT (significant bits) — визначає «кольорову точність» (color-accuracy) зображення для простішого декодування.
  • sPLT — палітра для використання, якщо повний спектр кольорів недоступний.
  • sRGB — свідчить про використання стандартної sRGB схеми.
  • sTER — індикатор стереоскопічних зображень.
  • tEXt — може містити текст в ISO/IEC 8859-1 форматі, з одною name=value парою для кожного чанка.
  • tIME — зберігає дату останньої зміни зображення.
  • tRNS — містить інформацію про прозорість.
  • zTXt — стиснений текст, з тими ж обмеженнями, що і tEXt.

Блок даних в IHDR містить наступні поля:

  • Ширина, 4 байта
  • Висота, 4 байта
  • Бітова глибина (bit depth), визначає кількість біт на кожен семпл (не піксель), 1 байт
  • Тип кольору, складається з 3 прапорців: 1 (використовується палітра), 2 (використовується колір, не монохромне зображення), і 4 (є альфа-канал), 1 байт
  • Метод стиснення. На даний момент доступне тілько значення 0 — стиснення за алгоритмом deflate. 1 байт
  • Метод фільтрації. На даний момент може бути тільки нулем. 1 байт
  • Interlace метод. Визначає порядок передачі даних. На даний момент доступно 2 значення: 0 (no interlace) і 1 (Adam7 interlace (поступове покращення якості зображення)). 1 байт

Блок IEND сигналізує про кінець файла. Він не містить даних.

Про PNG. Частина перша

Про PNG. Частина друга

Про PNG. Частина третя

Про PNG. Частина четверта

SVG

SVG - Scalable Vector Graphic (масштабована векторна графіка) широко застосовується в поліграфії. Для веб-сайтів існує SVG, яка згідно з офіційною специфікацією на w3.org - мова для опису двовимірної графіки в XML. SVG включає в себе три типа об'єктів: фігури, зображення і текст. SVG існує з 1999 года, а з 16 серпня 2011 включена в рекомендації W3C.

SVG підтримується майже усіма сучасними браузерами, за виключенням Internet Explorer 8 і нижче.

За допомогою тега svg можна малювати прості об'єкти у SVG: прямокутник, коло, лінію, еліпс, ламану лінію або багатокутник.

Переваги SVG

  • Масштабування: на відміну від растрової графіки, SVG не втрачає якість при масштабуванні, тому її зручно використовувати для розробки під retina (загальна маркетингова назва РК-дисплеїв, що використовуються у пристроях Apple і мають настольки высоку щільність пікселів, що людське око не може помітити, що зображення складаєтьяс з них).
  • Зменшення HTTP-запитів: за застосування SVG скорочується кількість звернень до серверу, відповідно збільшується швидкість завантаження сайту.
  • Стилізація: за допомогою CSS можна змінювати параметри графіки на сайті, наприклад фон, прозорість або межі.
  • Анімація і редагування: SVG можна анимувати за допомогою SMIL (Synchronized Multimedia Integration Language) або javascript, а також редагувати в текстовому або графічному редакторі (InkScape чи Adobe Illustrator).
  • Малий розмір: об'єкти SVG займають значно менше місця, ніж растрові зображення.
  • Компресія: оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в gzip, а отриманому архіву зазвичай надають розширення «SVGZ». SVG добре стискається, оскільки це текстовий XML-документ, що має регулярну структуру.
  • Відкритість: SVG — відкритий стандарт. На відміну від деяких інших форматів, SVG не є чиєюсь власністю.
  • Індексація: текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексуються пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів.

Недоліки SVG

  • Складність використання у великих картографічних додатках через те, що для правильного відображення маленької частини зображення документ потрібно прочитати повністю.
  • Чи більше в зображенні дрібних деталей, тем швидше зростає розмір SVG-данных. Крайній випадок — коли зображення - це білий шум. На практиці, SVG стає невигідним уже задовго до того, як зображення дійде до стадії білого шуму.


Приклад SVG з використанням анімації

Офіційна специфікація

Порівняння форматів

Формат Макс. число біт/піксель Макс. число кольорів Макс. розмір зображення, піксель Методи стиснення Кодуванння кількох зображень
BMP 24 16 777 216 65 535 x 65 535 RLE* -
JPEG 24 16 777 216 65 535 x 65 535 JPEG -
GIF 8 256 65 535 x 65 535 LZW +
PNG 48 281 474 976 710 656 2 147 483 647 x 2 147 483 647 Deflation (варіант LZ77) -

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

Збережені зображення

Зображення, що тестувалось
Формат Біт на точку / якість Розмір, KiB
BMP 8 257
24 768
GIF 8 31
JPEG 20 11
40 14,8
70 19
90 29
PNG 8 22
24 43
32 46
SVG - 19
Отримано з https://wiki.cusu.edu.ua/index.php?title=ОЗМ_2-3_Міхав&oldid=224810