Կայքի օպտիմալացում `խմբաքանակի վերամշակման միջոցով` jpegtran | optipng | pngout

1. Նախապայմաններ
2. Մենք օգտագործում ենք պատկերներ պատկերներ
3. Արխիվի կառուցվածքը
4. Աշխատանքների մասին կարճ հրահանգներ
5. Հավելումներ
6. x64 (aka andi)

Կայքի առանց պատկերների `անախրոնիզմ: Այսպիսով, շատ մարդիկ կարծում են, որ դա խելամիտ չէ: Հիշեք, թե որքան ժամանակ եք եղել վերջին անգամ կայքի համար եւ որքան ժամանակ եք եղել դրա վրա:

Տեքստային տվյալները շատ ավելի փոքր են, քան պատկերը: Սակայն մարդիկ հայտնի են սիրել իրենց աչքերը: Հետեւաբար, նկարները կլինեն պատմության անվերապահ առավելություն:

Ընդհանուր առմամբ, տեքստի մասին խոսելը նշանակում է թե բովանդակությունը, թե տեսողական ներկայացումը, ներառյալ պարբերությունները, ցուցակները, մեջբերումները, սեղանները: Այնուամենայնիվ, սա բավարար չէ, եւ նույնիսկ լրատվական կայքերը փորձում են լրագրողների պատկերները ներկայացնել:

Սկսենք ենթադրությունից, որ պատկերները անհրաժեշտ են: Դրանք կարող են լինել լուսանկարներ, դիագրամներ, պարզապես նկարագրել նկարները:

Երկար ժամանակ, երբ Պուտինը հավերժ չի թվում, ես առաջին բժշկական ինտերնետային պորտալն եմ արել: Անհրաժեշտ էր նկարներ տեղադրել ատլասի վրա: Ակնհայտ է, որ մարմնի անատոմիական կառույցը առանց պատկերների բավականին դժվար է պատկերացնել, առավել եւս `բառերով նկարագրելու: Եվ առանց հավելյալի, ես վերբեռնեցի նկարներ bmp (uncompressed ձեւաչափ): Պետք է ասեմ, որ իրենք խմեցին խմոր: Ավելին, որոշ բրաուզերներ չգիտեին, թե ինչպես ցույց տալ նման նկարներ:

Ուրեմն ինչու օպտիմալացնել պատկերը: Պարզ օրինակը լուսանկար է: Ժամանակակից հեռախոսները ունեն 8, 12 եւ ավելի մեգապիքսել տեսախցիկներ: 12 MP- ը համապատասխանում է 4000 × 3000 պիքսել պատկերին: Կախված տեսարանի բարդությունից, դա համապատասխանում է 2-5 մեգաբայտի չափի եւ նույնիսկ ավելին: Մի տասնյակ լուսանկարներ, եւ էջի չափը մեծանում է: Պատկերը համապատասխանում է բովանդակության տարածքին, ինչը նշանակում է, որ բրաուզերը նախ պետք է ներբեռնի ամեն ինչ, ընդլայնել այն եւ դրանից հետո այն ցուցադրել: Թույլերի համար պրոցեսորներ կամ քիչ քանակությամբ RAM- ի աղետ.

Այժմ պատկերացրեք, որ օգտագործողը կայքի դիտում է հեռախոսից: Այս դեպքում էջի բեռնումը պարզապես սպասելի չէ: Այսպիսով, նկարները պետք է նախապես կրճատվեն:

Ինչ-որ մեկը պնդում է, որ դրա մեջ ոչ մի դրույթ չկա, ժամանակակից CMS ավտոմատ կերպով նկարներ ներբեռնում է: Բայց արդյոք բոլորն ունեն իրենց կայքերը VPS- ի կամ VIP- տոկոսադրույքների վրա: Ներբեռնեք մեկ 12 MP- ի պատկերը, բայց այն մշակելու համար PHP- ն պետք է պահի 35 + մեգաբայտ (պահեստային տեսքով, փաստորեն ավելի) պահեստավորման համար, եւ այնուհետեւ դեռ գիտի, թե որքանով է ավելի փոքր պատճեն ստեղծելու համար: Արժե սակագները անմիջապես հարվածում են ռեսուրսների գերազանցմանը: Լավ հովանավորը կխնդրի օգտվողին այլեւս չկատարել, վատը չի անտեսել այն, քանի որ միայն փողը կարեւոր է նրա համար, այլ ոչ թե ծառայությունների կատարումը:

Եվ այսպես, մենք որոշեցինք ճիշտ վարվել: Մենք նախապես իջեցնում ենք պատկերները, ապա դրանք վերբեռնում ենք: Այնպես որ շարժիչը ավելի հեշտ է, եւ մարդիկ: Ամեն ինչ Չգիտեմ:

Շատ խմբագիրներ պահպանում են բնօրինակի կտորները (meta-information, ֆայլի ոչ պատկերի մասերը), լրացուցիչ տեղեկություններ պարունակող: Օրինակ, եթե հեռախոսում ինչ-որ բան եք նկարում, ֆայլը համակարգչին փոխանցեք, այնուհետեւ կտտացրեք այն աջ բանալիով եւ ընտրեք «Հատկություններ → Մանրամասներ», կտեսնեք սարքի տվյալները, որոնց տեսախցիկը եք լուսանկարել, կափարիչ արագությունը, ISO- ը եւ այլն: Օգտագործողի համար այս տեղեկատվությունը անիմաստ է, ուստի կարող եք ազատվել դրանից:

Դե, մտածեք դրա մասին, մեկ կտոր: Ինչ կա, պարունակող տեղեկատվության մի փունջ: Պատկերացրեք. Երբեմն դուք պատկերներ եք ստանում, որոնցում կան հարյուրավոր կիլոբայթներ: Պարզապես այսօր նրանք տեղադրեցին 584 KB չափսի լոգոն: Միեւնույն ժամանակ օգտակար տեղեկություններն ընդամենը 14 ԿԲ են: Ինչ վերաբերում է ինձ, ապա ամբողջովին չի համապատասխանում այցելուին վերբեռնելու համար 570 KB:

Եկեք ամփոփենք ենթահաշիվները: Կայքի օգտվողների համար լավ գործելու համար անհրաժեշտ է `

1. Կրճատել պատկերը պատկերը: Ցանկացած գրաֆիկական խմբագրին օգնելու համար:
2. Նետում ֆայլի մասերը ավելորդ են: Ի դեպ, օգտագործողը միայն նկար է պահանջում:
3. Փորձեք հետագայում նվազեցնել պատկերի չափը:

Առաջին պարբերությունը ներառում է յուրաքանչյուր ֆայլի առանձին աշխատանք: Ժամանակն է սպառում, բայց դա բերում է լավագույն արդյունք: Մենք բացում ենք յուրաքանչյուր ֆայլ, կտրում, կրճատում, ապա պահպանում ենք ընդունելի որակով:

Սակայն 2-րդ եւ 3-րդ պարբերությունները կարող են տրվել հատուկ ծրագրերի ողորմածության վրա: Ծրագրային ապահովման համար պատկերների հետ աշխատելը: Google- ը առաջարկում է հետեւյալ ծրագրերը.

• jpegtran jpg պատկերի ֆորմատով:
• optngng եւ pngout PNG պատկերների համար:

Մի քիչ մասին p. 3. Գրաֆիկական խմբագիրները սովորաբար չեն նեղանում դրա հետ: Նրանք պարզապես փրկում են պատկերը, ընտրելով ժամանակից շեղված սեղմման ալգորիթմները նույն կարգավորումներով, քանակական գործակիցներով եւ այլ բաներով: Բացի այդ, շատերը ազնվորեն փոխանցում են գոյություն ունեցող մեթա-տեղեկատվությունը եւ ավելացնում իրենց սեփականությունը, հետագայում ավելացնելով ֆայլի չափը:

Նախապայմաններ

Մեկ տարի առաջ նրանք սկսեցին խոսել ծառայության մասին: PageSpeed ​​Insights- ը Google- ից: Փաստորեն, դրանք որոնողական հսկայի հանձնարարականներն են, «ինչպես լավ անել»: Պարզապես մուտքագրեք կայքի հասցեով եւ ստանալ օպտիմալացման առաջարկների ցանկ: Այստեղ դուք կարող եք ներբեռնել արդեն իսկ օպտիմիզացված ռեսուրսները, ներառյալ պատկերները, ձեր կայքի համար: Ճիշտ է, դա վերաբերում է միայն ստուգված էջին:

Եթե ​​ունեք կայք, համոզվեք, որ նայեք այս հոդվածը . Մասնավորապես օգտակար է WordPress- ի օգտագործողների համար:

Մենք օգտագործում ենք պատկերներ պատկերներ

Թվում է, պարզ է `ներբեռնեք Google- ի կողմից սահմանված ծրագրերը եւ դրանց միջոցով սերվերի վրա բոլոր ֆայլերը վարեք: Խնդիրն այն է, որ այդ կոմունալները մխիթարվում են: Միաժամանակ նրանք ընդամենը 1 ֆայլ են վերցնում: Բայց մենք իզուր չենք վերջին հոդվածը ժամանակ անցկացրեց խմբաքանակի ֆայլեր, ճիշտ?

Հոդվածի մասին տեղեկությունները բավականաչափ են, որպեսզի ստեղծեք ձեր սեփական ֆայլերի մշակողը, այնպես որ ես չեմ նկարում, թե որտեղ է դա: Ես ուղղակի առաջարկում եմ ներլցնել պատրաստի ժողովը, որը ես օգտագործում եմ:

Ներբեռնման արխիվ (212 KB)

Արխիվի կառուցվածքը

Արխիվը պարունակում է [ OptimizeImg ] թղթապանակը: Սկսելու համար այն բացեք մի տեղ: Ես այն գտնվում եմ c: \ temp- ում, բայց դա նշանակություն չունի: Հիմնական բանը այն է, որ ճանապարհը չի պարունակում բացականչություն:

Հաջորդը: Այս թղթապանակը պարունակում է [ վերբեռնումների ] ենթաիրաժ: Այստեղ դուք պետք է տեղադրել ֆայլեր, որոնք պահանջում են վերամշակման: Լավագույն մասը այն է, որ դուք կարող եք գոնե թղթապանակի / ֆայլի կառուցվածքը մղել:

Լրացուցիչ ծրագրեր կան `jpegtran.exe | optipng.exe | pngout.exe- ը Google- ի կողմից առաջարկված շատ օգտակար ծրագիր է: Ներբեռնված համապատասխան պաշտոնական կայքերից / պահոցներից: Եթե ​​կասկածում եք, կամ պարզապես ցանկանում եք արդիականացնել, ներբեռնեք վստահելի աղբյուրից եւ փոխարինեք գոյություն ունեցողներին:

Եվ վերջապես, տոլզայի սիրտը: Batnichki:

• 1.բատ
• 3.բատ
• 3-go.bat
• 3-opti-to-out.bat
• 3-ից դուրս- opti.bat

Առաջին ֆայլը, 1.բատը, վերակազմավորում է կառուցվածքը [վերբեռնումներից]: 3 լրացուցիչ թղթապանակներ ստեղծվում են [jpg_jpegtran] [png_optipng] [png_pngout], իրենց տիպի մշակված նվազագույնի հասցված ֆայլերով (jpg- միայն * .jpg- ֆայլեր, նույնը png):

3.բոլորը հաջորդաբար գործարկում է երեք խմբաքանակի ֆայլեր.

• 3-go.bat- ը գրեթե նույնն է, ինչ 2.bat է: Skip to jpg / png ֆայլերը միջոցով minimizers. Աշխատանքի արդյունքը կլինի 3 թղթապանակ (տես վերը) համապատասխան պատկերներով:
• 3-opti-to-out.bat- ը ստեղծում է [png_optipng-to-pngout] թղթապանակը, որի մեջ գրված է optipng + pngout- ի կողմից մշակված ֆայլերը (հենց այս հերթականությամբ):
• 3-to-opti.bat- ը ստեղծում է [png_pngout-to-optipng] թղթապանակը, որի մեջ գրված է pngout + optipng- ի կողմից մշակված ֆայլերը: Նախորդի նման, միայն մեկ այլ հաջորդականությամբ:

Սկզբունքորեն, միայն 1.բատը բավարար է մեր կարիքների համար: 3x պայուսակներ հայտնաբերվել են խմբաքանակի նախնական տարբերակի հետազոտության եւ սխալների արդյունքում: Դա տեղի է ունեցել, որ սխալի ընթացքում pngout- ի ֆայլերը վերցված են optipng դիրեկտորիայից: Իսկ ինչն էր իմ անակնկալը, երբ հին տարբերակի մեկնարկը 1.5 անգամ ավելի փոքր չափ է տվել, քան թարմացված խմբաքանակի ֆայլում: Արդյունքում պարզվեց, որ կրկնակի մշակումը կարող է «բռնել» լավ նկարներ: Բայց դա գրեթե 2 անգամ ավելի է տեւում: Ուստի որոշեք ինքներդ ձեզ, եթե դա անհրաժեշտ է:

Աշխատանքների մասին կարճ հրահանգներ

1. Ներբեռնեք արխիվ .
2. Փաթեթը բացեք:
3. Գնալ դեպի նոր բացված [OptimizeImg] պանակը:
4. Բոլոր ֆայլերը, որոնք պահանջում են խեղդել, պատճենեք թղթապանակը [վերբեռնեք]:
5. Վազիր 1.բացեք եւ սպասեք: Եթե ​​կան բազմաթիվ ֆայլեր եւ դրանք png, սպասեք երկար ժամանակ:
6. Երբ սեւ պատուհանում հայտնվում է հաղորդագրություն, շարունակելու համար սեղմել անհրաժեշտության մասին, ամեն ինչ պատրաստ է: Մնում է ստեղծել FTP- ի միջոցով կազմված թղթապանակների եւ օրինակի բովանդակությունը, հին ֆայլերը վերագրելով:

Օրինակով: Թույլ տվեք բլոգ ունենալ WordPress- ի վրա: Բոլոր պատկերները պահվում են [ / wp-content / uploads / ] էջում : Գնալ դեպի կայքի թղթապանակ (միջոցով ftp), գնալ [ wp-content ] եւ պարզապես պատճենեք [ բեռնումները ] նույն անունը OptimizeImg- ին: Վազիր 1.բացեք եւ սպասեք: Աշխատանքի ավարտից հետո բովանդակությունը [jpg_jpegtran] (մենք գնում ենք այնտեղ), վերբեռնվում է սերվերին: Ներկայացված ֆայլերի վերաբերյալ հարցումները պատասխանվում են վերագրանցման միջոցով: Նմանատիպ հնարք png- ի համար, բայց նախ նայենք, թե որ թղթապանակը - [png_optipng] կամ [png_pngout] - տեւում է ավելի քիչ տարածք, լրացրեք այն բովանդակությամբ:

Մի վախեցեք վնասել այլ ֆայլերը: Batniki- ն աշխատում է միայն jpg / png- ի հետ, եւ միայն այս տեսակի պատկերները գրված են նորացված թղթապանակների վրա:

Հուսով եմ, որ ինչ-որ մեկը օգտակար կլինի: Հաջողություններ.

Հավելումներ

1. [OptimizeImg- ի] ուղին չպետք է լցնի նշաններ : եւ տոկոսը %
2. Սկսեք սկրիպտներ, քանի որ անհրաժեշտ է ադմինիստրատոր: Ավելին, այս դեպքում նրանք կարող են աշխատել:
3. ...

Հրատարակչություն

13 ժամ օնլայն

x64 (aka andi)

Կարծիքներ. 2846 Հրապարակումներ. 395 Գրանցումը `02-04-2009