Ўсім прывітанне! У гэтым пасце хачу расказаць пра тое, як можна аптымізаваць карцінкі для сайта. Што такое аптымізацыя карцінкі і навошта іх наогул аптымізаваць? Гэтая інфармацыя будзе карысная асабліва пачаткоўцам карыстачам, бо менавіта яны грашаць загрузкай малюнкаў велізарных памераў. Часцяком, калі я здаю сайт кліенту даводзіцца тлумачыць яму пра карцінкі, што загружаць арыгінальныя малюнкі - гэта зло. Таму я вырашыў напісаць гэты пост, упэўнены шматлікім спатрэбіцца.
Падрыхтоўваць карцінкі для загрузкі на сайт будзем пры дапамозе праграмы Adobe Photoshop. Наогул, рэдактараў для працы з графічнымі файламі вельмі шмат, але я працую менавіта з фотошоп, таму пакажу як робіцца гэта ў фоташопе.
Перш чым прыступіць да дзеянняў давайце я спачатку растлумачу што такое аптымізацыя карцінкі і навошта іх трэба аптымізаваць.
Аптымізацыя карцінкі для Web, г.зн. для сайта - гэта захаванне малюнка пры аптымальных суадносінах якасці да яго памеры. Іншымі словамі, неабходна знайсці залатую сярэдзіну пры якой якасць малюначка не змяніцца пры памяншэнні яго памеру (вагі файла). Г.зн. пры аптымізацыі карцінкі чалавечае вока не адчуе розніцы ў якасці, але памер файла пры гэтым будзе мінімальны.
Зараз давайце разбярэмся навошта аптымізаваць карцінкі для сайта. Уявіце у вас на старонцы, скажам, у якім-небудзь аглядзе маецца 10 малюнкаў. Ў не аптымізаваным варыянце кожная карцінка важыць ~ 1 Мб. Г.зн. прадставім, што гэтыя карцінкі знятыя на добрай камеры (хоць у рэальнасці такія карцінкі важаць яшчэ больш). Я тут бяру па мінімуму. Усе 10 малюнкаў мы загружаем на сайт. У выніку старонка з аглядам ў нас будзе важыць як мінімум 10 Мб. Як мінімум таму што на сайце можа быць і іншая графіка, якая адносіцца да дызайну. Вы ўяўляеце грузіць старонку ў 10 Мб. Я разумею, што сёння ў кожнага ў доме маецца правадной інтэрнэт і Wi-Fi. А вы падумалі пра карыстальнікаў мабільнага інтэрнэту? Мне здаецца многія карыстальнікі проста не дачакаюцца загрузкі старонкі наогул.
Зараз давайце прадставім, што гэтыя ж самыя карцінкі пасля аптымізацыі будуць важыць не 1 Мб, а 100 кб. Гэта ў дзесяць разоў менш. У выніку ўсе карцінкі сумарна будуць важыць 1 Мб. 1 Мб куды хутчэй загрузіцца на мабільным прыладзе, чым 10 Мб.
Справа можа быць зусім і не ў мабільных карыстачах. Мы павінны зрабіць усё, каб старонкі сайты загружаліся як мага хутчэй. Цяпер, калі мы разумеем, што аптымізаваць карцінкі проста неабходна, то давайце ўжо пяройдзем да самой працэдуры.
Для прыкладу я вазьму любую карцінку. Паглядзім на яе памер у арыгінале.
Як бачым з скрыншота карцінка важыць 1,47 Мб. Гэта шмат. Нельга яе на сайт такую грузіць. Таксама адразу хачу звярнуць вашу ўвагу на дазвол карцінкі, г.зн. яе памер. Ён паказваецца ў пікселях.
Бачым дазвол - 2560 x 1600 пікс. Гэта таксама вельмі шмат. Навошта загружаць такую карцінку, калі яна ўсё роўна будзе паменшаная да шырыні галоўнага кантэйнера сайта. Звычайна гэта не больш 1200 пікс. Калі карцінка павінна адкрывацца ў лайтбокс, г.зн. усплываць па кліку, то дазвол павінна быць не больш за 1200 пікс. Таму памяншаем карцінку ў 2 этапы - спачатку памяншаем яе дазвол, а потым захоўваем для Web-прылад.
Адкрыем жаданую карцінку ў фотошоп: Файл -> Адкрыць. Далей памяншаем памер карцінкі: Выява -> Памер малюнка.
Далей, захаваем ўжо паменшаны файл у фармаце JPG: Файл -> Захаваць для Web або ціснем камбінацыю клавіш Ctrl + Shift + Alt + S. У якое адкрылася акне выбіраем фармат - JPG і выстаўляем якасць - Высокае - 60. Якасць - 60 - гэта як раз тое аптымальнае суадносіны якасць / вага файла.
Звярніце ўвагу на вагу файла пасля захавання - 250,9 Кб. А было бо 1,47 Мб, вага скараціўся крыху больш у 5 разоў.
Чаму мы выбралі фармат JPG, а не PNG або GIF? Фармат JPG гэта якраз той фармат пры якім аптымізацыя графічнага файла будзе максімальным. Але варта мець на ўвазе, што гэты фармат не падтрымлівае празрыстасць. Для падтрымкі празрыстасці варта выкарыстоўваць фармат PNG, але вага файла ў такім фармаце павялічваецца ў разы. GIF фармат выкарыстоўваюць для невялікіх файлаў (абразкі) або для анімаваных малюнкаў.
Спосаб, што мы разгледзелі вышэй дазваляе аптымізаваць карцінкі па адным. Ёсць, вядома, у фотошоп функцыянал для масавай апрацоўкі, але я ў ім так і не разабраўся. Для масавага змены памераў малюнкаў я выкарыстоўваю невялікую праграмку - XnView MP. Я запісаў невялікі відэаагляд па працы з гэтай праграмай, можаце паглядзець. Асабліва парадавала мяне праграма тым, што на выхадзе атрымліваліся ўжо аптымізаваныя файлы для Web, прычым яшчэ аказалася, што XnView MP лепш аптымізуе карцінкі, чым фотошоп.
І апошняе, хацелася б сказаць, што на многіх сайтах ўжо закладзены функцыянал абрэзкі фатаграфій пры загрузцы. Г.зн. фатаграфіі абразаюцца па зададзеных налад. Але, як я правяраў скрыпт загрузкі і абрэзкі малюначкаў не так добра аптымізуе карцінкі пад Web, як, напрыклад, гэта зробіць фотошоп. Г.зн. я браў тую карцінку, якая ўжо была апрацавана загрузнікам і праганяў яе праз фотошоп. У выніку мне ўдавалася сціснуць памер у яшчэ некалькі разоў.
Напрыклад, такі скрыпт-загрузнік фота варта на рухавічку WordPress. Але тым не менш якія б ні стаялі загрузнікі я заўсёды захоўваю ўсе карцінкі для сайта ў фотошоп для Web і толькі пасля гэтага можна атрымаць аптымізаваным малюнак на сайце не ў шкоду якасці.
Вось і ўсё, што я хацеў сказаць з нагоды аптымізацыі малюнкаў для сайта. Калі вы ведаеце якія-небудзь іншыя праграмы для аптымізацыі, то буду рады калі падзяліцеся ў каментарах.
Усім пакуль. Да новых сустрэч!
праверка арфаграфіі
Што такое аптымізацыя карцінкі і навошта іх наогул аптымізаваць?А вы падумалі пра карыстальнікаў мабільнага інтэрнэту?
