Ինչպես օպտիմալացնել նկարները WordPress- ի համար, ամբողջական ուղեցույց

Ինչպես օպտիմալացնել նկարները WordPress- ի համար, ամբողջական ուղեցույց

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


Ինչու են պատկերները (այդքան շատ) կարևոր?

Կան շատ, շատ պատճառներ, թե ինչու եք ցանկանում (և պետք է) օգտագործեք պատկերներ ձեր գրառումներում և հոդվածներում.

  • Նկարները ծառայում են որպես տեսողական խթան `զանգահարման գործողություն կատարելու համար (CTA): CTA- ն կարող է լինել ցանկացած խնդիր, որը ցանկանում եք կատարել ձեր այցելուը: Սովորական CTA- ներն ընդգրկում են ձեր լրատուն բաժանորդագրվելը, ձեր հոդվածը սոցիալական մեդիայի տարածումը կամ ձեր ապրանքը գնելու մասին.
  • Պատկերներն ուժեղացնում են այն կապը, որը գրողը ձգտում է հաստատել ընթերցողի հետ.
  • Նկարները ավելի շատ փոխանցում են ավելի քիչ.

Հետևաբար, քվինտեսականորեն կարևոր է, որ մենք օգտագործենք ճիշտ պատկերներ մեր շնորհանդեսներում (բլոգային գրառում, ոչ պաշտոնական զեկուցում, իրական PowerPoint ներկայացում և այլն), որպեսզի ընթերցողի մտքում հետք թողնվի:!

Բայց սպասեք: Խնդիր կա!

Նկարները գրավում են ժամանակակից կայքերի կողմից օգտագործված թողունակության 63% -ը, ուստի ավելի ու ավելի կարևոր է, որ դրանք պատշաճ կերպով օպտիմիզացված լինեն արագության համար.

Էջի բեռնման ժամանակների մեկ վայրկյան ձգձգումը կարող է իջեցնել փոխակերպման տեմպերը 7% -ով

Մենք հաստատեցինք, որ մարդիկ ունեն կարճ ուշադրության տևողություն (ժամանակակից բովանդակության արտադրության տեմպի թերություններից մեկը): Նույնիսկ եթե դուք օգտագործում եք ճիշտ պատկերներ, եթե դրանք չեն բեռնում ընդունելի ժամկետում, հետաքրքրությունը կորցնում է.

10 ամենատարածված պատկերի օպտիմիզացման սխալներ

Կայքերի մեծամասնությունը խնդիր ունի `նրանք օգտագործում են հիանալի պատկերներ, բայց այցելուին պատկերն մատուցելու ձևը աղքատ է: Մեծ չափերը, վատ օպտիմիզացումը, սխալ ձևաչափը, անտեղի մեծ չափերը (չափերը), անպատասխանատու պատկերները և SEO- ի անզգույշ սխալները, ժամանակակից վեբ-կայքերի ամենատարածված խնդիրներից են: Այսօրվա հոդվածում մենք կանդրադառնանք այս խնդիրներին!

1. Մեծ չափեր

«Լրացուցիչ տապակները» միշտ չէ, որ լավն են

Սա դասական է: Ենթադրենք, որ ձեր կայքի «Թիմ» էջում ձեզ հարկավոր է 150 × 150 պիքսելային լուսանկար: Սովորաբար, դուք կօգտագործեք 5MP ականջակալ, մի փոքր խմբագրեք այն և վերջապես վերբեռնեք այն.

Խնդիրը նկատե՞լ եք: Որոշ մարդիկ ուղղակիորեն վերբեռնում են իրական 5MP պատկերը: WordPress թեման կբեռնի ամբողջ 5MP պատկերը (դա 5 x 10 ^ 6 պիքսել է) և զննարկչից խնդրում է կրճատել այն 150x150px- ի պահանջվող չափսով: Ըստ էության, զննարկիչը ցուցադրում է բնօրինակ պատկերի միայն 0.0045% -ը!

Դուք վերջում վատնում եք և ձեր, և ձեր այցելուի թողունակությունը (նույնիսկ եթե դուք ծառայում եք պատկերին Stackpath CDN- ի նման բովանդակության մատուցման ցանցի միջոցով), ավելի կոշտ սկավառակի տարածություն սպառում և մեծացնում բեռի ժամանակը: Առանձնահատկություններից և ոչ մեկը ձեր կայքում ցանկալի բան չէ.

Միշտ չափափոխեք (և չափափոխելով `նկատի ունեմ փոքրացնել) պատկերը պահանջվող չափսերով, այնուհետև վերբեռնեք!

ImageResize.org

Դա անելու համար հարկավոր չէ գեղեցիկ ծրագրաշար. Նման առցանց անվճար գործիքներ կան ImageResize.org Դուք կարող եք օգտագործել ձեր պատկերները արագ չափափոխելու և օպտիմալացնելու համար: Պարզապես վերբեռնեք և կսմթեք ձեր լուսանկարների պարամետրերը: Ավարտելիս ներբեռնեք ձեր օպտիմիզացված պատկերը `ձեր կայքում օգտագործելու համար: Նրանք նաև առաջարկում են արագ Պատկերի կոմպրեսոր եթե պարզապես ուզում եք կրճատել ֆայլի չափը.

Օգտակար գործիքներ.

  • IrfanView հիանալի անվճար ծրագիր է `ձեր պատկերները խմբաքանակավորելու համար` առաջադեմ տարբերակներով, ինչպիսիք են օպտիմիզացումը, ջրանիշը և սահմանները.
  • ImageMagick բաց կոդով առաջադեմ գործիք է, որը կարող է օգտագործվել մի շարք ծրագրավորման լեզուների և գործառնական համակարգերում: Կարող եք գրել ձեր սեփական ծրագիրը կամ պարզապես օգտագործել այն հրամանի տողի միջոցով.
  • ImageOptim (Mac) թույլ է տալիս քաշել ամբողջ թղթապանակներ և արագորեն օպտիմալացնել բազմաթիվ պատկերներ.
  • TinyPNG API- ի միջոցով պատկերի սեղմման առցանց գործիք է.

2. Պատկերի սխալ ձևաչափ

shutterstock_108312266

Պատկերի համար օգտագործվող ձևաչափը կարևոր դեր է խաղում: Որպես բութ համընդհանուր կանոն, օգտագործեք PNG վեկտորային գրաֆիկայի և համակարգչից ստացված պատկերների համար, ինչպիսիք են clip art- ը և այլն JPEG լուսանկարների կամ տարբեր գույների պատկերների համար: Ավելի մանրամասն բացատրության համար ստուգեք սա Awesome StackOverflow պատասխանը.

3. Առաջադիմական JPEG չօգտագործելը

Ելակետային (նորմալ) JPG ընդդեմ առաջադեմ JPG- ի

Ելակետային (նորմալ) JPG ընդդեմ առաջադեմ JPG- ի

Սովորական մարդու համար JPEG- ները երկու տեսակի են `ելակետային և առաջադեմ: Տեսողականորեն երկուսն էլ նույնն են: Տարբերությունը կայանում է նրանց բեռնման եղանակով.

  • Ելակետային JPEG- ն ունի ընդամենը մեկ շերտ `պարունակում է ամբողջ պատկերը: Հարցման դեպքում ամբողջ պատկերը բեռնված է միանգամից.
  • Առաջադիմական JPEG- ները նկարագրում են պատկերը մի քանի շերտերով: Առաջադիմական JPEG պատկերն բեռնված է շերտով շերտով, որն աստիճանաբար բարձրանում է որակի մեջ, ի վերջո ձեզ տալիս է անվնաս տեսք.
IrfanView- ն աջակցում է խմբաքանակի փոխարկումը առաջադեմ JPEG- ի հետ

IrfanView- ն աջակցում է խմբաքանակի փոխարկումը առաջադեմ JPEG- ի հետ

Պատկերի բոլոր հիմնական ռեզերատորները թույլ են տալիս պահպանել պատկերները որպես Առաջադեմ JPEG.

4. Ծույլ բեռ չօգտագործելը

Ծույլ-բեռնում գերազանց է ռեսուրսների խնայողություն տեխնիկա, որտեղ պատկերը բեռնվում է միայն այն ժամանակ, երբ այցելուը պտտվում է դեպի պատկերի դիտման շրջանակ: Դիտարկենք մի հոդված ՝ «2014 թվականին ամենաարդյունավետ ավտոմեքենաների 15» -ը: Բնականաբար, այս հոդվածը պարունակում է առնվազն 15 պատկեր: Եվ անկախ նրանից, ցուցադրման սարքի բարձրությունը `մոնիտոր, պլանշետ կամ սմարթֆոն, դուք չեք կարող տեղավորել բոլոր 15 պատկերները դիտադաշտում: Բոլոր պատկերները դիտելու համար դուք պետք է ոլորեք ներքև.

Lazy Loading- ով միացված գործառույթով, պատկերները բեռնվում են միայն այն ժամանակ, երբ այցելուը պատկերի հարևանությամբ է: Այլ իմաստով, պատկերները սկսում են բեռնվել հենց այն ժամանակ, երբ շարժվում եք ներքև ՝ դիտելու համար: Այնուամենայնիվ, առաջին մի քանի պատկերները բեռնվում են անմիջապես, քանի որ արդեն դիտման շրջանակում եք: Lazy Loading- ը փրկում է թողունակությունը երկու ծայրերում և բարելավում է բեռի ժամանակը: WordPress- ում կարող եք օգտագործել Lazy Loading- ը ՝ BJ Lazy Load Plugin.

5. CDN չօգտագործելը

cdn- ցանց

Օգտագործելով բովանդակության առաքման ցանց (CDN), կծառայի պատկերը սերվերից, որը ֆիզիկապես ամենամոտ է այցելուի գտնվելու վայրին: Եթե ​​Հնդկաստանից մի այցելու հայց է պահանջում, իսկ CDN- ը Տոկիոյում և Նյու Յորքում ունի POP (ներկայության կետ, կամ պարզապես սերվեր), ապա պատկերը մատուցվելու է Տոկիոյում տեղակայված սերվերից:.

Երբ զգալի երթևեկություն ունեք, դուք պետք է ստեղծեք CDN WordPress- ով `ձեր բեռի ժամանակը իջեցնելու և ընդհանուր կատարողական ստանալու համար: Այստեղ WPExplorer- ում խորհուրդ ենք տալիս Cloudflare. Նոր ծնված կայքերի համար մենք կառաջարկենք անվճար CDN ծառայությունների ցանկ, որը կարող եք փորձել.

6. Չհայտարարելով «բարձր» հատկանիշը

«Alt» ատրիբուտը նկարագրում է որոնման համակարգի պատկերը: Այս դաշտում մուտքագրվող տեքստը կցուցադրվի օգտագործողին, եթե պատկերը չի կարող բեռնվել: Շատ մարդիկ հակված են դատարկ թողնել այս դաշտերը: Սա շատ վնասակար է SEO- ի համար, և դուք կորցնում եք երթևեկը: Միշտ պետք է փորձեք ձեր կայքի հիմնաբառերը ներառել ձեր պատկերների բարձր պիտակում.

7. Պատկերները չբարելավելը

մատիտ-crayons-կետեր

Օպտիմիզացված պատկերները 40% -ով ավելի թեթև են, քան սովորական պատկերները: Սա բարելավում է բեռնվածությունը և խնայում թողունակությունը: Մենք խորհուրդ կտանք Freddy- ի Լավագույն WordPress Image Optimization Plugins- ի ցուցակից WPSmush.it ձեր պատկերները օպտիմիզացնելու համար. Kraken.io նաև հիանալի առցանց տարբերակ է `jiffy- ում պատկերները սեղմելու համար: Մենք այն ամբողջ ժամանակ օգտագործում ենք այստեղ ՝ WPExplorer- ում, օպտիմալացնել պատկերված նկարները ՝ նախքան դրանք փակցնելով գրառումներ և թեմայի ցուցադրություններ:.

8. Պատասխանատու նկարներ

Պատասխանատու վեբ ձևավորումն այստեղ է

Պատասխանատու վեբ ձևավորումն այստեղ է

Նույնիսկ եթե ձեր կայքը պատասխանատու է, չի նշանակում ձեր պատկերները: Դա նշանակում է, որ վերնագրի պատկերը, որն օգտագործում եք 22 ”աշխատասեղանի էկրանին, մատուցվում է նաև 5” iPhone- ին: Պատկերը վերբեռնելիս WordPress- ը այն չափափոխում է բազմաթիվ տարբերակների ՝ մանրապատկեր, միջին, լրիվ չափ և այլն: Դա կարող է փոփոխվել մշակողի կողմից: Լավ կոդավորված թեման կծառայի պատկերի «Միջին» չափի տարբերակը ՝ դրանով իսկ պահպանելով թողունակությունը.

The Picturefill.WP plugin- ը կփոխարինի պատկերի պիտակները նորով տարր, որը կծառայի տարբեր պատկերների ՝ հիմնված լրատվամիջոցների հարցումների վրա: Դա բավականին փորձարարական է (նշանակում է, որ կան սխալներ) և չպետք է օգտագործվեն ուղիղ կայքում.

9. Պատկերների վերնագրեր

Նկարագրությունները միշտ չէ, որ անհրաժեշտ են, չնայած որոշ դեպքերում, դա պահանջվում է, օրինակ, ցուցահանդեսների նկարը ձեռնարկում: Պատկերների նկարագրությունը օգնում է ընթերցողներին ավելի լավ հասկանալ թեման ՝ միևնույն ժամանակ խթանելով ձեր SEO- ն.

10. Պատկերի ֆայլ

Մտածեք ֆայլի անունը որոնիչի տեսանկյունից: Օգտագործեք նույն տեքստը, ինչ դուք կասեիք «պատկերի վերնագիրը» պատկերում: Նաև փորձեք ներառել ձեր կայքի հիմնական բառերը.

Եզրակացություն

հերոս -11

Image SEO- ն խիստ կարևոր է ցանկացած կայքի համար `հին կամ նոր: Մարդիկ, ովքեր իրականացնում են պատկերի SEO- ն ինչպես հարկն է (երբեմն դա կարող է լինել բավականին դանդաղկոտ), կանգ առնել օրգանական երթևեկության զգալի քանակի (լավագույն տեսակի երթևեկության) համար երկարաժամկետ հեռանկարում.

Ունե՞ք օպտիմիզացման հիանալի տեխնիկա: Կրակել!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map