Хуткасць загрузкі старонкі - вельмі важны фактар, які ўплывае на зручнасць выкарыстання і канверсію старонкі, таму, я лічу, што неабходна прадпрымаць хоць бы самыя простыя дзеянні для памяншэння ўплыву гэтага фактару.
Графіка нярэдка з'яўляецца адной з самых «цяжкіх» складнікаў web-старонак з пункту гледжання памеру дадзеных. Гэта азначае, што яе памер напрамую ўплывае на хуткасць загрузкі старонкі. Ўплыў аказвае як памер перадаваных дадзеных, так і колькасць элементаў (кол-ць запытаў да сервера). Абодва гэтыя значэння пажадана мінімізаваць.
Мінімізацыя памераў файлаў з выявамі
Зразумела, у залежнасці ад малюнка, варта падбіраць найбольш прыдатны фармат.
Для шматколерных складаных малюнкаў змяшчаюць градыенты, напрыклад, фатаграфій, у большасці выпадкаў падыдзе JPEG з якасцю «на вока». Звычайна я павялічваю ступень сціску для кожнага малюнка да таго часу, пакуль не пачынаюць з'яўляцца прыкметныя артэфакты або каляровыя скажэнні.
Для больш простых малюнкаў, якія змяшчаюць вялікія вобласці аднаго колеру (т.зв. «вектарныя выявы») або малюнкаў з малым колькасцю кветак лепш выкарыстоўваць PNG, бо гэты фармат паказвае выдатныя вынікі сціску без скажэнняў. У выпадку ж, калі патрэбна празрыстасць, асаблівага выбару і няма: GIF, PNG. Першы я лічу састарэлым, таму заўсёды выкарыстоўваю PNG. У любым выпадку, ніколі не перашкодзіць правесці параўнанне і выбраць з гэтых двух варыянтаў найбольш аптымальны. У большасці выпадкаў гэтых двух фарматаў хопіць.
Але гэта яшчэ не ўсё
Праграмы апрацоўкі малюнкаў далёка не заўсёды маюць мэта выдаць файл меншага памеру. Яны дадаюць да карысным дадзеных розную метаінформаціі, якую можна без наступстваў выдаліць, і не заўсёды выкарыстоўваюць самыя аптымальныя алгарытмы. У многіх выпадках файлы можна палегчыць яшчэ на 10-30%.
Пры жаданні ў інтэрнэце можна знайсці мноства розных аптымізатараў для кожнага фармату асобна. Гэта не заўсёды зручна, бо іх трэба перабіраць і вышукваць лепшы варыянт.
Хачу распавесці аб простым інструменце, які з'яўляецца «камбайнам» і выкарыстоўвае адразу мноства розных утыліт, выбіраючы найбольш эфектыўны варыянт для кожнага канкрэтнага малюнка. Любы набор графікі з дапамогай яго можна аптымізаваць у адзін клік.
праграма FileOptimizer
Досыць перацягнуць неабходныя файлы і націснуць на кнопку «Optimize all files»
Прадстаўлены набор файлаў быў захаваны з дапамогай Photoshop, утрымлівае некалькі вялікіх фонавых малюнкаў і кучу дробных дэкаратыўных элементаў.
Памер файлаў:
Да аптымізацыі: 966 Кбайт
Пасля аптымізацыі: 800 Кбайт
Як відаць на скрыншоце, FileOptimizer дазволіў сэканоміць 16% ад аб'ёму ўсіх файлаў праекта, што склала каля 166 Кбайт. Па-мойму выдатная эканомія для аднаго кліку і пары хвілін чакання!
Спампаваць праграму FileOptimizer можна тут .
Наступным крокам кліенцкай аптымізацыі можа быць памяншэнне колькасці запытаў да сервера, за кошт змяншэння колькасці файлаў з малюнкамі. Гэта можна зрабіць ужыўшы тэхніку CSS-спрайтов. Калі коратка, то малюнка склейваюцца ў адно або некалькі вялікіх малюнкаў. Патрэбная частка адлюстроўваецца з дапамогай CSS-ўласцівасці background-position: XY;