“Графіка для Web”

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

Форматів зображень, які підходять для використання в web не так багато. Найчастіше для цих цілей використовуються три формати: GIF, JPEG, PNG. У кожного є своє застосування.

Історично склалося так, що першим з’явився на світ формат GIF (Graphic Interchange Format), на основі алгоритму стиснення LZW, придуманого в 1977 році двома ізраїльськими математиками на прізвище Лемпеля і Зів. У файлах формату GIF малюнок зберігається в стислому цим алгоритмом вигляді. Коли створювався GIF це було дуже актуально, при низьких інтернет швидкостях, чим менше розмір графічного файлу, тим швидше завантажується зображення. А так як використовується стиснення, у відносно невеликих файлах можуть записуватися досить великі малюнки. Ще одним з переваг даного формату є можливість один колір зробити прозорим. Насправді, GIF не підтримує прозорість у зображеннях (т.зв. альфа-канал), він лише дозволяє призначити одному будь-якого кольору в палітрі атрибут прозорості. Коли броузер малює на екрані такий GIF, то, зустрічаючи “прозорий” піксель, він просто ігнорує його і не друкує на екрані.

Палітра кольорів, використовувана в GIF 8-бітна (максимум 256 кольорів). У графічному форматі JPEG, наприклад, використовується до 16 мільйонів кольорів.

У файлах формату GIF можуть бути збережені анімовані зображення. Саме цей формат дозволяє створювати файли з чересстрочной (interlaced) зображеннями. Чресстрочние зображення зберігаються в gif-файлі особливим чином. На початку файлу записуються рядки з номером, кратним восьми, потім – чотирьом, і т.д. Таким чином, строчки, складові зображення, перемежовуються, і при завантаженні броузер спочатку показує Кожен 8-ий рядок, потім кожну 4-ую, кожну 2-ую, і, нарешті, завантажується повне зображення. Таким чином, подібне зображення проявляється у вікні завантаження поступово, збільшуючи свою чіткість по міру завантаження нових порцій даних. При цьому відвідувач вашої сторінки зможе зрозуміти, що ж намальовано на даній картинці, не чекаючи її повного завантаження, що дуже зручно. І якщо картинка не потрібна, то досить перегорнути сторінку далі, щоб малюнок пішов з вікна перегляду броузера, або перейти по гіперпосиланню і подальше завантаження зображення не відбудеться. Хоча при сучасному ADSL інтернеті або на виділеному каналі, ви цього навіть не побачите, але для користувачів на звичайному модемі це ще актуально і від такої оптимізації зображень все ще не варто відмовлятися.

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










GIF, 8 біт, 32 кольори
3,5 Кb



JPEG, 24 біта
61% втрати якості 3,7 Kb


Рис.3 і 4
Один і той же малюнок з чіткими контурами в форматі JPEG та GIF, має практично один і той же вага, але зверніть увагу на різницю в якості

У тому випадку, якщо використовується зображення з плавними переходами кольору і відсутністю дрібних чітких деталей має сенс скористатися графічними файлами формату JPEG. Формат JPEG дозволяє зберігати зображення з високим колірним дозволом. Має дві колірних схеми 24 бітову (16,777,216 кольорів) і 8 бітову grayscale (256 кольорів)

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















114 KB



41 KB



32 KB



27 KB



19 KB



14 KB

Рис.5, 6, 7, 8, 9, 10
Наведені зображення наочно показують область застосування формату JPEG, а також різницю в якості і розмірі, якої можна досягти, трохи “повороживши” над настройками практично в будь просунутої графічній програмі.

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

Тепер, обов’язково згадаємо, про ще одному цікавому і корисному форматі PNG (Portable Network Graphics). Своєю появою формат PNG зобов’язаний все того ж формату GIF. Справа в тому, що алгоритм стиснення LZW запатентований і належить фірмі Unisys. А формат GIF, який був створений на основі цього алгоритму, розробила фірма CompuServe, що розробила цей формат. У 1994 році відносини між компаніями зіпсувалися, виходячи з корисливих цілей Unisys ініціював судовий процес проти CompuServe. В результаті численних перепитій формат GIF став платним і його використання в програмному забезпеченні сильно обмежена. За традицією на будь-який платний продукт рано чи пізно з’являється безкоштовна альтернатива, такою альтернативою став PNG формат, який з’явився на світ 4 січня 1995 року, коли Т. Боутелл а рамках Usenet конференції запропонував створення вільно, альтернативного GIF формату. 1 жовтня 1995 вийшла перша версія 1.0 PNG, який став повноправним мережевим форматом

Формат PNG має три колірних схеми (“Truecolor”, “grayscale” і індексована палітра), Багато достоїнств і нових корисних можливостей. PNG набагато зручніше при створенні зображень, так як має вдосконалений альфа-канал, на відміну від GIF, число його рівнів доведено до 254, що дає більш широкі можливості для створення багатошарових зображень, мається покращене стиск даних Deflation (на 5-20% сильніше ніж в форматі GIF) без втрат, що робить цей формат відмінним, для зберігання проміжних стадій редагування. Наприклад, при кожному відкритті з подальшим збереженням зображення в JPEG-форматі необоротно втрачає інформацію про пікселях, на відміну від PNG. Тому PNG ідеально підходить для збереження фотографій, на яких неприпустимі жодні втрати, ідеально застосуємо на зображеннях із суцільними областями. Збереження у форматі PNG допоможе зберегти якість зображення. Оригінальна схема двовимірного чергування даних і можливість використання гамма-корекції (міжплатформна управління яскравістю зображення), на якій ми зупинимося докладніше, також є перевагами цього формату. Є можливість збереження компресувати або некомпрессірованних текстових вставок для зберігання інформації про копірайт чи інших цілей. До речі, для зберігання тексту, PNG підходить набагато більше ніж JPEG.

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

Трохи докладніше про гамма-корекції. При перенесенні графічного файлу з одного комп’ютерів на інший, наприклад, з PC на Macintosh, або з однієї операційної системи на іншу (Linux-Windows), можуть бути відмінності в інтерпретації зображень: зображення виглядають темніше або світліше. Співвідношення між цифровою інформацією та реально відображати кольори на моніторі і називається гамма. Вбудована в PNG гамма корекція працює за наступним принципом: дані налаштування дисплея, відеокарти і софта (інформація про колірній гамі) записуються у файл і при перенесенні на комп’ютер іншої конфігурації зображення залишається незмінним.

І наостанок, наочно проілюструємо на декількох зображеннях всі недоліки і переваги форматів GIF, JPEG та PNG.






















GIF

A. 1.1k GIF

B. 12.3k GIF

C. 10.9k GIF
JPEG

D. 4.3k JPEG

E. 2.5k JPEG

F. 6.8k JPEG
PNG

G. 1.2k PNG

H. 4.3k PNG

I. 5.9k PNG

 

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*