1. Асаблівасці сціску ў JPEG
2. Асаблівасці сціску ў GIF

Онлайн падручнік па WEB-графіцы

Здавалася б, што можна сказаць новага на гэтую даволі старую тэму - аптымізацыя графікі. Аднак я паспрабую падзяліцца ўласным досведам у гэтай галіне і даць некаторыя чыста практычныя рэкамендацыі па падрыхтоўцы графікі для вэб-старонак.

Я не стаў спыняцца на пытаннях, звязаных з паводзінамі графікі ў старадаўніх Васьмібітны відэарэжымамі. Такія паняцці, як "бяспечная" палітра ўжо страцілі ранейшую актуальнасць. У той жа час шматлікія вэб-майстры часта робяць памылкі, якіх можна пазбегнуць, больш уважліва прыгледзеўшыся да некаторых асаблівасцях графічных фарматаў і графічных рэдактараў.

Гаворка тут ідзе пра толькі двух класічных сеткавых растравых фарматах - GIF і JPEG, паколькі для паўнавартаснай падтрымкі, скажам, PNG нават браўзэраў апошніх версій неабходны спецыяльны модуль, які далёка не ўсе карыстальнікі знайшлі патрэбным ўсталяваць. Вектарная жа графіка практычна цалкам зводзіцца да ўльтрамодных стандарту ShockwaveFlash, а гэта ўжо зусім іншая гісторыя ...

GIF і JPEG выкарыстоўваюць зусім розныя прынцыпы сціску графічнай інфармацыі. Каб навучыцца выбіраць прыдатны фармат, давайце паспрабуем лепш разабрацца ў прыладзе гэтых фарматаў.

Асаблівасці сціску ў JPEG

Пры распрацоўцы метаду сціску JPEG былі ўлічаны некаторыя характэрныя асаблівасці органаў каляровага ўспрымання чалавека. Справа ў тым, што чалавечае зрок куды больш адчувальна да змены асветленасці, а не ўласна колеру. Выкарыстоўваная ў кампутарнай графіцы каляровая мадэль RGB (чырвоны, зялёны, сіні) "ня эканамічная" з-за аднолькавай важнасці ўсіх трох складнікаў. Выбар жа іншай сістэмы каляровых каардынат дазваляе павялічыць сціск шляхам адкіды добрай паловы інфармацыі аб адценьні і насычанасці колеру. Пры гэтым найбольш важны для вока кампанент яркасці застаецца некранутым. Пасля такой аперацыі аб'ём інфармацыі памяншаецца на траціну. Дарэчы, у гэтым фармат JPEG вельмі падобны на схемы колераперадачы ў каляровым тэлебачанні.

Акрамя таго ў JPEG рэалізаваны алгарытм сціску "са стратамі" - дыскрэтнае косинусоидальное пераўтварэнне (DCT), пры якім інфармацыя пра колер кожнага пікселя замяняецца інфармацыяй аб характары змены кветак у межах зададзенай вобласці. Малюнак Квант - пераўтворыцца ў мазаіку з квадратаў (звычайна 8 х 8 пікселяў). Унутры кожнага такога квадрата размеркаванне кветак апісваецца спецыяльнай матэматычнай функцыяй, каэфіцыенты якой і захоўваюцца ў JPEG-файле. Якасць сурагатнага малюнка, атрыманага шляхам зваротнага пераўтварэння, і адпаведна памер файла залежаць ад складанасці функцыі і хібнасці акруглення.

Толькі пасля ўсіх гэтых пераўтварэнняў надыходзіць чаргу звычайнага сціску (ужо без страт). Для гэтага, як правіла, ўжываецца не запатэнтаваны алгарытм Huffman compression. Папярэдне пасартавана па палічках інфармацыя сціскаецца максімальна эфектыўна.

JPEG прызначаны, перш за ўсё, для каляровых фатаграфій з мяккімі каляровымі пераходамі, бо з павелічэннем паказчыка сціску становіцца прыкметным ўзаемнае пранікненне кветак на рэзкіх каляровых кантактах і "дрыгаценне" тонкіх ліній. Вар'іруючы ступень сціску можна дамагчыся вельмі высокіх паказчыкаў аптымізацыі каляровых фатаграфій (напрыклад, 1: 10) без прыкметнай воку страты якасці. Фармат 24-разрадны (16,7 млн. Кветак) - гэта магчыма галоўнае, хоць і адноснае, перавага перад GIF.
Для малапамерных малюнкаў (дзясяткі пікселяў) JPEG не выкарыстоўваюць, т. К. На ўвазе апісаных вышэй асаблівасцяў ён невыразна перадае дробныя дэталі. Для параўнання прывяду мінімальныя памеры адно-піксельных файлаў: для JPEG - 542 байта; для GIF - 35 байт.

Асаблівасці сціску ў GIF

Гэты фармат быў створаны фірмай CompuServe ў далёкім 1987 годзе. На сёння GIF застаецца адным з самых распаўсюджаных графічных фарматаў, і яго падтрымліваюць усе існуючыя графічныя браўзэры. Фактычна, паняцце Web-графікі большай часткай зводзіцца да тэхнікі стварэння GIF-малюнкаў.

Галоўныя, хоць і зусім не звязаныя паміж сабой, асаблівасці фармату - гэта прывязка малюнкі да пэўнай палітры і алгарытм сціску без страт - LZW. Таму памер (а значыць хуткасць загрузкі) GIF-файла знаходзіцца ў строгай залежнасці ад двух рэчаў - памеру палітры (колькасці задзейнічаных колераў) і характару самага малюнка (яго "фрагментацыі")

Палітра (табліца кветак) можа ўтрымліваць 2, 4, 16, 32, 64, 128 або 256 вочак. Такім чынам, карцінка ў фармаце GIF не можа мець больш за 256 кветак (8 біт на піксель). Зрэшты, для большасці задач вэб-дызайну 256 кветак у адным файле - гэта нават шмат. Палітра можа ўтрымліваць "сістэмныя" колеры, альбо быць адвольна індэксавацца, т. Е. Адаптаванай для канкрэтнага малюнка. Калі арыгінал мае больш за 256 кветак, то пры экспарце блізкія адценні прымаюць некаторы асераднёнае значэнне. Ёсць нават такое псеўда-эмпірычнае правіла: чым большую плошчу займае колер на малюначку, тым больш у яго шанцаў застацца "самім сабой". Часткова вырашыць праблему абмежаванасці палітры часам дапамагае дыфузія колераў - змешванне пікселяў для атрымання пераходнага адцення. Такая опцыя ёсць у большасці графічных рэдактараў. Але тут мы сутыкаемся з іншай праблемай - дыфузія ўносіць у файл малюнка дадатковую порцыю бязладзіцы, што ўплывае на яго сціскальнасць. Таму дыфузію пажадана кампенсаваць скарачэннем палітры (напрыклад, з 256 да 128 або 64 кветак)

Вось наглядны прыклад залежнасці памеру файлаў ад спарадкаванасці графічнай інфармацыі ў іх (гэтыя тры карцінкі не адрозніваюцца нічым, акрамя характару малюнка)

210 байт

519 байт

1002 байта

Сакрэт у тым, што ў GIF-файлах інфармацыя захоўваецца парадкова. Як бачыце, апісаць па радках першую карцінку даволі проста, чаго не скажаш пра апошнюю.

Як вядома, існуе дзве версіі фармату: GIF87a і GIF89a. Такія пашырэння, як празрыстасць і анімацыя падтрымліваюцца толькі ў GIF89a, таму большасць праграм ствараюць файлы менавіта ў гэтым варыянце.