Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



5 Формати графічних файлів для Веб

Скачати 89.44 Kb.

5 Формати графічних файлів для Веб




Скачати 89.44 Kb.
Дата конвертації31.03.2017
Розмір89.44 Kb.

5.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

5.3. Формати графічних файлів для Веб


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

Всі графічні дані в комп'ютері можна розділити на дві великі гілки: растрову і векторну.



Векторні файли представляють математичний опис об'єктів відносно точки початку координат.
Графічний редактор Графічний редактор - прикладна програма (або пакет програм), що дозволяє її користувачеві створювати і редагувати зображення на екрані комп'ютера і зберігати їх в графічних форматах файлів, наприклад, JPEG, PNG, GIF, TIFF.
Приро́дний добі́р (або відбір) - виживання найбільш пристосованих у боротьбі за існування організмів, здатних залишити численне потомство; процес, завдяки якому сприятливі спадкові характеристики стають загальнішими в наступних поколіннях популяції організмів, що розмножуються, а несприятливі спадкові характеристики стають менш загальними.
Початок координат - точка, де осі системи координат перетинаються. Початок координат поділяє кожну вісь системи на дві половини: позитивну та від'ємну.
Наприклад, для того щоб відобразити пряму потрібно вказати координати двох точок, які об'єднаються за коротшим шляхом, для дуги задається радіус тощо. Таким чином, векторне зображення є набом геометричних примітивів.
Ве́кторна гра́фіка (також геометричне моделювання або об'єктно-орієнтована графіка) - створення зображення в комп'ютерній графіці з сукупності геометричних примітивів - (точок, ліній, кривих, полігонів), тобто об'єктів, які можна описати математичними виразами.
Більшість векторних форматів можуть містити в собі втілені у файл растрові об'єкти. Складність при переведенні чи перенесенні даних з одного векторного формату до іншого полягає у використанні в програмах різних алгоритмів, різних математичних формул для побудови векторних примітивів та опису растрових об'єктів.

Растровий файл влаштовано простіше. Він представляє прямокутну матрицю (bitmap), що поділена на піксели.

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

Колірна модель Ко́лірна модель - абстрактна модель опису представлення кольорів у вигляді кортежів (наборів) чисел, зазвичай з трьох або чотирьох значень, званих колірними компонентами або колірними координатами. Разом з методом інтерпретації цих даних (наприклад, визначення умов відтворення та / або перегляду - тобто завдання способу реалізації), множина кольорів колірної моделі визначає колірний простір.

Растрові файли можна поділити на два типи: призначені для виводу на екран і для друку.

Графічні формати, що призначені для Веб

GIF (CompuServe Graphics Interchange Format)


Апаратно незалежний формат GIF було розроблено в 1987 році (GIF87a) фірмою CompuServe для передачі растрових зображень по мережах. У 1989-му формат було модифіковано (GIF89a), до нього було додано підтримка прозорості та анімації.

GIF використовує LZW-компресію, що дозволяє добре стискати файли, в яких багато ділянок з однорідним заповненням (логотипи, написи, схеми).



Метод стиснення LZW (Lempel-Ziv-Welch) розроблено в 1978 році ізраїльтянами Лемпелом і Зівом, і допрацьовано пізніше в США. Принцип стискання полягає у пошуку однакових послідовностей - фрази у всьому файлі. Виявлені послідовності зберігаються в таблиці, їм привласнюються короткі маркери - ключі. Так, якщо в зображенні є набори з рожевого, оранжевого і зеленого пікселів, що повторюються 50 разів, LZW виявляє цей набір, привласнює йому окреме число (наприклад, 7) і зберігає ці дані 50 разів у вигляді числа 7.

Метод LZW ефективно діє на ділянках однорідних, вільних від шуму кольорів, добре стискає довільні графічні дані, але процес кодування і розпаковування відбувається відносно повільно.

GIF дозволяє записувати зображення «через рядок» (Interlaced), завдяки чому, маючи лише частину файлу, можна побачити зображення цілком, але з меншою роздільністю. Це досягається за рахунок завантаження, спочатку 1, 5, 10 і далі рядків, за другим проходом підвантажуються 2, 6, 11 рядки, і згодом зображення набуває початкового вигляду. Черезрядковий запис дещо збільшує розмір файлу, але надає більшої зручності для користувачів.

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

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

Особливості


  • GIF використовує 8-бітовий колір і ефективно стискає суцільні колірні ділянки, при цьому зберігаючи деталі зображення.

  • Кількість кольорів в зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітової палітри.

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

  • GIF підтримує покадрову зміну зображень, що робить формат популярним для створення банерів і простої анімації.

  • Використовує вільний від втрат метод стиснення.

Область застосування


Текст, логотипи, ілюстрації з чіткими краями, анімовані малюнки, зображення з прозорими ділянками, банери.

JPEG (Joint Photographic Experts Group)


Строго кажучи JPEG-ом називається не формат, а алгоритм стиснення, який засновано не на пошуку однакових елементів, як у LZW, а на різниці між пікселами.

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

Ко́лірний про́стір - модель представлення кольору, заснована на використанні колірних координат. Кольорова палітра будується таким чином, щоб будь-який колір був представлений точкою, що має певні координати.

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

На наступному етапі, залежно від обраного рівня якості, відкидається певна частина чисел, що представляють тонкі деталі. На останньому етапі використовується кодування за методом Хафмана для ефективного стиснення кінцевих даних. Відновлення даних відбувається в зворотному порядку.



Метод стиснення Хафмана (Huffman) розроблено в 1952 році і використовується як складова частина в ряді інших схем стиснення, в тому числі і у LZW. В методі Хафмана аналізується набір символів для визначення частоти кожного символу.
Відно́влення да́них (англ. Data recovery) - процес порятунку або відновлення доступу до даних, що зберігаються на будь-якому носії пристрою запам'ятовування, коли вони не можуть бути доступні в звичайному режимі.
Набі́р си́мволів, кодува́ння си́мволів, табли́ця си́мволів (англ. character set, character encoding) - певна таблиця кодування скінченної множини символів. Така таблиця зіставляє кожному символу послідовність довжиною в один або більше байт.
Потім, для символів, що найчастіше зустрічаються, використовується позначення у вигляді мінімальної можливої кількості бітів. Наприклад, найчастіше в англійських текстах зустрічається буква "е". Використовуючи кодування Хафмана можна представити літеру "е" лише двома бітами (1 і 0), замість вісьмох бітів, необхідних для представлення букви "е" в кодуванні ASCII.

Таким чином, чим вище рівень компресії, тим більше даних відкидається, тим нижчою є якість. Використовуючи JPEG можна отримати файл в 2-500 разів менше, ніж ВМР.

Формат JPEG є апаратно незалежним, повністю підтримується на РС і Macintosh. JPEG не підтримує індексовані палітри кольорів.

JPEG-ом краще стискаються растрові картинки фотографічної якості, ніж логотипи або схеми - в них більше півтонових переходів, в той час серед однотонних заливок з'являються небажані переходи.

Краще і з меншими втратами стискаються великі зображення для Веб з високою роздільністю (200-300 dpi і більше), ніж з низькою (72-150 dpi), оскільки в кожному квадраті 8х8 пікселів переходи виходять м'якшими, за рахунок того, що таких квадратів є більше.

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

Даний формат називають стисненням з втратами, оскільки алгоритм JPEG вибірково відкидає дані.

Формат JPEG не підтримує прозорість і при збереженні зображення з прозорими ділянками, вони зафарбовуються в певний колір.


Особливості


  • В зображенні може бути понад 16 мільйонів кольорів, що цілком достатньо для збереження фотографічної якості зображення.

  • Основною характеристикою формату є якість, яка визначає кінцевий розмір файлу. Слід пам’ятати, що формат застосовує стиснення з втратами. Чим вище стиснення, тим менше якість і навпаки.

  • Підтримка технології прогресивного JPEG. Тоді, спочатку у вікні перегляду з'являється версія малюнка з низькою роздільністю, яка поступово набуває початкового вигляду при повному завантаженні самого зображення.

Область застосування


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

PNG (Portable Network Graphics)


PNG – Інтернет формат, який долає обмеження GIF. Використовує стиснення без втрат Deflate, подібне до LZW. Стиснуті індексовані файли PNG, зазвичай, є меншими за аналогічні GIF.

Глибина кольору може бути любою, до 48 біт. Використовується двовимірний interlacing (не лише рядків, але і стовпців), що, подібно до GIF, дещо збільшує розмір файлу. На відміну від GIF, де застосовується 100% прозорість, PNG підтримує також напівпрозорі піксели (в діапазоні прозорості від 0 до 99%) за рахунок Альфа-каналу з 256 градаціями сірого.

У файл формату PNG записується інформація про гамму. Гамма є певним числом, що характеризує залежність яскравості світіння екрану монітора від напруги на електродах кінескопа. Це число обчислюється з файлу і дозволяє вводити поправку яскравості при відображенні. Воно потрібне для однакового відображення інформації незалежно від апаратної платформи комп’ютера. PNG підтримується у всіх сучасних браузерах.

PNG-8


PNG-8 — формат, що діє аналогічно до GIF і має покращений формат стиснення даних.
Сти́снення да́них (англ. data compression) - це процедура перекодування даних, яка проводиться з метою зменшення їхнього обсягу, розміру, об'єму.

Особливості


  • Використовує 8-бітову палітру (256 кольорів) в зображенні, за що і отримав в своїй назві цифру вісім. При цьому можна вибирати, скільки кольорів буде задіяно у файлі — від 2 до 256.

  • На відміну від GIF, не відображає анімацію.

Область застосування


Текст, логотипи, ілюстрації з чіткими краями, зображення з градієнтною прозорістю.

PNG-24


PNG-24 — формат, аналогічний до PNG-8, але що використовує 24-бітову палітру кольору Подібно до формату JPEG, зберігає яскравість і відтінки кольорів у фотографіях. Подібно до форматів GIF і PNG-8, зберігає деталі зображення, як, наприклад, в лінійних малюнках, логотипах, або ілюстраціях.

Особливості


  • Використовує понад 16 млн. кольорів, тому, застосовується для повнокольорових зображень.

  • Підтримує багаторівневу прозорість, це дозволяє створювати плавний перехід від прозорої області зображення до колірної, так званий градієнт.

  • Використаний алгоритм стиснення зберігає всі кольори і піксели в зображенні незмінними. Якщо порівнювати з іншими форматами, то в PNG-24 кінцевий об'єм графічного файлу виходить найбільшим.

Область застосування


Фотографії, малюнки, що містять прозорі ділянки, малюнки з великою кількістю кольорів і чіткими краями зображень.

Інші формати графічних файлів

Adobe Photoshop Document


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

Для стиснення застосовують метод RLE (Run Length Encoding), кодування із змінною довжиною рядка. Дія методу полягає в пошуку однакових пікселів в одному рядку. Якщо в рядку, наприклад, є 3 піксела білого кольору, 21 - чорного, 14 - білого, то застосування RLE надає можливість не запам'ятовувати кожен з них (38 пікселів), а записати як 3 білих, 21 чорний і 14 білих в першому рядку.

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

TIFF (Tagged Image File Format)


Апаратно незалежний формат TIFF, на сьогоднішній, день є одним з найпоширеніших і надійніших, його підтримують практично всі програми на РС і Macintosh, що пов’язані з графікою. TIFF є кращим вибором при імпорті растрової графіки у векторні програми та видавничі системи. Йому доступно весь діапазон колірних моделей від монохромної до RGB, CMYK і додаткових кольорів Pantone. TIFF може зберігати контури, Альфа-канали та інші додаткові дані.

TIFF має два різновиди: для Macintosh і РС. Це пов'язано з тим, що процесори Motorola читають і записують числа зліва направо, а процесори Intel - навпаки. Сучасні програми можуть без проблем використовувати обидва варіанти формату. Зазвичай, дані у форматі TIFF не стискаються, але може бути використано LZW-стиснення.


BMP (Windows Device Independent Bitmap)


Рідний формат Windows, який підтримується всіма графічними редакторами, що працюють під управлінням цієї операційної системи.
Операційна система Операці́йна систе́ма, скорочено ОС (англ. operating system, OS) - це базовий комплекс програм, що виконує управління апаратною складовою комп'ютера або віртуальної машини; забезпечує керування обчислювальним процесом і організовує взаємодію з користувачем.
Застосовується, в основному, для збереження растрових зображень, що призначені для використання в Windows. Може зберігати як індексовані (до 256 кольорів), так і RGB-кольори (понад 16 млн. відтінків). Можливе застосування стиснення за алгоритмом RLE.

PDF (Portable Document Format)


PDF запропоновано фірмою Adobe, як платформо-незалежний формат для створення електронної документації, презентацій, передачі верстки та графіки через мережі.

Односторінкові файли PDF відмінної якості може створювати Photoshop. Багатосторінкові PDF можуть створювати програми Adobe Acrobat, PageMaker і програми пакету MS Office.

Adobe Acrobat - програмний продукт виробництва Adobe для роботи з PDF-файлами. Входить до складу декількох пакетів, зокрема Adobe Creative Suite, а також розповсюджується окремо у двох редакціях: Acrobat та Acrobat Reader (Adobe Reader).

PDF спочатку проектувався як компактний формат для електронної документації. Тому, всі дані в ньому можуть стискатися, причому, до різного типу інформації застосовуються різні, найбільш прийнятні для них типи стиснення: JPEG, RLE, CCITT, ZIP. Програма Acrobat дозволяє розставляти гіперпосилання, заповнені поля, додавати у файл PDF відео чи звук, інші дії.

Файл PDF може бути оптимізованим. З нього видаляються елементи, що повторюються, встановлюється посторінковий порядок завантаження сторінок через Веб, з пріоритетом спочатку для тексту, потім для графіки. Якщо елементів, що повторюються, немає, файл, після оптимізації, як правило, дещо збільшується.

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

WMF (Windows Metafile)


Векторний формат WMF є рідним форматом Windows і використовує його графічну мову. Призначений для передачі векторних даних через буфер обміну (Clipboard).
Кліпборд (англ. clipboard) або сховок - проміжне сховище даних, що призначається для переносу або копіювання між програмами або частинами однієї програми.
Розпізнається практично всіма програмами Windows, так чи інакше пов'язаними з векторною графікою. Користуватися форматом WMF варто лише у випадках передачі «чистих» векторів. WMF спотворює колір, не зберігає певні параметри, які привласнюються об'єктам в різних векторних редакторах, не містить растрові об'єкти, не розпізнається багатьма програмами на Macintosh.

Adobe Illustrator Document


Adobe Illustrator – популярний графічний редактор від Adobe. Векторний формат Illustrator можна безпосередньо відкрити у Photoshop, його підтримують майже всі програми Макінтош і Windows так чи інакше пов'язані з векторною графікою і графікою взагалі.

Формат Illustrator є найкращим посередником при передачі векторів з однієї програми в іншу, з РС на Macintosh і навпаки. Втілені або пов'язані з документом растрові файли при обміні через формат Illustrator втрачаються.


CorelDraw Document


Векторний формат, що має незаперечне лідерство на платформі РС. Багато програм на РС (FreeHand, Illustrator, PageMaker тощо) можуть імпортувати файли CorelDraw.

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

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









Скачати 89.44 Kb.

  • Графічні формати, що призначені для Веб
  • JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • Інші формати графічних файлів
  • TIFF (Tagged Image File Format)
  • BMP (Windows Device Independent Bitmap)
  • PDF (Portable Document Format)
  • Adobe Illustrator Document