կայքի պատկերների օպտիմիզացում

Նկարների օպտիմալացումը WordPress-ի կատարողականության ամենաբարձր եկամտաբեր ասպեկտներից մեկն է. նույն էջի կառուցվածքով և նույն թեման օգտագործելով՝ միայն պատկերի ֆայլի չափը, չափերը, ֆորմատը և փոխանցման մեթոդը ճիշտ ընտրելը հաճախ անմիջապես բարելավում է բեռման արագությունը։

Բայց պատկերների օպտիմալացումն էլ ամենահեշտն է, որ մարդուն “ինչքան շատ կարգավորում է, այնքան ավելի է խառնում”, և պատճառը ոչ թե տեխնոլոգիայի չափազանց բարդ լինելն է, այլ այն, որ տեղեկատվությունը չափազանց մասնատված է։
Դուք կարդացել եք մի քանի հոդվածներ և տեղեկացել “կոմպրեսիա”, “WebP/AVIF” և “lazy loading” մասին, բայց երբ նայում եք պլագինի նկարագրությանը, այնտեղ գրված է “100 անվճար կրեդիտ ամսական”, “20MB անվճար” և “1 կրեդիտ մեկ պատկերի համար” — և որքան շատ եք կարդում, այնքան ավելի շփոթվում եք։ Արդյո՞ք անվճար թույլատրելիք բավարար է։ Ինչպե՞ս են հաշվարկվում վճարները։ Արդյո՞ք դուք “նույն բանը” սխալ եք հասկացել։ Եվ ամենակարևորը՝Արդյո՞ք դա իսկապես աշխատեց, երբ դու ավարտեցիր։

Այս հոդվածը անում է ընդամենը երեք բան:

1. Ահա մի պրակտիկ խորհուրդ։Ճանապարհային քարտեզ(Առաջին հերթին ինչ անել, հետո ինչ անել)
2. Խնդրում ենք մանրամասն բացատրել այն տարբերակները, որոնք դուք դիտարկում եք (ինչն է հստակ տարբերակում անվճար և վճարովի տարբերակները և ովքեր են դրանցից յուրաքանչյուրի համար առավել հարմար)
3. Ահա ամենատարածված թերությունները, նախապես թվարկված (որպեսզի ավարտելուց հետո ժամանակ չծախսեք դրանք փնտրելու և շտկելու վրա)

1. Հիմունքներ: ինչ է ներառում WordPress-ը և ինչ չի ներառում

Եթե նախապես չհասկանաք, թե WordPress-ի միջուկը արդեն ինչ է արել, հավանական է, որ առաջանան երկու իրավիճակ:

• Մեր տրամադրության տակ եղած “անվճար հնարավորություններից” օգտվելու փոխարեն մենք ժամանակն ու գումարը վատնեցինք անիվը նորից հայտնաբերելով։
• Ես կարծում էի, որ WordPress-ը “ավտոմատ կերպով կվերածի բոլոր հին պատկերները WebP/AVIF”, բայց պարզվեց, որ չի անում։

WordPress-ի միջուկը արդեն ներառում է այս հիմնական հատկությունները:

• Հարմարվող պատկերներ (srcset/sizes)WordPress 4.4-ից սկսած միջուկը կհայտարկի պատկերներ։ srcset 与 sizes... և օգտագործում է վերբեռման ընթացքում ստեղծված բազմաչափ պատկերները՝ թույլ տալու զննարկչին ընտրել և բեռնել էկրանի պայմաններին առավել համապատասխան ռեսուրսները։
• Տեղայնացված ծույլ բեռնումWordPress 5.5-ից սկսած, պատկերների համար բնիկ ծույլ բեռնումը ըստ HTML ստանդարտների ակտիվացվում է նախնական կարգավորմամբ։ loading Գույքի իրականացում
• Աջակցում է WebP վերբեռումներինWordPress 5.8-ից սկսած՝ կարող եք WebP ֆայլեր վերբեռնել և օգտագործել նույն կերպ, ինչպես JPEG և PNG (եթե ձեր հոստինգի միջավայրը աջակցում է WebP-ին):
• Աջակցում է AVIF վերբեռումներինWordPress 6.5-ից սկսած՝ AVIF ֆայլերը կարելի է վերբեռնել և օգտագործել նույն կերպ, ինչպես JPEG և PNG ֆայլերը (կախված հյուրընկալող միջավայրի աջակցությունից):

Սակայն խնդրում ենք նկատի ունենալ՝
“Բեռնելու/օգտագործելու աջակցություն” ≠ “ավտոմատ փոխարկում/ավտոմատ առաքում”
Այսինքն՝ նույնիսկ եթե դու արդեն WP 6.5 ես օգտագործում, քո մեդիա գրադարանում եղած JPG/PNG ֆայլերը ինքնուրույն չեն դառնա WebP/AVIF, և դու նաև ավտոմատ չես ստանա “բրաուզերի հնարավորություններին համապատասխան AVIF/WebP արտածել և չաջակցող բրաուզերների դեպքում վերադառնալ սկզբնական պատկերին” ամբողջական շղթան․ այս մասը սովորաբար պետք է լրացվի հավելվածներով կամ ծառայություններով։

2. Ճանապարհային քարտեզ. պատկերի օպտիմալացման 5-քայլանի ուղեցույց

Ինչ անել, ինչու, ինչ է համարվում անցում և որոնք են ընդհանուր թերությունները։

2.1 Առաջին հերթին ճիշտ սահմանեք “չափերը” (ամենահեշտը անտեսել, բայց այն, որը ապահովում է առավել մեծ օգուտներ)

Շատ կայքեր դանդաղ են ոչ թե այն պատճառով, որ դրանք օպտիմալացված չեն, այլ որովհետևՆերբեռնել է պատկեր, որը շատ ավելի մեծ է ցուցադրման տարածքից։：
Օրինակ, եթե էջը իրականում ընդամենը 900 պիքսել լայնություն ունի, բայց դուք ստիպում եք այցելուներին ներբեռնել բնօրինակ 3000 պիքսել լայնությամբ պատկերը, զննարկիչը պարզապես այն ներբեռնում է, ապա ցուցադրման համար փոքրացնում։ Սա վատնում է թողունակությունը, մեծացնում դեկոդավորման ժամանակը և դանդաղեցնում է առաջին էկրանի բեռման ժամանակը։

WordPress 4.4 և ավելի նոր տարբերակների համարՀարմարվող պատկերների մեխանիզմ（srcset/sizes) հատուկ նախագծված էր հենց այս խնդիրը լուծելու համար։

Ի՞նչ է համարվում անցում:

• Էջը հեռախոսով բացելիս ներբեռնված պատկերի չափը նկատելիորեն փոքր է, քան աշխատասեղանին
• Նույն պատկերի ֆայլի չափը տարբերվում է սարքի համաձայն (ոչ թե միշտ ներբեռնելով բնօրինակ պատկերը)

Ամենատարածված թերությունները:

• Որոշ թեմաներ կամ կոնստրուկտորներ պատկերները վերաբերվում են որպես CSS ֆոնային պատկերներ կամ ցուցադրում դրանք յուրահատուկ ձևով, ինչը կարող է շրջանցել srcset, որի արդյունքում մեծ պատկերը շարունակում է բեռնվել
• Եթե օգտագործում եք արտաքին պատկերների հոստինգի ծառայություններ կամ երրորդ կողմի պատկերային բլոկներ, կարող եք շրջանցել մեդիա գրադարանի կողմից գեներացված բազմաչափ համակարգը։

---

2.2 Սեղմում (ֆայլի չափի նվազեցում առանց որակի կորուստի)

Կոմպրեսիայի էությունը ոչ թե “փոքրը լավ է”, այլ այն, որ “տարբերությունը գրեթե չի նկատվում մերկ աչքով, սակայն ֆայլի չափը զգալիորեն կրճատվում է”։

Կանոնները հետևյալն են:

• Լուսանկարներ/իրական կյանքի կադրեր (պորտրետներ, ապրանքներ, բնապատկերներ)Նախապատվություն տալ կորուստային կոմպրեսիային (առավելագույն օգուտ)
• Շատ տեքստ պարունակող էկրանահարումներ/նկարներԿիրառեք ավելի պահպանողական սեղմում՝ տեքստը մշուշ չերևալու համար։
• Լոգո/ԻկոնԱռաջնահերթություն տվեք SVG-ին կամ զգուշությամբ օգտագործեք առանց կորուստների կոմպրեսիա (կորուստային կոմպրեսիան հեշտությամբ կարող է առաջացնել եզրերի մշուշություն)

Ի՞նչ է համարվում անցում:

• Էջերի պատկերների մեծ մասի ֆայլի չափերը զգալիորեն կրճատվել են։
• Չկա նկատելի աղմուկ, եզրերի մշուշում, գունային գոտիավորում կամ տեքստի մշուշում։

---

2.3 WebP / AVIF (Ֆորմատի քաղաքականություն՝ նույն մակարդակի հստակության համար փոքր ֆայլի չափ)

WordPress-ը այժմ աջակցում է ֆայլերի վերբեռնումին։ WebP (5.8) և AVIF (6.5)。
Այնուամենայնիվ, “հաջորդ սերնդի ֆորմատը” գործնական կիրառման մեջ դնելու համար սովորաբար անհրաժեշտ է լուծել երկու խնդիր:

1. Ինչպես զանգվածային կերպով փոխարկել պատմական մեդիա գրադարանը(Հակառակ դեպքում, դուք միայն օպտիմալացնելու եք “ապագայում վերբեռնվող նոր պատկերները”)
2. Պետք է պատճեն ստեղծե՞մ, թե՞ փոխարինե՞մ բնօրինակ պատկերը։(Սա կարևոր կետ է; հետագայում կկենտրոնանանք Plus WebP-ի “փոխարինել և ջնջել բնօրինակ պատկերը” ֆունկցիայի վրա։)

Խորհուրդ տրվող մոտեցում:

• WebP: ընդհանուր առմամբ նախնական ընտրություն (առաջարկում է ավելի հուսալի համատեղելիություն)
• AVIF: սեղմման ևս մեկ քայլ, որը հարմար է մեծ պատկերների, առաջին էկրանին մեծ պատկերների և պատկերասրահի պատկերների համար (բայց ավելիՇրջակա միջավայրի աջակցության վրա հենվող）

---

2.4 Օգտագործեք ծույլ բեռնումը ճիշտ (մի կիրառեք «մեկ չափ բոլորին» մոտեցում)

WordPress 5.5-ից սկսածՍտանդարտ թույլատրելի բեռնումՊատկեր
Այն նվազեցնում է սկզբնական ռենդերացման ժամանակ օգտագործվող թողունակությունը։

• Թուլ բեռնումը հարմար է էկրանից դուրս գտնվող ռեսուրսների համար։“
• Էջի վերին մասում գտնվող մեծ պատկերը (որը հաճախ առաջին էկրանին ամենակարևոր պատկերն է) ընդհանուր առմամբ հարմար չէ հետաձգված բեռնման համար։

---

2.5 Առաքման շերտ: CDN / Նկար CDN

Սեղմումը, չափսը և ձևաչափը լուծում են “ֆայլը ավելի փոքր ու ավելի հարմար” խնդիրը;
Այնուամենայնիվ, եթե պատկերները անընդհատ բերվում են հեռավոր օրիգին սերվերից, ցանցային ուշացումը դեռևս զգալիորեն կազդի օգտվողի փորձի վրա։ Այսպիսի դեպքերում անհրաժեշտ է “առաքման շերտի” լուծում (CDN/image CDN)։

Երկու տիպիկ մոտեցումներ:

• Քլաուդֆլեր Պոլանդիա：Cloudflare փաստաթղթավորումԱյս բաժինը ներկայացնում է պոլշերենում առկա կոմպրեսիայի մեթոդները (առանց կորուստների, կորուստային և WebP) և նշում է դրանց օգտագործումը format=auto Թույլատրվում են WebP և AVIF ֆորմատները։
• Ջեթփեք կայքի արագացուցիչ：Ջեթփեքի փաստաթղթավորումՍա նշանակում է, որ այն կօպտիմալացնի պատկերները և կբաշխի դրանք իր ցանցի միջոցով ստատիկ ռեսուրսների հետ միասին։

Նկարների օպտիմալացումը ապահովում է, որ նկարները կրճատվեն չափերով և համապատասխան կերպով չափափոխվեն։CDN: Ավելի մոտ և ավելի հուսալի առաքում

3. Մարշրուտի ընտրություն՝ հետևեք միայն երկու հիմնական երթուղիներին։

Նկարների օպտիմալացման ամենատարածված սխալը ոչ թե պլագին չտեղադրելն է, այլ չափազանց շատ պլագիններ տեղադրելը, ինչը հանգեցնում է կրկնակի մշակման:
A-ն կոմպրեսավորում է, B-ն նույնպես; A-ն փոխարկում է WebP/AVIF, B-ն նույնն է անում; A-ն փոխում է URL-ները, B-ն իրականացնում է URL-ների վերագրում—վերջում անգամ դու չես կարող գլուխ հանել, թե իրականում ինչ է կատարվում կայքում։

Կանոններ:

Պահպանեք մեկ մոտեցում՝ կամ ամբողջովին անվճար տեղական պահեստավորում, կամ ամպային կոմպրեսիայի երեք տարբերակներից մեկը։

• Route A (ամբողջովին անվճար տեղական):Բացի WebP կամ AVIF + EWWW Image Optimizer(կամ ընտրեք միայն մեկը)
• Բ տարբերակ (Ընտրեք երեք ամպային կոմպրեսիայի մեթոդներից մեկը):ShortPixel / Imagify / TinyPNG

---

3.1 Առաջին տարբերակ. Ամբողջովին անվճար տեղական հոստինգ (WebP կամ AVIF կամ EWWW-ով)

Այս երթուղու հիմնական առանձնահատկություններն են՝

• Դուք չեք հենվում երրորդ կողմի կոմպրեսիոն ծառայությունների վրա, որոնք գանձում են ամսական քվոտայով կամ յուրաքանչյուր ֆայլի համար (չնայած որոշ ֆունկցիաներ կարող են մատչելի լինել որպես ընտրովի ծառայություններ)
• Թերությունն այն է, որ խմբաքանակային մշակումը կարող է ծանրաբեռնել սերվերը CPU/IO-ի առումով, ինչը պահանջում է ավելի ուշադիր լինել “ռազմավարություն և ռիսկ” հարցերում։”

3.1.1 Պլյուս WebP կամ AVIFՀիմնական հասկացությունը “ստեղծում/փոխարինում” է; այն ավանդական իմաստով “կոմպրեսիոն գործիք” չէ։”

• Նկարների ամբողջական հավաքածու ստեղծելիս:Առաջնային պատկերի ֆայլի ID-ն կփոխարինվի WebP/AVIF ֆայլի ID-ով, սկզբնական ֆայլը կջնջվի, և բովանդակության մեջ առկա բոլոր URL հասցեները նույնպես կփոխարինվեն։。
• Պլագինը տրամադրում է WP-CLI հրամաններ և խորհուրդ է տալիս, որ WP-CLI-ն ավելի հուսալի է մեծ թվով ֆայլերի հետ աշխատելիս։

Սա նշանակում է՝ այն պարզապես “հանգիստ ձևով ձեր համար WebP ֆայլ չի ստեղծում”, այլ կարող է լինելԳույքի փոխանցում(հատկապես եթե դուք ակտիվացրել եք “Փոխարինել և ջնջել բնօրինակը” տարբերակը)

Երկու ռեժիմների միջև տարբերությունը

Առաջին տարբերակ՝ պահպանել բնօրինակ պատկերը և ստեղծել WebP/AVIF պատճեններ (ավելի հուսալի)

• Առավելություն՝ համատեղելիության խնդիրներ առաջանալու դեպքում վերադարձնելը ավելի հեշտ է։
• Թերություն՝ սկավառակի օգտագործումը կաճի (սկզբնական պատկեր + նոր ֆորմատ + մի քանի մինիատյուրների չափեր)

Մեթոդ 2. Փոխարինել և ջնջել բնօրինակ պատկերը (ավելի արմատական)

• Առավելություններ: սկավառակը այնքան արագ չի լցվի; ներքին հղումները ավտոմատ կերպով փոխարկվում են նոր ֆորմատին
• Ռիսկ՝ եթե դուք “փոխում եք ակտիվը + փոխում եք հղումը”, համատեղելիության խնդիրների հայտնաբերման ծախսը կլինի ավելի բարձր (հատկապես երբ որոշ արտաքին համակարգեր կամ թեմայի տրամաբանություն կախված են սկզբնական ֆայլի անունից/ուղուց/ձևաչափից)

WebP-ի կամ AVIF-ի ընդհանուր թերությունները

1. Ամբողջ գրադարանը փոխարինելուց հետո որոշ էջերում պատկերները սխալ են ցուցադրվում։
   Պատճառը սովորաբար ոչ թե “պատկերը կոտրված է”, այլ այն, որ շղթայի որևէ հատվածում ինչ-որ բան սխալ է գնացել՝ օրինակ URL-ի փոփոխություն, քեշավորում կամ մինիատյուրաների քաղաքականություն։
2. Քանի որ ավելի շատ նախադիտման պատկերակներ կան, այնքան ավելի մեծ է փոփոխությունների շրջանակը։
   WordPress-ում պատկեր վերբեռնելիս ստեղծվում են մի քանի չափսեր; թեմաներն ու պլագինները կարող են ավելացնել ևս ավելի շատ: Լիակատար փոխարինումը նշանակում է, որ դուք կարող եք փոփոխել շատ մեծ թվով ֆայլեր:
3. Միայն ֆորմատի փոխարկումը պարտադիր չէ, որ ապահովի ֆայլի ամենափոքր չափը։
   WebP և AVIF ֆայլերը սովորաբար ավելի փոքր են, սակայն չափաչափման և կոմպրեսիայի ռազմավարությունները շարունակում են մնալ կարևոր։ Մի վերաբերվեք Plus WebP-ին որպես մեկ սեղմումով լուծում արագ բեռման ժամանակների համար։

---

3.1.2 EWWW Image OptimizerԱնվճար տեղական կոմպրեսիայի առաջատար մատակարար

EWWW պլագինի էջը ունի շատ հստակ նպատակ:

• Այն կարող է օպտիմալացնել ձեր սերվերի պատկերները տարբեր գործիքների (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp և այլն) միջոցով։
• Եթե ձեզ անհրաժեշտ է ավելի բարձր կոմպրեսիա կամ ցանկանում եք խնայել CPU-ի վրա, կարող եք նաև ձեր սերվերին (ընտրովի) տեղափոխել CPU սպառող մշակումը։

Route A-ում EWWW-ն ինչ դեր պետք է խաղա?

Եթե դուք Plus WebP-ն օգտագործում եք “ֆորմատի միգրացիայի/փոխարինման ռազմավարության” համար, ապա EWWW-ն ավելի հարմար է դրա համար:

• Կոմպրեսիա և ծավալային օպտիմալացում(հատկապես հում ակտիվների, ինչպիսիք են JPG և PNG ֆայլերը, օպտիմալացումը)
• Պատմական մեդիա գրադարանի խմբային օպտիմալացում(Ուղղված է ծավալը նվազեցնելուն, ոչ թե URL-ը փոխարինելուն)

EWWW-ի տիպիկ թակարդ

1. Փաթեթային օպտիմալացման ընթացքում սերվերի բեռը մեծանում է։
   Սա պայմանավորված է նրանով, որ տեղային կոմպրեսիան սպառում է CPU/IO։ Լուծումը ոչ թե դրա օգտագործումը դադարեցնելն է, այլ խմբաքանակներով մշակելը՝ ոչ պիկ ժամերին, և անհրաժեշտության դեպքում ընտրել տվյալների արտահանձնումը կամ ամպային լուծումները։
2. “WebP-ը գեներացվել է” պարտադիր չէ նշանակի, որ ֆրոնտենդը իրականում մատուցում է WebP։
   Շատ պլագիններ սխալ պատկերացում ունեն, որ գեներացիան մեկ բան է, իսկ առաքման ռազմավարությունները (օրինակ՝ վերագրումը, `picture` թեգերը և քեշի ժամկետի ավարտը)՝ բոլորովին այլ։
3. Կրկնօրինակում է մեկ այլ պլագինի ֆունկցիոնալությունը
   Եթե ընտրեք Ա տարբերակը, փորձեք խուսափել լրացուցիչ ամպային կոմպրեսիոն ծառայություններից, ինչպիսիք են ShortPixel-ը, Imagify-ը կամ TinyPNG-ը; եթե ընտրեք Բ տարբերակը, մի միացրեք Plus WebP-ում փոխարինման տրամաբանությունը։ Հիմնական սկզբունքն է՝Պահպանեք մեկ գործողությունների պլան։

---

3.2 Բ տարբերակ՝ ընտրեք ամպային կոմպրեսիոն երեք ծառայություններից մեկը (ShortPixel / Imagify / TinyPNG)

Այս պլանը իդեալական է նրանց համար, ովքեր ցանկանում են խնայել սերվերի ռեսուրսները, նախընտրում են խմբային մշակման անհոգ մոտեցումը և հարմար են օգտագործման վրա հիմնված կամ “վճարիր ըստ օգտագործման” վճարման համակարգին։
Այնուամենայնիվ, ամպային սեղմման վերաբերյալ ամենատարածված սխալ պատկերացումը հետևյալն է՝Ազատ թույլտվությունը պարզապես “ազատ թերթիկների” հարց չէ։Փոքր պատկերների չափերի քանակը, WebP/AVIF ֆորմատների գեներացումը և պատկերների բազմակի սեղմումը բոլորը զգալի ազդեցություն կունենան ռեսուրսների օգտագործման վրա։

Ստորև մենք կբացատրենք՝ անվճար և վճարովի տարբերակների միջև տարբերությունը, ինչպես է կրեդիտը հանվում, ամենատարածված թերությունները, որոնցից պետք է խուսափել, և որ տեսակի կայքերն են առավել հարմար այս ծառայությունների համար։

---

3.2.1 ՇորտՊիքսել100 անվճար կրեդիտ/ամիս, բայց կրեդիտները ավելի շատ են ծախսվում մանրապատկերների և WebP/AVIF-ի համար

Անվճար և վճարովի տարբերակների մասին ի՞նչ է խոսքը։

ShortPixel պլագինի նկարագրությունը հստակ նշում է՝

• Ամսական 100 անվճար կրեդիտ
• Կան նաև “ավելացուցիչ անսահմանափակ ամսական կրեդիտներ” (գնային մանրամասները ներկայացված են պլագինի էջում)
• Մենք նաև առաջարկում ենք “մեկանգամյա կրեդիտային փաթեթներ, որոնք երբեք չեն ավարտվում” (սկզբնական գների մասին տեղեկատվությամբ)

Նշում:

• Անվճար: Յուրաքանչյուր ամիս տրամադրվում է որոշակի քանակությամբ կրեդիտներ՝ թեթև կայքերում օգտագործելու կամ փորձարկման համար։
• Միանգամյա փաթեթ՝ հարմար է “մեծ մեդիա գրադարան ունեցող և ամեն ինչ միանգամից սպառել ցանկացող” կայքերի համար (գնում եք մեկ անգամ և օգտագործում մինչև վերջ, սովորաբար չի ժամկետանցվում)
• Ամսական/Անսահմանափակ՝ հարմար է այն կայանների համար, որոնք պահանջում են կանոնավոր պատկերների թարմացումներ և երկարաժամկետ, կայուն օպտիմալացում։

ShortPixel-ի պաշտոնական գիտելիքների բազան նաև առաջարկում է ուղեցույց “մեկանգամյա լիցենզիա ընդդեմ անսահմանափակ ամսական” թեմայով։Հստակ բացատրությունԱնսահմանափակ ամսական պլանը հաշվարկվում է ամսական (կամ տարեկան), առաջարկելով անսահմանափակ կրեդիտներ և CDN հաստատուն քվոտա; մեկանգամյա կրեդիտները չեն ավարտվում, ինչը ձեզ տալիս է ավելի մեծ վերահսկողություն օգտագործման նկատմամբ՝ ըստ անհրաժեշտության։

Ամենակարևորը՝ ինչպես են հաշվարկվում ShortPixel կրեդիտները?

ShortPixel պաշտոնական փաստաթղթավորում KB-ն շատ կոպիտ ձևով ասաց։

• Երբ WordPress-ում պատկեր եք վերբեռնում, այն ստեղծում է մի քանի մինիատյուրներ։
• Յուրաքանչյուր մինիատյուրայի օպտիմալացումը հաշվվում է որպես մեկ կրեդիտ։；
• Եթե ընտրեք WebP կամ AVIF ստեղծել,Յուրաքանչյուր WebP կամ AVIF տարբերակը բնօրինակ պատկերի և դրա մինիատյուրան կհաշվվեն որպես լրացուցիչ կրեդիտ։；
• Դուք կարող եք բացառել որոշ թումբնեյլներ օպտիմալացումից՝ կրեդիտների օգտագործումը նվազեցնելու համար։

կրեդիտների օրինակ：

Պատկերացրեք, որ վերբեռնում եք մեկ պատկեր, և թեման կամ պլագինը ստեղծում է ութ մինի պատկերներ:

• Օպտիմալացրեք միայն սկզբնական պատկերը և մինիատյուրները՝ 1 (սկզբնական պատկեր) + 8 (մինիատյուրներ) = 9 կրեդիտ
• Եթե դուք նույնպես ցանկանում եք գեներացնել WebP/AVIF, ավելացրեք յուրաքանչյուր վերոհիշյալ 9 տարբերակի հաջորդ սերնդի տարբերակը → ևս 9 կրեդիտ
  Մյուս խոսքով, կարող եք մտածել, որ դա “մեկ պատկեր” է, սակայն իրականում դրա արժեքը կարող է կազմել գրեթե “երկանիշ կրեդիտներ”։

Ուստի:“100 անվճար կրեդիտներ” չի նշանակում “100 անվճար պատկերներ”։

ShortPixel-ի ամենատարածված սխալները

1. Անվճար 100 կրեդիտները շուտով կավարտվեն
   Պատճառ՝ շատ մանրապատկերներ + WebP/AVIF ստեղծման լրացուցիչ կրեդիտներ
   Խորհուրդ：

• Առաջին հերթին գնահատեք կայքի թումբնեյլների քանակը։
• Հեռացրեք անպետք մինիատյուրների չափերը (օպտիմալացրեք միայն այն չափերը, որոնք իրականում կօգտագործվեն)
• Նախ որոշեք կոմպրեսիայի ռազմավարությունը, ապա գործընթացը իրականացրեք խմբաքանակներով՝ փորձարկում-սխալների վրա ժամանակ չվատելու համար։

2. Օգտագործեք այլ ֆորմատի փոխարկման պլագինների հետ միասին
   Եթե միացնեք Plus WebP փոխարինումը և թույլ տաք ShortPixel-ին ստեղծել և ներդնել հաջորդ սերնդի թեգեր, տրամաբանությունը կկրկնվի, ինչը դժվարացնում է խնդիրների լուծումը։ B տարբերակի դեպքում ShortPixel-ը ինքնուրույն է իրականացնում այս առաջադրանքը։
3. Կարծում էի՝ տեղադրելուց հետո հաստատ “առաջնամասը WebP/AVIF է տալիս”
   ShortPixel հավելվածի էջըԱյն կարող է փոխարկել WebP և AVIF ֆայլերը և ներառել հաջորդ սերնդի պատկերներ ֆրոնտենդային էջերում (օրինակ՝ թեգերի միջոցով):
   Բայց ավարտելուց հետո դեռ պետք է ստուգել արդյունքը։

---

3.2.2 Իմաջիֆայ: Ամսական 20MB անվճար; քվոտան հաշվարկվում է՝ հիմնվելով “սկզբնական պատկերի չափ + թումբնեյլների քանակ”; կրկնակի կոմպրեսիան կհանգեցնի կրկնակի հանումների

Ազատ հատկացում և գտնվելու վայր

Imagify-ի պաշտոնական գների էջըԴա բավականին հստակ նշված է։Անվճար հաշիվները ունեն ամսական 20MB քվոտա։。
Նրա պլագինի էջում նույնպես նշվում է, որ այն կարող է կոմպրեսավորել, չափափոխել և փոխարկել WebP/AVIF։

Քվոտան ինչպես է հանվում?

Imagify պաշտոնական փաստաթղթեր “Ինչպե՞ս է հաշվարկվում քվոտայի օգտագործումը?” բաժնում շատ հստակ բացատրվում է հաշվարկման մեխանիզմը։

• Թումբնեյլների քանակը ազդում է ռեսուրսների օգտագործման վրա։Օրինակ՝ եթե դուք ունեք 10 մանրապատկերի չափ, ապա 1 պատկեր օպտիմալացնելը կդառնա 11 պատկերի օպտիմալացում (բնօրինակ պատկեր + 10 մանրապատկեր), և դրանք բոլորը կնպաստեն քվոտայի սպառմանը։
• Նվազեցրեք քվոտան՝ հիմնվելով սկզբնական ֆայլի չափի վրա։Օրինակ, եթե դուք Imagify-ում վերբեռնեք 100 KB նկար, ձեր քվոտայից կհանվի 100 KB։
• Կոմպրեսիայի մակարդակի փոփոխությունն ու կրկնակի օպտիմալացումը կրկին կծախսի քվոտան։。
• Մեկ API-клюչը կարելի է օգտագործել մի քանի կայքերում, սակայն քվոտան դրանց միջև կիսվում է։

Սա Imagify-ի “հիմնական մոտեցումն” է։
Սա ավելի շուտ տվյալների փաթեթ է՝ որքան շատ բեռնեք, այնքան շատ տվյալներ կծախսի; որքան շատ թումբնեյլներ ստեղծեք, այնքան շատ տվյալներ կծախսի; և եթե ֆայլերը բազմիցս կրկնակի սեղմեք, այն կրկին ու կրկին տվյալներ կծախսի։

Imagify-ի քվոտաների հեշտ հասկանալի օրինակ

Ենթադրենք՝ դուք վերբեռնում եք 800 ԿԲ չափով մեկ բնօրինակ նկար, իսկ կայքը ստեղծում է 8 մանրապատկեր։

• Imagify-ով օպտիմալացնելիս “օրիգինալ պատկերը և 8 մինիատյուրները” ներառվում են (եթե ընտրեք “Բոլորը օպտիմալացնել”), ինչը նշանակում է, որ այս գործողությունը կծախսի քվոտա, որը գրեթե հավասար է բոլոր այս ֆայլերի ընդհանուր չափին։
  Սա է պատճառը, որ որոշ կայքեր արագ սպառում են իրենց “20MB” քվոտան։ Պատճառը ոչ թե Imagify-ի ոչ բավարար հզորությունն է, այլ այն, որ դուք վերբեռնում եք չափազանց մեծ պատկերներ, ստեղծում չափազանց շատ մինի պատկերներ և, հավանաբար, բազմիցս փորձարկում տարբեր սեղմման մակարդակներ։

Imagify-ի ամենատարածված թերությունները

1. Անվճար 20MB-ը բավարար չէ “ամբողջ կայքի պատմության մաքրման” համար”
   20MB-ն ընդհանուր առմամբ ավելի հարմար է թեստավորման և փոքր թարմացումների համար; եթե ձեր մեդիա գրադարանը արդեն մեծ է, այն մեկ անգամով մաքրելը, ամենայն հավանականությամբ, կպահանջի արդիականացում։
2. Կոմպրեսիայի մակարդակը բազմիցս կարգավորելը հանգեցնում է քվոտայի բազմիցս սպառմանը։
   Imagify: պարզ բացատրությունՎերօպտիմալացումը կրկին կծախսի քվոտան։
   Մենք խորհուրդ ենք տալիս այս էջում հստակ ներկայացնել “ռազմավարությունը”:

• Սկսեք օգտագործել մի քանի պատկեր՝ կոմպրեսիայի մակարդակը և տեսողական որակը որոշելու համար։
• Երբ ռազմավարությունը վերջնական տեսքի է հաղորդվել, այն իրականացրեք խմբաքանակներով։
  Խուսափեք ամբողջ տվյալների բազայում փորձարկում-սխալների մեթոդից։

3. Մեկ API բանալին մի քանի կայքերում կիսելը հանգեցնում է քվոտաների “հանելուկային” նվազմանը։”
   Եթե նույն API բանալին օգտագործեք մի քանի կայքերում, քվոտաները կկիսվեն։
   Ուստի թիմային կամ բազմակայանային սցենարներում լավագույնն է պարզաբանել, թե որ կայաններն են ռեսուրսները կիսում, և որոնք են գործում անկախ, որպեսզի խուսափել բյուջեի գերազանցումներից։

---

3.2.3 Թայնի Փի Էն Ջեյ(Tiny Compress Images): ամսական 500 անվճար կրեդիտ; WebP/AVIF-ի փոխարկումը ենթադրում է հավելյալ 1 կրեդիտ մեկ չափի համար“

Ազատ տրվող նպաստներ և դրանց հաշվարկման կարգը

TinyPNG-ի WordPress հավելվածի էջը գրված է շատ հստակ։

• Ամսական 500 անվճար կրեդիտ
• “Սովորական WordPress տեղադրման” դեպքում մոտավորապես հնարավոր է սեղմել Ամսական մոտավորապես 100 պատկեր
• Այնուամենայնիվ, եթե AVIF կամ WebP փոխարկումը միացված է:Յուրաքանչյուր պատկերի չափը լրացուցիչ կծախսի մեկ կրեդիտ, ուստի, կարծում եմ, միակ տարբերակը այն կոմպրեսավորելն ու փոխարկելն է Մոտավորապես 50 պատկեր ամսական(Կախված է նրանից, թե քանի մինիատյուրի չափեր ունեք։)

Մինչդեռ Tinify-ն (TinyPNG-ի և TinyJPG-ի մշակողը) նույնպես API գների էջԽնդրում ենք նկատի ունենալ՝ գրանցվեք՝ ամսական 500 անվճար կոմպրեսիա ստանալու համար; սահմանը գերազանցելու դեպքում ձեզ կհաշվարկեն հաջող կոմպրեսիաների թվի հիման վրա, առանց պարտադիր բաժանորդագրության։

Մեկ նախադասությամբ ամփոփելու համար, թե ինչպես է աշխատում TinyPNG-ը:
Այն հաշվարկվում է կրեդիտներով. որքան շատ մինիատյուրների չափեր օգտագործեք և որքան ավելի շատ WebP/AVIF-ը միացնեք, այնքան ավելի արագ կծախսվեն ձեր կրեդիտները։

TinyPNG կրեդիտների հեշտ հասկանալի օրինակ

Պատկերացրեք, որ ձեր կայքը յուրաքանչյուր պատկերի համար ստեղծում է ութ փոքր պատկերի չափսեր:

• Միայն կոմպրեսիա՝ բնօրինակ պատկեր + 8 մինիատյուրներ → պահանջվում է 9 կրեդիտ
• Եթե WebP/AVIF փոխարկումը միացված է՝ յուրաքանչյուր չափի համար կհանվի հավելյալ կրեդիտ → ինչը կարող է գրեթե կրկնապատկել ընդհանուր գումարը
  Սա համապատասխանում է պլագինի էջում տրված նկարագրությանը. երբ փոխարկումը միացված է, անվճար քվոտան փոխվում է մոտավորապես “100 ամսական”–ից “50 ամսական”։

TinyPNG-ի ամենատարածված թերությունները

1. Ես կարծում էի, որ 500 կրեդիտը նշանակում է 500 պատկեր։
   Ոչ։ Այն գանձվում է յուրաքանչյուր “նկարի չափի/տարբերակի” համար։ Պլագինի էջում հստակ նշվում է, որ “փոխարկումը կարժենա լրացուցիչ 1 կրեդիտ յուրաքանչյուր նկարի չափի համար”։
2. Թեմայի/էլեկտրոնային առևտրի պլագինը շատ մեծ թվով պատկերի չափեր է ստեղծում, և անվճար քվոտան զգալիորեն նվազել է։
   Չափերը որքան շատ են, այնքան credits-ները ավելի հեշտ են մեծ ծախսվում։
3. Փոխարկումը ակտիվացնելուց հետո պարզեցի, որ իմ վարկային սահմանաչափը հանկարծ սպառվել է։
   Սա սխալ չէ; սա հաշվարկման համակարգի աշխատանքի ձևն է։
   Ռազմավարական առաջարկություններ:

• Եթե անվճար փուլը հիմնականում նախատեսված է կոմպրեսիայի և քաշի նվազեցման համար, կարող եք սկսել պարզապես կիրառելով կոմպրեսիա։ Երբ հաստատեք, որ կայքի կառուցվածքը կայուն է և իսկապես ձեզ անհրաժեշտ է հաջորդ սերունդը, կարող եք սկսել փոխարկումը։

4. Սցենարների ըստ առաջարկություններ՝ ինչպես ընտրել տարբեր տեսակի կայքերի համար

Նույնը WordPress-ի դեպքում էլ է․ բովանդակային կայքի, էլեկտրոնային առևտրի, պորտֆոլիոյի և անդամակցության կայքի “նկարների ծանրաբեռնվածության կետերը” նույնը չեն։

4.1 Բովանդակային կայքեր/բլոգեր (ներկայացնում են բազմաթիվ պատկերներ և հոդվածներ, միջին թարմացման հաճախականությամբ)

Առաջնահերթ առաջարկություններ:

1. Չափորոշման ռազմավարություն (քայլ 1)
2. Կոմպրեսիա (քայլ 2)
3. WebP (3-րդ քայլ)

Ավելի հարմար երթուղի:

• Եթե ցանկանում եք առանց խնդիրների տարբերակ՝ ընտրեք B տարբերակի երեքից մեկը (ShortPixel / Imagify / TinyPNG)
• Եթե ցանկանում եք անվճար տարբերակ՝ A երթուղին (Plus WebP + EWWW), սակայն առաջարկում ենք սկսել “Պահպանողական ռեժիմով (չհեռացնել բնօրինակ պատկերները)”, որպեսզի նախ գնահատեք ռիսկերը։

Հաճախ հանդիպող թերություններ:

• Հոդվածի էջի վերնագրային պատկերը շատ մեծ է, և ծույլ բեռման ռազմավարությունը թույլ է իրականացված։Այն կդանդաղեցնի առաջին էկրանը։

4.2 Առցանց առևտրի/արտադրանքի կայքեր (ներառում են բազմաթիվ մինիատյուրներ և պատկերների տարբերակներ; կայունությունը գերակա է)

Էլեկտրոնային առևտրում ամենատարածված խնդիրները ոչ թե “կոմպրեսիայի որակը թույլ է”, այլ այն, որ օպտիմալացումից հետո որոշ չափեր սխալ են, թումբնեյլները բացակայում են կամ ֆրոնտ-ենդի բաղադրիչները չեն կարողանում պատկերները բեռնել։

Առաջնահերթ առաջարկություններ:

1. Սկսեք զգուշությամբ՝ որդեգրեք պահպանողական կոմպրեսիայի ռազմավարություն; մի՛ փոխարինեք ամբողջ տվյալների բազան անմիջապես։
2. Մինիատյուրաների չափերի գնահատում։ Էլեկտրոնային առևտրի թեմաները սովորաբար ստեղծում են ավելի շատ չափեր, ինչը կարող է զգալիորեն մեծացնել տվյալների օգտագործումը (այսը հատկապես նկատելի է ShortPixel-ի և TinyPNG-ի դեպքում)։
3. Նախ անցկացրեք փոքրածավալ փորձարկում, ապա տարածեք այն ավելի լայն լսարանի վրա (այսը անչափ կարևոր է)

Ավելի հարմար երթուղի:

• Բ տարբերակը սովորաբար առանց խնդիրների ընտրությունն է՝ ShortPixel-ը, Imagify-ն և TinyPNG-ն բոլորը աջակցում են խմբային մշակմանը; կարևորն է հասկանալ քվոտաների համակարգը և նախապես գնահատել ծախսերը։
• Առաջին տարբերակը նույնպես ընդունելի է, սակայն Plus WebP-ի ID-ների գերագրման, բնօրինակ պատկերների ջնջման և URL-ների փոխարինման վարքագծի առումով պետք է ավելի զգույշ լինեք։ Քանի որ սա ակտիվների միգրացիա է, խորհուրդ չի տրվում անմիջապես իրականացնել ամբողջական փոխարինում։

4.3 Պորտֆոլիոներ/ֆոտոգրաֆիայի կայքեր (որտեղ պատկերի որակը վճռորոշ է, ֆայլերը մեծ են, և տեսողական գրավչությունը առաջնային է)

Առաջնահերթ առաջարկություններ:

1. Չափորոշման ռազմավարություն (ցուցադրման տարածքի վերահսկում)
2. Կոմպրեսիայի ռազմավարություն (ավելի լավ է ունենալ մի փոքր ավելի մեծ ֆայլ, քան կորցնել մանրամասները)
3. WebP/AVIF (մեծ պատկերների դեպքում առավելությունները ակնհայտ են, սակայն տեսողական որակը պետք է ստուգվի)

Ավելի հարմար երթուղի:

• ԻմաջիֆայՔանի որ քվոտան հանվում է ելնելով “սկզբնական պատկերի չափից”, այսպիսի կայքը հեշտացնում է ծախսերը վերահսկել (դուք մոտավորապես գիտեք, թե որքան կարժենա յուրաքանչյուր մեծ պատկերը), սակայն պետք է խուսափել դրանց կրկնակի կոմպրեսավորումից։
• ՇորտՊիքսելԵթե մինիատյուրների չափսերը շատ չեն, կրեդիտների օգտագործումը բավականին պարզ է; սակայն եթե ստեղծեք մեծ թվով չափսեր և հաջորդ սերնդի տարբերակներ, կրեդիտների ծախսը զգալիորեն կաճի, ուստի պետք է նախապես պլանավորել։

5. Քվոտա ընդդեմ հաշվարկի. մանրամասն վերանայում՝ արդյոք անվճար թույլատրելի չափը բավարար է

Ի վերջո ո՞րն ընտրելն է ավելի շահավետ, և անվճարը որքան ժամանակ կբավականացնի։

5.1 Երեք հաշվարկային մոդելներ

• ՇորտՊիքսել(վարկեր)Քրեդիտները հաշվարկվում են՝ հիմնվելով “սկզբնական պատկեր և թումբնեյլների քանակի” վրա։ WebP/AVIF ֆայլերի գեներացումը յուրաքանչյուր համապատասխան տարբերակի համար կհանգեցնի հավելյալ քրեդիտի գանձման։
• Իմաջիֆայ(MB քվոտա)Քվոտան հանվում է ըստ “սկզբնական ֆայլի չափի”; որքան շատ են թումբնեյլերը, այնքան ավելի շատ քվոտա է օգտագործվում; կրկնակի կոմպրեսիան կհանգեցնի լրացուցիչ քվոտայի հանումների։
• Թայնի Փի Էն Ջեյ(վարկեր): 500 կրեդիտ ամսական; WebP/AVIF փոխարկման միացումը կհանգեցնի հավելյալ վճար յուրաքանչյուր պատկերի չափի համար։

5.2 Արագ գնահատման մեթոդներ

Դուք կարող եք այն գնահատել հետևյալ կերպ՝

1. Ընտրեք որևէ “սկզբնական պատկեր, որը հաճախ եք վերբեռնում”, և ստուգեք դրա մոտավոր չափը (օրինակ՝ 300KB / 1MB / 3MB)
2. Դա կախված է նրանից, թե ձեր կայքը սովորաբար քանի մինիատյուրի չափ է ստեղծում (օրինակ՝ 5, 10 կամ 20)
3. Վճռեք՝ արդյոք ցանկանում եք գեներացնել WebP/AVIF (Այո/Ոչ)

Այնուհետև օգտագործեք ստորև բերված “մտավոր հաշվարկը”՝ սպառումը հասկանալու համար։

• ՇորտՊիքսելՅուրաքանչյուր պատկեր համարժեք է (1 + մինիատյուրների քանակ) կրեդիտների; եթե գեներացվում է WebP/AVIF, համարժեք է դրա կրկնակիին (քանի որ հաջորդ սերնդի տարբերակները նույնպես պահանջում են կրեդիտներ)
• ԻմաջիֆայՅուրաքանչյուր պատկերի համար նախատեսված քվոտան մոտավորապես հավասար է (սկզբնական պատկերի չափը + բոլոր թումբնեյլների ընդհանուր չափը); կոմպրեսիայի մակարդակի փոփոխությունն ու պատկերի կրկնակի կոմպրեսիան կհանգեցնեն քվոտայի հետագա նվազեցման։
• Թայնի Փի Էն ՋեյԱնվճար՝ 500 կրեդիտ․ եթե ձեր կայքում յուրաքանչյուր պատկերից ստեղծվում են բազմաթիվ չափեր և միացված է փոխակերպումը, անվճար պատկերների քանակը զգալիորեն կնվազի (փլագինի էջում տրված է “մոտ 100 պատկեր/ամիս” և “մոտ 50 պատկեր/ամիս” հստակ ակնկալիք)

6. Ռիսկերի բացահայտում

Ռիսկ 1. Խուսափեք նույն առաջադրանքը կատարող մի քանի պլագիններ ունենալուց

Սա աղետի ամենատարածված աղբյուրն է։“

• Մարշրուտ A:Plus WebP կամ AVIF + EWWW(Բաժանեք առաջադրանքները երկուսի միջև; միևնույն ժամանակ մի իրականացրեք և՛ փոխարկումը, և՛ առաքումը, կամ տեղադրեք դրանցից միայն մեկը)
• Բ տարբերակ՝ ShortPixel / Imagify / TinyPNG Ընտրեք երեքից մեկը։(Ընտրեք մեկը՝ կոմպրեսիան և հաջորդ սերունդը կառավարելու համար)

Ռիսկ 2: Բացի WebP-ի “ID-ի գերագրում / բնօրինակ պատկերի ջնջում / URL-ի փոխարինում” ֆունկցիաները կազմում են ակտիվների միգրացիա։

Կրկնելու համար:Պլյուս WebP Նկարագրությունը հստակ նշում է, որ մեկ ամբողջական գեներացիայի ընթացքում սկզբնական պատկերի ID-ն կփոխարինվի, սկզբնական ֆայլը կջնջվի, և բովանդակության URL-ը կփոխարինվի։
Սա նշանակում է, որ դա “ցանկացած պահին հետ կանչվող փոքր կարգավորում” չէ, այլ ակտիվների մակարդակով միանվագ փոփոխություն է։

Առաջարկվող ռազմավարությունը պետք է լինի՝

• Սկսեք փոքրածավալ թեստով (մի քանի տասնյակից մինչև մի քանի հարյուր)
• Հաստատեք, որ ֆրոնտենդի ցուցադրումը, մինիատյուրաները և քեշի թարմացումները բոլորը ճիշտ են աշխատում։
• Դիտարկեք ամբողջ տվյալների բազայի մշակումը

Ռիսկ 3․ Ամպային սեղմման “անվճար քվոտայի” իրական սպառումը կախված է մանրապատկերների քանակից և next-gen ընտրությունից

• ՇորտՊիքսելՓոքր պատկերակները և հաջորդ սերնդի հատկությունները զգալի ազդեցություն կունենան վարկերում։
• Թայնի Փի Էն ՋեյWebP/AVIF-ը միացնելու դեպքում յուրաքանչյուր նկարի չափի համար հավելյալ credit կհանվի
• Իմաջիֆայ՝ Սեղմեք՝ ըստ բնօրինակ նկարի չափի նշելու, որքան շատ լինեն մանրապատկերները, այնքան ավելի շատ կնշվի, ուժեղ սեղմելու դեպքում կրկին կկատարվի նշումը

Ռիսկ 4. “Ստեղծվել է WebP/AVIF”-ը չի նշանակում, որ “ճակատային մասը մատուցում է WebP/AVIF”

Շատերը կարծում են, որ փոխարկումից հետո իրենց կայքը չի արագացել; հիմնական պատճառը այն է, որ front-end-ը դեռ մատուցում է JPG/PNG ֆայլեր (caching-ի, rewriting-ի, tags-ի կամ browser negotiation-ի անհամապատասխանության պատճառով):

7. Ինչպե՞ս ստուգեմ, որ այն ազդել է, երբ ավարտեմ։

4 շատ պարզ ստուգակետեր:

1. Նույն էջը երկրորդ անգամ թարմացնելիս բեռման գործընթացը ավելի կայուն և արագ է՞(Որքան նկատելի են քեշավորման և օպտիմալացման ազդեցությունները?)
2. Բջջայինի և աշխատասեղանի բեռնվող նկարների չափերը արդյոք ակնհայտորեն տարբեր ենՊատասխանող աղբյուրների հավաքածու/չափեր Արդյոք գործում է）
3. Պատահականորեն ստուգեք մի քանի պատկեր՝ արդյոք կան WebP կամ AVIF ֆայլեր/ռեսուրսներ։Կայքն իսկապե՞ս օգտագործվում է հաջորդ սերունդ）
4. Նայեք մի քանի պատկերների վրա՝ մեծացրեք դրանք, որպեսզի տեսնեք՝ արդյոք դրանք նկատելիորեն մշուշ են կամ արդյոք տեքստը թվացյալ մշուշ է։(Կոմպրեսիան չափազանց ուժեղ է՞)

Եթե այս չորսն էլ կիրառելի են, դա նշանակում է, որ ձեր ընտրած երթուղին արդեն գործարկված է։ Հաջորդը անցեք “Առաքման շերտ”ընդհանուր առմամբ ավելի կայուն կլինի։

8. Գործողությունների առաջարկություններ

1. Առաջին հերթին ընտրեք երթուղի:

• Ես կցանկանայի այն հնարավորինս անվճար պահել։: Plus WebP կամ AVIF + EWWW (կամ տեղադրել դրանցից միայն մեկը)
• Ցանկանում եք խնայել սերվերի ռեսուրսները, վճարեք ըստ չափաքանակի՝ ավելի հանգիստ լինելու համարԸնտրեք ShortPixel-ը, Imagify-ը կամ TinyPNG-ը։

2. Սկսեք փոքրածավալ թեստով (մի քանի տասնյակ)
3. Մինչ խմբաքանակներով մշակելը ստուգեք, որ ամեն ինչ կարգին է։
4. Անհրաժեշտ է հետագա բարձրացնել առաքման կայունությունը։Կարդալ CDN արագացում

Հաճախակի տրվող հարցեր

1. Քանի պլագին պետք է տեղադրեմ? Կարո՞ղ եմ տեղադրել դրանք բոլորը?

Փորձեք հնարավորինս գնալ միայն մեկ երթուղով։

• Առաջին տարբերակ՝ WebP կամ AVIF + EWWW Image Optimizer (կամ տեղադրել դրանցից միայն մեկը)
• Տարբերակ B՝ ShortPixel / Imagify / TinyPNG երեքից մեկը
  Միևնույն կայքում միաժամանակ մի քանի հավելումներով “սեղմում/WebP/AVIF-ի փոխակերպում/URL-ի փոփոխում/մատակարարման վերաշարադրում” անելը ամենահեշտը խառնաշփոթ է ստեղծում և ամենադժվարն է դարձնում խնդիրների հայտնաբերումը։

2. Արդյո՞ք WordPress-ը արդեն չի աջակցում WebP/AVIF-ին։ Արդյո՞ք ինձ դեռ անհրաժեշտ է պլագին։

Պետք է հստակ տարբերակել.
“Բեռնելու/օգտագործելու աջակցություն” ≠ “ավտոմատ փոխարկում/ավտոմատ առաքում”
WordPress 6.5-ը նույնպես ավտոմատ չի կատարի հին JPG/PNG ֆայլերի զանգվածային փոխարկումը WebP/AVIF-ի, և նաև ավտոմատ չի ապահովի “ըստ բրաուզերի հնարավորությունների AVIF/WebP մատուցում և հետադարձ տարբերակ” ամբողջական շղթան։ Եթե ուզում եք, որ հին մեդիա գրադարանը նույնպես համընթաց լինի, սովորաբար պետք է պլագին կամ ծառայություն, որ լրացնի դա։

3. Պատկերի օպտիմալացման մեջ, իրականում ո՞ր քայլն է ամենա“բարձր եկամտաբերությունը” տալիս։

Սովորաբար Նախ ճիշտ սահմանեք չափերը (srcset/sizes)。
Շատ կայքեր դանդաղ են ոչ թե այն պատճառով, որ չեն կոմպրեսացվել, այլ այն պատճառով, որ ցուցադրում են միայն 900 պիքսել լայնությամբ էջ, մինչդեռ օգտվողներին ստիպում են ներբեռնել բնօրինակ 3000 պիքսել լայնությամբ պատկերը։ Կոմպրեսիան կարող է խնայել մի քանի կիլոբայթ, սակայն “սխալ չափերը” ստիպում են ձեզ անհիմն ներբեռնել տվյալների մի քանի անգամ ավելի մեծ ծավալ։

4. Ինչպե՞ս հաստատեմ, որ հիմա բեռնվում է “ավելի փոքր պատկերը”, ոչ թե միշտ ներբեռնվում է բնօրինակ պատկերը։

Դիտարկեք երկու երևույթներ:

• Էջը հեռախոսով բացելիս ներբեռնված պատկերի չափը նկատելիորեն փոքր է, քան աշխատասեղանին
• Նույն պատկերի ֆայլի չափը տարբերվում է՝ կախված այն սարքից, որի վրա այն բեռնված է։
  Եթե պատկերները միշտ ներբեռնվում են իրենց բնօրինակ չափսով, դա հաճախ պայմանավորված է նրանով, որ թեման կամ էջերի կառուցողը պատկերը վերաբերվում է որպես CSS ֆոնային պատկեր կամ հարմարեցված ելք, այդպիսով շրջանցելով մեդիա գրադարանի բազմաչափ աջակցությունն ու `srcset` հատկությունը։

5. “WebP/AVIF generated” արտահայտությունը պարտադիր՞ է նշանակում, որ ֆրոնտենդը WebP/AVIF է արտածում։

չի հավասար
Գեներացումը ամբողջական է միայն “ֆայլի մակարդակում”; WebP/AVIF-ը իրականում առջևի կողմին մատուցվո՞ւմ է, կախված է այնպիսի գործոններից, ինչպիսիք են վերագրումը, `picture` թեգի ռազմավարությունը, cache-ի կիրառումը և զննարկչի բանակցությունների արդյունավետությունը: Երբ ավարտեք, պետք է պատահական ստուգեք մի քանի պատկերների ռեսուրսների տեսակները:

6. Ի՞նչ ռիսկեր են կապված WebP-ի կամ AVIF-ի հետ։ Կարո՞ղ եմ մեկ սեղմումով ստուգում անցկացնել ամբողջ տվյալների բազայի վրա։

Վտանգը ոչ թե “կոմպրեսիայում” է, այլԳույքի միգրացիայի մակարդակների փոփոխություններ：

• Ամբողջ հավաքածուն գեներացնելիս սկզբնական պատկերային ֆայլերի ID-ները կարող են գերագրվել, սկզբնական ֆայլերը կարող են ջնջվել, և բովանդակության մեջ առկա URL-ները կարող են փոխարինվել։
  ՈւստիՄենք չենք խորհուրդ տալիս ամբողջ տվյալների բազան անմիջապես փոխարինել։Սկսեք փոքրածավալ թեստով (մի քանի տասնյակից մինչև մի քանի հարյուր գրառում) և համոզվեք, որ լիարժեք տվյալների բազայի հետ աշխատելուց առաջ ունեք աշխատող պահուստային պատճեն։

7. Ինչպե՞ս ընտրեմ Plus WebP-ի երկու ռեժիմների միջև՝ պահպանե՞լ բնօրինակ պատկերը, թե՞ փոխարինել և ջնջել այն։

Պարզ ասած՝

• Առաջին տարբերակ՝ պահպանել բնօրինակ պատկերը և ստեղծել WebP/AVIF պատճեններ (ավելի հուսալի)Հեշտ է վերադարձնել, սակայն պահանջում է ավելի շատ սկավառակի տարածք (սկզբնական պատկերը + նոր ֆորմատը + մի քանի մինիատյուրների չափեր)։
• Մեթոդ 2. Փոխարինել և ջնջել բնօրինակ պատկերը (ավելի արմատական)Դիսկը ընդլայնման հակված չէ, սակայն եթե փոփոխեք ակտիվները և հղումները, համատեղելիության խնդիրների լուծումը ավելի թանկ է նստում։
  Կայքը որքան ավելի բարդ է (էլեկտրոնային առևտուր, բազմաթիվ պլագիններ, տարբեր չափսեր), այնքան ավելի խորհուրդ ենք տալիս սկսել ավելի կայուն մոտեցումից։

8. Արդյո՞ք EWWW Image Optimizer-ի կողմից առաջարկվող անվճար տեղային կոմպրեսիան բավարար է՞ Կարո՞ղ է այն ծանրաբեռնել սերվերը։

EWWW-ն ավելի շուտ տեղական կոմպրեսիոն գործիք է. այն սպառում է CPU/IO։
Բեռի աճը խմբաքանակային օպտիմալացման ընթացքում սովորական է; սա չի նշանակում, որ համակարգը “վերջանում է”, այլ այն, որ մոտեցումը պետք է ճիշտ լինի՝ աշխատանքը կատարել խմբաքանակներով, ոչ պիկ ժամերին և անհրաժեշտության դեպքում ընտրել տվյալների արտահանձնումը կամ ամպային լուծումները։
Եթե դուք փնտրում եք առանց խնդիրների լուծում կամ եթե ձեր սերվերի ռեսուրսները սահմանափակ են, B տարբերակը ավելի հարմար է սերվերի համար։

9. ShortPixel-ը ամսական տրամադրում է 100 անվճար կրեդիտ, բայց ինչո՞ւ եմ զգում, որ դրանք սպառվում են ընդամենը մի քանի պատկերից հետո։

քանի որ “Credits”-ը չի վերաբերում «նկարների թվին»։”, մեծացվելու է մատնահետքերով և հաջորդ սերնդով:

• Յուրաքանչյուր մինի պատկերի համար՝ բնօրինակ պատկեր և հեղինակային նշում։
• Եթե ստեղծվում են WebP/AVIF ֆայլեր, յուրաքանչյուր համապատասխան տարբերակի համար կգանձվի հավելյալ վարկային միավոր։
  Այսինքն՝ այն, ինչ դուք կարող եք մտածել՝ “մեկ պատկեր” է, իրականում կարող է օգտագործել գրեթե “երկնիշ կրեդիտներ”։ ShortPixel

10. Ինչու՞ Imagify-ի անվճար 201 TP234T-ը ամսական այդքան արագ սպառվում է։

Imagify-ը ավելի շուտ նման է “տվյալների փաթեթի”.

• Ձեր հաղորդագրության համաձայնՕրինակային ֆայլի չափըՀանել քվոտայից
• Քանի որ ավելի շատ նախադիտման պատկերակներ կան, այնքան ավելի մեծ ռեսուրսներ են սպառվում։
• Կոմպրեսիայի մակարդակի փոփոխությունն ու կրկնակի օպտիմալացումը կրկին կծախսի քվոտան։
• Մեկ API-клюչը կարելի է օգտագործել մի քանի կայքերում՝ կիսվող քվոտաներով։
  Ուստի “20MB-ը շուտով կավարտվի” հաղորդագրությունը հաճախ առաջանում է պատկերների չափազանց մեծ լինելու, չափազանց շատ թումբնեյլների կամ կրկնվող փորձարկումների և սխալների պատճառով։

11. TinyPNG-ն առաջարկում է ամսական 500 անվճար կրեդիտ, ուրեմն ինչու՞ պլագինը ցույց է տալիս, որ ամսական միայն մոտ 100 պատկեր է հասանելի, և ինչու՞ այն նվազում է մինչև 50 պատկեր ամսական WebP/AVIF-ը միացնելուց հետո։

Սա այն պատճառով է, որ TinyPNG կրեդիտները նույնպես մեծացվում են “Dimensions/Variants” բաժնում։

• Ստանդարտ WordPress տեղադրումը սովորաբար ամսական մոտ 100 պատկեր է սեղմում։
• Ակտիվացնել AVIF կամ WebP փոխարկումը:Յուրաքանչյուր պատկերի չափը լրացուցիչ կծախսի մեկ կրեդիտ, այդ պատճառով ես հավանաբար կարող եմ ամսական միայն մոտ 50 պատկեր կոմպրեսավորել և փոխարկել (կախված է մինիատյուրաների չափերի քանակից):
  Այսինքն՝ 500 կրեդիտը չի հավասար 500 պատկերների։

12. Մեր կայքում քանի՞ մինի պատկերակ կա։ Ինչո՞ւ դրանք ունեն այդքան մեծ ազդեցություն։

WordPress-ում պատկեր վերբեռնելիս ստեղծվում են մի քանի չափսեր; թեմաներն ու պլագինները (հատկապես էլեկտրոնային առևտրի համար նախատեսվածները) կարող են ստեղծել նույնիսկ ավելի շատ:
Ամպային կոմպրեսիայի դեպքում կրեդիտներն կամ քվոտաները սովորաբար հաշվարկվում են ելակետային պատկերի և դրա թումբնեյլերի ընդհանուր գումարի հիման վրա, ուստի որքան շատ թումբնեյլեր կան, այնքան ավելի արագ կծախսվի անվճար թույլատրելի ծավալը։

13. Արդյո՞ք ծույլ բեռնումը միշտ արագացնում է գործընթացը։ Ինչո՞ւ որոշ մարդիկ ասում են, որ ծույլ բեռնումը իրականում դանդաղեցնում է այն։

Թուլատվական բեռնումը հարմար է “էկրանից դուրս ռեսուրսների” համար։
Եթե առաջին էկրանին գտնվող ամենակարևոր մեծ պատկերը նույնպես ուշանա, դա կարող է դանդաղեցնել սկզբնական բեռման փորձը։ Թեև WordPress 5.5-ում և ավելի նոր տարբերակներում ներդրված ծույլ բեռնումը լավ է, այն չպետք է կիրառել ամենուր։

14. Ե՞րբ ինձ անհրաժեշտ է CDN / Image CDN, եթե ես ընտրում եմ A կամ B երթուղին։

Սեղմումը, չափսը և ձևաչափը լուծում են “ֆայլը ավելի փոքր ու ավելի հարմար” խնդիրը;
CDN ապահովում է ավելի արագ և հուսալի առաքում։。
Երբ պատկերները հեռավոր օրիջին սերվերից բերվելու պատճառով առաջանում է զգալի ուշացում, յուրաքանչյուր պատկերի համար ավելացնելով CDN (օրինակ՝ Cloudflare Polish/Jetpack Site Accelerator) ընդհանուր առմամբ ապահովում է ավելի կայուն փորձ և բովանդակությունը դարձնում է ավելի հեշտ ընթերցվող։ WordPress CDN արագացում。

15. Երբ ավարտեմ, ի՞նչն է ամենահեշտ միջոցը ստուգելու, որ այն իսկապես աշխատում է։

Հաստատելու ամենաարագ միջոցը՝

• Նույն էջը երկրորդ անգամ թարմացնելիս բեռման գործընթացը ավելի կայուն և արագ է՞
• Կա՞ նկատելի տարբերություն պատկերի չափի մեջ շարժական և աշխատասեղանի տարբերակների միջև (srcset/sizes-ը աշխատո՞ւմ է ըստ նախատեսվածի)։
• Պատահականորեն ստուգեք մի քանի պատկեր՝ արդյոք կան WebP կամ AVIF ֆայլեր/ռեսուրսներ։
• Նայեք մի քանի պատկերների վրա՝ մեծացրեք դրանք, որպեսզի տեսնեք՝ արդյոք դրանք նկատելիորեն մշուշ են կամ արդյոք տեքստը թվացյալ մշուշ է։