ОЗМ 2-3 Міхав
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 | Гамма блакитної координати | |
| Власне дані растрового масива | |||
JPG
GIF
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) | - |
| Формат | Біт на точку / якість | Розмір, 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 |
