Вы знаходзіцеся ў раздзеле «Артыкулы па web-дызайне»
На гэтай старонцы будзе апісаны працэс аптымізацыі графікі для інтэрнэту ў Adobe Illustrator. Аптымізацыя - гэта працэс, пры якім з файла выдаляецца пэўная інфармацыя і за кошт гэтага адбываецца істотнае памяншэнне памеру файла. У web-дызайне выкарыстоўваюцца тры фармату аптымізаванай піксельнай графікі - JPEG, GIF і PNG. Які выкарыстоўваць? Натуральна той, у якім файл зойме меншы памер пры аднолькавым візуальным якасці. Лічыцца, што для поўнакаляровых і фотарэалістычных малюнкаў варта ўжываць JPEG, а для простых, асабліва з вялікімі плошчамі аднатонных заліванняў лепш ужываць GIF. Нядрэнна яны сціскаюцца і фарматам PNG-8. Гэтыя асаблівасці тлумачацца рознымі прынцыпамі аптымізацыі ў розных фарматах.
Фармат GIF (Graphics Interchange Format) дазваляе захаваць малюнак з выкарыстаннем палітры індэксаваная кветак - да 256. Іншымі словамі, GIF выкарыстоўвае аптымізацыю за кошт змяншэння колькасці кветак - любы малюнак ён прадставіць у колерах, выбраных з 16 мільёнаў, але колькасць якіх можа быць ад 2 да 256. Натуральна, не кожнае малюнак можна бязбольна «ўціснуць» ў 256 кветак. Адсюль выснова - выкарыстоўваць фармат для немногоцветных малюнкаў з рэзкімі межамі паміж кветкамі. Фармат GIF падтрымлівае празрыстасць і выкарыстоўвае сціск без страты інфармацыі.
Фармат JPEG (Joint Photographic Experts Group) прыдатны для захавання поўнакаляровых малюнкаў з каляровай глыбінёй 24bpp (TrueColor) і выкарыстоўвае сціск з стратай інфармацыі. Празрыстасць гэтым фарматам не падтрымліваецца і пры моцнай ступені сціску з'яўляецца розныя артэфакты (скажэнні, староннія плямы і г.д.).
PNG (Portable Network Graphics) - самы новы з фарматаў, спраектаваны для замены састарэлага і больш простага фармату GIF. Існуе 2 віды фармату. PNG-8 - 8-бітны, які выкарыстоўвае індэксаваная колеру і які падтрымлівае Градыентнае празрыстасць. Выкарыстоўвае сціск без страт. PNG-24 - 24-бітны, выкарыстоўваецца для захоўвання поўнакаляровых малюнкаў. Ступень сціску PNG24 менш, чым у JPEG, але ён выкарыстоўвае алгарытм сціску без страт.
У Adobe Illustrator акно аптымізацыі Save for Web & Devices выклікаецца камбінацыяй клавіш (Alt + Ctrl + Shift + S) альбо ў меню File> Save for Web & Devices. З правага боку акна размешчана панэль з наладамі, якая ў залежнасці ад абранага фармату прымае розны выгляд. На малюнку паказана, як будзе выглядаць панэль пры выбары GIF.
Optimized file format (выбар фармату)
Color reduction algorithm (алгарытм скарачэння кветак)
Dithering algorithm (алгарытм імітацыі)
Transparency (празрыстасць)
Interlaced (черезстрочность разгортка)
Color reduction algorithm - алгарытм скарачэння колераў (па-іншаму называецца выбарам палітры) вызначае, як Illustrator зробіць з поўнакаляровага выявы індэксавацца. З усіх варыянтаў нас цікавяць наступныя:
Perceptual (палітра на ўспрыманне) - від адаптыўнай палітры з улікам адчувальнасці і ўспрымання чалавечага вока;
Selective (выбарачная палітра) - з перавагай колераў web-бяспечнай палітры (прынята па змаўчанні, даволі блізка захоўвае зыходныя колеру);
Adaptive (адаптыўная палітра) - створыць каляровую табліцу з кветак, найбольш часта сустракаюцца ў зыходным малюнку. Адна з найбольш важных палітраў;
Restrictive (Web-палітра) - пераўтворыць малюнак у стандартную табліцу з 216 web-бяспечных кветак.
Custom (заказная) - фармуе палітру з выбраных карыстальнікам кветак.
Dithering algorithm - алгарытм мяшання пікселяў (яшчэ называюць дизеринг, рассейванне, імітацыя) дазволіць выбраць спосаб імітацыі дадатковых кветак шляхам мяшання існуючых пікселяў. Варыянты выбару: No dither - без мяшання, Diffusion - дыфузны алгарытм, Pattern - алгарытм на аснове зададзенага ўзору і Noise - алгарытм на аснове шуму. Пры аптымізацыі заўсёды варта паспрабаваць усе варыянты. Далучэнне гэтай опцыі прыводзіць да павелічэння памеру файла, але гэта варта таго. Звязаны са спісам рухавічок Dither рэгулюе інтэнсіўнасць мяшання.
Transparency (празрыстасць) - уключэнне празрыстасці, разглядаецца тут .
Interlaced - черезстрочность разгортка. Забяспечыць паступовае паляпшэнне (прамалёўку) выявы ў працэсе загрузкі.
Працэс аптымізацыя зводзіцца да выбару палітры і колькасці кветак. Палітра выбіраецца ў Color reduction algorithm, а колеры - у які расчыняецца спісе Colors. Сярод усіх палітраў найбольш пераважнай лічыцца адаптыўная. Колькасць кветак пачынаць варта з 256 і, паступова памяншаючы, кантраляваць змены малюнка. Як правіла, колькасць кветак у выбіраецца з шэрагу: 2, 4, 8, 16, 32, 64, 128, 256.
Нягледзячы на тое, што GIF падтрымлівае сціск без страт, Illustrator дазваляе ўсталяваць страты ў гэтым фармаце. Паўзунком Lossy можна яшчэ больш сціснуць файл, паменшыўшы яго памер.
Аптымізацыя фармату PNG8 нічым не адрозніваецца ад GIF (у Optimized file format выбіраем PNG8). Як ужо гаварылася, PNG8 варта выкарыстоўваць для захоўвання малюнкаў вялікіх памераў - менавіта ў гэтым выпадку будзе перавага перад JPEG і GIF.
Пяройдзем да фармату JPEG.
Optimized file format (выбар фармату)
Compression quality (Якасць сціску)
Progressive (прагрэсіўны)
Тут усе некалькі прасцей. Compression quality (якасць сціску) - выпадальны спіс з шаблоннымі значэннямі якасці малюнка:
Low - нізкая (максімальны ўзровень кампрэсіі)
Medium - сярэдняе (сярэдні ўзровень кампрэсіі)
High - высокае (невялікі ўзровень кампрэсіі)
Maximum - максімальнае (мінімальны ўзровень кампрэсіі).
У адпаведнасці з выбарам будзе мяняцца значэнне поля Quality ад 0 (самае нізкае) да 100 (самае высокае). Больш плаўна якасць можна наладзіць непасрэдна ў самім поле, альбо ў якое з'яўляецца пад ім рухавічку. У поле Blur (размыццё) усталёўваецца ступень размыцця карцінкі, пры невялікіх значэннях размыццё схавае дробныя дэфекты сціску. Ўключэнне сцяжка Progressive дазволіць зрабіць загрузку карцінкі больш зручнай для ўспрымання - выява будзе адлюстроўвацца яшчэ да поўнай загрузкі. Пры гэтым павялічыцца памер файла.
Застаецца дадаць, што з выпадальнага меню Preset можна выбраць гатовыя перадусталёўкі для кожнага фармату. Націск клавішы Alt прывядзе да чарговай змене кнопак меню (на малюнку). Reset прывядзе да скіду ўсіх налад, а Remember - да запамінання.
З левага верхняга боку размешчаны чатыры ўкладкі, якія палягчаюць працэс аптымізацыі.
Ўкладка Original дазволіць, як ясна з назвы, праглядзець арыгінал малюнка, Optimized - аптымізаваны варыянт. А ўкладкі 2-Up і 4-Up - двух і четырехблочный варыянты прагляду адпаведна, дзе будзе і арыгінал, і аптымізаваныя варыянты. Прычым для кожнага варыянту можна ўжываць розныя налады.
Спасылка на артыкул пры перадруку абавязковая.
Які выкарыстоўваць?