Як аптымізаваць малюнак для сайта ў Photoshop. Сайт паліграфістаў і web-майстра Сяргея

Вы знаходзіцеся ў раздзеле «Артыкулы па web-дызайне»

Перш за ўсё вызначымся, што ж такое аптымізацыя? Аптымізацыя - гэта працэс, пры якім з файла выдаляецца пэўная частка інфармацыі і за кошт гэтага памер файла значна памяншаецца. У сучасным web-дызайне выкарыстоўваюцца тры фармату аптымізаванай піксельнай графікі - JPEG, GIF і PNG. Які з іх выкарыстоўваць? Крытэрый досыць просты - у якім фармаце файл зойме меншы памер пры найменшых візуальных скажэннях, у той і варта канвертаваць. Для поўнакаляровых і фотавыяў варта ўжываць JPEG, а для простых, асабліва з вялікімі плошчамі аднатонных заліванняў лепш выкарыстоўваць GIF. Фармат PNG-8 лепш чым GIF спраўляецца з аптымізацыяй малюнкаў вялікіх і сярэдніх памераў. Гэтыя асаблівасці тлумачацца рознымі алгарытмамі аптымізацыі ў розных фарматах.

Фармат 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 - які выкарыстоўвае індэксаваная колеру і які падтрымлівае Градыентнае празрыстасць. Выкарыстоўвае сціск без страт і заслугоўвае самай пільнай увагі. PNG-24 выкарыстоўваецца для захоўвання поўнакаляровых малюнкаў. Ступень сціску PNG24 менш, чым у JPEG, затое ён выкарыстоўвае алгарытм сціску без страт. У web-дызайне PNG-24 практычна не выкарыстоўваецца.

У Adobe Photoshop акно аптымізацыі 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 - алгарытм скарачэння колераў (па-іншаму называецца выбарам палітры) вызначае, як Photoshop зробіць з поўнакаляровага выявы індэксавацца. З усіх варыянтаў нас цікавяць наступныя:
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 падтрымлівае сціск без страт, Photoshop дазваляе ўсталяваць страты ў гэтым фармаце. Прасцей кажучы, рухавічком 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 - двух і четырехблочный варыянты прагляду адпаведна, дзе будзе і арыгінал, і аптымізаваныя варыянты. Прычым для кожнага варыянту можна ўжываць розныя налады.

Спасылка на артыкул пры перадруку абавязковая.