- Аптымізацыя малюнкаў для Web Пры падрыхтоўцы малюнкаў для размяшчэння ў інтэрнэце або адпраўкі па...
- Аптымізацыя малюнкаў у фармаце GIF і PNG-8
- Мал.1. Паслядоўнасць стварэння малюнка з празрыстасцю
Аптымізацыя малюнкаў для Web
Пры падрыхтоўцы малюнкаў для размяшчэння ў інтэрнэце або адпраўкі па электроннай пошце патрабуецца забяспечыць неабходнае ў кожным канкрэтным выпадку якасць пры мінімальным аб'ёме файла. Для выканання гэтай умовы зыходны малюнак трэба аптымізаваць. Калі вы хочаце атрымаць найлепшы вынік, то альтэрнатывы Photoshop няма. Акрамя таго, лепшая праграма стварэння сайтаў Adobe Dreamweaver CS3 цалкам інтэграваная з Photoshop, так як, нагадаю, што кампанія Adobe набыла ў 2005 годзе фірму Macromedia, стваральніка Dreamweaver.
Работа па аптымізацыі малюнкаў дзеліцца на два этапы: падрыхтоўка выявы ў рэдактары і працэс сціску. Апісання аптымізацыі звычайна пачынаюцца адразу з ужывання каманды Save for Web (Захаваць для Web) або пераходам у Image Ready, а папярэдняй падрыхтоўцы ня надаецца належнай увагі. Па змаўчанні лічыцца, што карцінка ўжо адрэдагавана, то ёсць падрыхтаваная да друку. А між тым, аптымізацыя для Web адрозніваецца ад падрыхтоўкі да друку вельмі істотна. Акрамя таго, магчымасці рэдактара па змене параметраў малюнка значна шырэй, чым у Image Ready, ды і працаваць у рэдактары зручней. Гэта адносіцца, вядома, толькі да працэсу падрыхтоўкі да сціску, а не да спецыяльных функцый Image Ready для Web: стварэнне карты малюнка, GIF-анімацыі і самога працэсу сціску.
Такім чынам, вы адкрылі малюнак у Adobe Photoshop і выканалі неабходныя аперацыі па карэкцыі узроўняў, балансу кветак, насычанасці і кадравання. Гэтыя аперацыі дэталёва апісаны ў шматлікіх кіраўніцтвах і на іх спыняцца не будзем. Каб не страціць арыгінал, створым копію малюнка, і з ёй будзем далей працаваць. Зручна для гэтых мэтаў вылучыць асобную тэчку, у якой будуць захоўвацца нашы малюнка для інтэрнэту і электроннай пошты.
Пераходзім да параметраў, якія ўплываюць на ступень магчымага сціску выявы. Спачатку вызначымся з памерамі карцінкі, пстрыкнуўшы правай кнопкай мышы па сіняй паласе над малюнкам і выбраўшы з выпадальнага меню Image Size.
Дазвол (Resolution) задаем стандартнае для Web - 72ppi, прапорцыі захоўваем (Constrain Proportions) .Размер выявы ў пікселях пажадана задаць мінімальна неабходны. Арыентавацца варта на самае распаўсюджанае дазвол экрана, якое ў цяперашні час складае 1280х1024 (1280х800 для шырокага экрана). Задаваць больш гэтага значэння няма сэнсу, калі толькі вы не плануеце выкарыстоўваць прагортку, напрыклад, жадаючы прадэманстраваць вудзільна для спартыўнай рыбалкі або прайграць карціну "Маршал Будзёны з конніцай каля труны Леніна". Тут ужо без пракруткі ніяк ...
За выключэннем такіх экстрэмальных выпадкаў, малюнак павінна быць цалкам відаць на экране без пракруткі. Пры вёрстцы старонкі сайта памеры карцінкі вызначаюцца памерам ячэйкі табліцы і супамернасцю тэксту і малюнкі.
Асноўнае правіла пры любым змене памераў, акрамя абрэзкі (Crop): старайцеся не мяняць агульная колькасць пікселяў ў малюнку без крайняй неабходнасці, так як гэта пагаршае выразнасць карцінкі і стварае дадатковыя контурныя скажэнні, якія павышаюць, у канчатковым рахунку, обьем файла пры сціску. Гэта адносіцца не толькі да аптымізацыі малюнка для Web, але і да любых аперацыях у рэдактары.
Невялікае заўвага: калі вы фатаграфуеце з адзінай мэтай размясціць фота ў інтэрнэце, вельмі пажадана ўжо пры здымцы задаць неабходныя памеры і дазвол здымка. На жаль, гэта можна зрабіць не ва ўсіх камерах, і тады адзіны шлях - задаваць пры здымцы максімальны дазвол, а потым у рэдактары паменшыць памеры да неабходных значэнняў.
Падзенне контурнай рэзкасці пры змене ліку пікселяў ў малюнку выклікае вельмі непрыемная з'ява: неадназначнасць карцінкі на экране манітора. Хай вы атрымалі пышнае якасць аптымізаванага малюнка і з пачуццём глыбокага задавальнення размясцілі яго на сайце, але, калі ў браўзары карыстальніка усталяваны маштаб паказу старонкі не 100%, то ўсе вашыя намаганні былі марныя. Можаце пераканацца ў гэтым неадкладна: разгледзьце любы з скрыншотаў, змешчаных на гэтай старонцы, пры розных маштабах паказу ў браўзэры. Пераканаліся?
Для розных браўзэраў падзенне рэзкасці трохі адрозніваецца ў залежнасці ад спосабаў інтэрпаляцыі прамежкавых значэнняў пікселяў, але ўсё роўна, гэта з'ява вельмі прыкметна. Дарэчы, яно праяўляецца нават у такім магутным рэдактары, як Photoshop. Менавіта таму ўсе аперацыі з рэзкасцю выконваюцца толькі пры 100% маштабе.
Аналагічны эфект выяўляецца і ў тым выпадку, калі вы на ВК-маніторы ўсталюйце дазвол, менш максімальнага. Карцінка на маніторы складаецца з тых жа кропак, і спроба прайграць 1024х768 кропак на экране з дазволам 1280х1024 прывядзе да пагаршэння рэзкасці. Калі хочаце, можаце адразу праверыць, змяніўшы дазвол вашага манітора (правы пстрык на Працоўным стале - Уласцівасці - Параметры - Дазвол экрана).
Адзінае суцяшэнне - гэта з'ява не выяўляецца пры друку старонкі сайта. З невыразнай карцінкі на экране вы атрымліваеце пры раздрукоўцы на паперы выдатную рэзкасць, так як дазвол друкаркі ў шмат разоў вышэй, чым у манітора, і страты з-за інтэрпаляцыі пікселяў неістотныя.
Усталяваўшы памеры малюнка, пераходзім да яго падрыхтоўцы для далейшага сціску. Патрабаванні аптымізацыі для фарматаў JPEG, GIF, PNG адрозніваюцца, што звязана з рознымі алгарытмамі сціску. Для атрымання мінімальнага памеру сціснутага файла ў JPEG і PNG-24 трэба пазбягаць рэзкіх кантрасных пераходаў і дробных дэталяў, прычым шумы на малюнку - гэта таксама дробныя дэталі і, такім чынам, шум можа моцна павялічыць памер канчатковага малюнка. Для GIF і PNG-8 непажаданыя плыўныя градыентныя пераходы і шырокая палітра колераў.
Аптымізацыя малюнкаў у фармаце JPEG і PNG-24
Для прагляду, як ужо высветлілі, усталёўваем маштаб 100% і апрацоўваем фільтрамі павышэння рэзкасці.
Можна карыстацца любымі, але мне здаецца найбольш зручным выкарыстоўваць фільтр Unsharp Mask з параметрамі, названымі на малюнку, паўтарыўшы паслядоўна яго дзеянне ад трох да пяці разоў.
Затым ўжываем фільтр размыцця Despeckle (Filter - Noise - Despeckle) і рэгулюем глыбіню яго дзеяння (Ctrl + Shift + F). Звычайна досыць паменшыць размыццё прыкладна да 50%, дамагаючыся захавання дробных дэталяў пры мінімальнай контурнай рэзкасці, неабходнай для прагляду на экране манітора. Памятаеце, што пры моцным шарпенинге (павышэнні рэзкасці) узрастае аб'ём сціснутага файла, асабліва для вялікіх малюнкаў.
Шумы прыбіраем фільтрам Reduce Noise (Filter - Noise - Reduce Noise) або любой спецыяльнай праграмай, напрыклад, Neat Image або Noise Ninja.
Далей пераходзім да сціску выявы, выбраўшы File - Save for Web (Файл - Захаваць для Web) або Ctrl + Shift + Alt + S. Пераходзіць у Image Ready для гэтага няма сэнсу, так як каманда Save for Web з'яўляецца складовай часткай Image Ready з тымі ж функцыямі сціску. Усталёўваем рэжым прагляду адначасова двух малюнкаў, націснуўшы 2-Up.
Злева ў нас выводзіцца арыгінальнае малюнак, справа - аптымізаваным сціснутае.
Пад сціснутым выявай паказаны асноўныя яго характарыстыкі: алгарытм і параметры сціску, памер і час загрузкі ў браўзэры пры пэўнай хуткасці інтэрнэт - злучэння. Для выбару цікавіць вас хуткасці клікніце правай кнопкай мышы па малюнку.
У правым куце размешчаны асноўныя рэгулявання сціску. Пстрыкнуўшы па стрэлцы ў акне Quality (Якасць), выводзім шкалу і паўзунком рэгулюем ступень сціску, кантралюючы якасць па малюнку ў правым акне. Калі вынік сціску, гэта значыць "вага" атрыманага файла пры належным якасці, нас не задавальняе, што для дапытлівага вэб-дызайнера характэрна ў 99% выпадкаў, ціснем Cancel. Вярнуўшыся такім чынам у рэдактар, паўтараем маніпуляцыі з Unsharp Mask, Despeckle і Reduce Noise з іншымі параметрамі. Варта ўлічыць, што паслядоўнасць прымянення гэтых трох фільтраў той жа адбіваецца на выніку. Метадам "крок назад, два крокі наперад" паступова дамагаемся максімальнага сціску пры задавальняюць нас якасці карцінкі. На жаль, атрыманыя ўсталяваны фільтры для аптымізацыі малюнка ўнікальныя для кожнага выпадку, але адрозненні не вельмі значныя, і пасля некалькіх эксперыментаў вы будзеце прадстаўляць сілу ўздзеяння кожнага фільтра на канчатковы вынік аптымізацыі малюнка.
Для палягчэння жыцця зручна прызначыць для нашых трох фільтраў хуткія клавішы выкліку. Нагадаю, для гэтага трэба абраць у Photoshop каманду Edit - Keyboard Shortcuts. Пасля гэтага вы заўсёды зможаце паўторна выклікаць фільтр з папярэднімі ўстаноўкамі, націснуўшы Ctrl + Alt + (клавіша фільтра).
Калі вы хочаце, каб малюнак з'яўлялася на экране манітора паступова, усталюйце сцяжок Progressive. Часам гэта некалькі павялічвае, а бывае, наадварот, памяншае памер файла, але для вялікіх малюнкаў апраўдана, бо павялічвае зручнасць прагляду. Параметр Blur лепш не выкарыстоўваць, так як ён значна хмулацей, чым Despeckle.
У палітры параметраў сціску ёсць спецыяльная функцыя для вельмі лянівых - аўтаматычная аптымізацыя выявы. Для яе выбару ўсталюеце сцяжок Optimized і націсніце кнопку з трохвугольнікам над ёй. У выпадальным меню вылучыце Optimize to File Size.
У якое з'явілася акне можна задаць жаданы памер аптымізаванага малюнка і фармат: альбо пэўны вамі - Current Settings, альбо прадаставіць яго выбар праграме - Auto Select GIF / JPEG. Ціснем ОК і атрымліваем вынік, які можа задаволіць толькі вельмі непатрабавальнага карыстальніка. Як амаль любая аўтаматызацыя ў Photoshop - гэтая функцыя практычна недастасоўная, але для агульнага развіцця ведаць аб ёй трэба.
Фармат PNG-24 злучае ў сабе рысы JPEG і GIF: падтрымлівае 24-бітны колер, захоўвае празрыстасць і вельмі добра перадае паўтоны. Памер атрымліваюцца малюнкаў звычайна больш, чым у JPEG, але бываюць выключэнні. Таму ёсць сэнс пры аптымізацыі малюнка паспрабаваць і PNG-24.
Аптымізацыя малюнкаў у фармаце GIF і PNG-8
Для графічных малюнкаў з невялікім колькасцю кветак, вялікімі аднатоннымі ўчасткамі і тэкстам, напрыклад, дыяграмы, лагатыпы, скрыншоты і простыя малюнкі, лепш ужываць сціск у фарматах GIF і PNG-8. Пры падрыхтоўцы малюнкаў для гэтых фарматаў трэба імкнуцца да памяншэння колькасці кветак, адсутнасці градыентаў (плыўных змяненняў насычанасці і каляровага тону) і краявых акантовак. Фармат PNG-8 звычайна дае лепшыя вынікі, чым GIF. Для выбару фармату выкарыстоўваем выпадальнае меню акна Preset.
Для рэгуляванняў даступныя наступныя параметры: алгарытм сціску, размыццё (Dither), празрыстасць (Transparency) і колькасць прайграваных колераў (Colors). Апошні параметр найбольш важны. Памяншайце колькасць кветак да прымальнага ўзроўню, а затым паэксперыментуйце з алгарытмам сціску. Звычайна найлепшы вынік пры мінімальным аб'ёме дае выбар Selective.
Затым пераходзім да рэгулёўцы згладжвання. Гэтая функцыя дазваляе імітаваць адсутнічаюць колеру некалькімі суседнімі пікселямі. Звычайна выкарыстоўваецца рэжым Diffusion, а для градыентаў - Noise. Канкрэтнае значэнне размыцця усталёўваем ў акне Dither з дапамогай выпадальнай шкалы.
Таксама, як і ў выпадку з аптымізацыяй выявы ў фармаце JPEG, найлепшага выніку можна дабіцца толькі ўручную метадам паслядоўных набліжэнняў, дамагаючыся найлепшага суадносін якасць / памер файла. Тут можа быць вельмі зручным рэжым адначасовага паказу чатырох малюнкаў (кнопка 4-Up ў левым верхнім куце): зыходнага і трох розных варыянтаў у GIF і PNG фарматах.
У фармаце GIF ёсць функцыя Lossy (Паніжэнне якасці), якая дазваляе пры невялікіх значэннях паменшыць памер сціснутага файла. Пры рэгуляванні трэба ўважліва сачыць за якасцю, якое хутка пагаршаецца пры значэннях Lossy вышэй за 20%.
Фарматы GIF і PNG дазваляюць захоўваць празрыстасць. Гэта дазваляе накласці малюнак на фон старонкі. Без прымянення празрыстасці вы абмежаваныя прамавугольнай формай кадра малюнка. Для стварэння празрыстых абласцей іх трэба вылучыць або стварыць маску ў рэдактары. Напрыклад, на лагатыпе "Фота", размешчаным у правым верхнім куце гэтай старонкі, празрыстая вобласць акружае смайлік.
Створана такая празрыстая вобласць наступным чынам (мал.1):
- Спачатку я намаляваў смайлік "Фота";
- Інструментам Magic Wand Tool (Чароўная пэндзаль) выдзеліў вобласць вакол смайліка;
- Сам смайлік вылучыў камандай Select - Inverse (Вылучэнне - Інверсія);
- Для перамяшчэння смайліка на асобны пласт прыменена каманда Layer - New - Layer Via Copy (Пласт - Новы - Пласт праз капіяванне);
- Адключыў фонавы пласт Background пстрычкай у акне Layer па малюнку вочы на радку. Пры гэтым фон замяняецца на "шахматнае поле" - празрыстую вобласць;
- Абраў каманду File - Save for Web (Файл - Захаваць для Web), фармат PNG-8, усталяваў сцяжок Transparency і аптымізаваў малюнак з параметрамі, названымі на малюнку.
Мал.1. Паслядоўнасць стварэння малюнка з празрыстасцю
Вядома, аналагічны вынік можна атрымаць і без хітрыкаў з празрыстасцю: досыць прызначыць колер фону ў смайліка такі ж, як і на старонцы сайта. Для простых малюнкаў гэта цалкам падыходзіць, але калі фон мае тэкстуру, ці карцінку мяркуецца размясціць у розных месцах, то без падтрымкі празрыстасці могуць узнікнуць складанасці.
Оптимизируемые для Web малюнка не заўсёды падыходзяць для сціску ў якім-небудзь адным фармаце. Напрыклад, нацюрморт або партрэт звычайна маюць раўнамерны размыты фон, ідэальны для моцнага сціску, і сам аб'ект здымкі, для адлюстравання якога падыходзяць толькі JPEG высокай якасці і PNG-24. Шмат такіх змешаных малюнкаў у рэкламе (буклеты, календары, каталогі прадукцыі), дзе фатаграфіі суседнічаюць з графікай і тэкстам. Для такіх выпадкаў аптымальна падзяліць выява на фрагменты - слайсы і кожны аптымізаваць па сваім алгарытме сціску. Гэты спосаб разгледзім падрабязней у далейшых артыкулах па падрыхтоўцы малюнкаў для Web. Ўплыў зыходнага фармату на магчымасці сціску выявы паказана ў артыкуле аб зняцці скрыншотаў . Так, напрыклад, калі малюнак ўжо было сціснута ў JPEG, то аптымізацыя яго магчымая толькі ў JPEG, так як GIF і PNG-8 дадуць вялікі аб'ём сціснутага файла.
Таксама для аптымізацыі змешаных малюнкаў можна ўжыць і метад ўзважанай аптымізацыі : Гэта значыць рознай для розных абласцей малюнка. Гэты метад дазваляе паменшыць колькасць кветак і дакладна кантраляваць ступень сціску, што дазваляе паменшыць памер файла пры захаванні высокай якасці.
У выпадку, калі ўсе пералічаныя метады аптымізацыі вас не задавальняюць, то заўсёды застаецца магчымасць даць спасылку на загрузку якаснага малюнка вялікага аб'ёму. Пры гэтым выяўляйце павагу да карыстача - не забывайце паказаць памер запампоўвае файла карцінкі.
2008/08/02 г.
