Ինչպե՞ս մատուցել մասշտաբային պատկերները WordPress- ում (նյութը GTmetrix- ում)

WordPress- ում անհրաժեշտ է ծառայել մասշտաբային պատկերների?


Սա պարզապես նշանակում է, որ դուք պետք է չափափոխեք մեծ պատկերները փոքր լինելու համար.

GTmetrix ասում է, թե որ պատկերները պետք է մասշտաբավորվեն, և ճիշտ չափերը, որոնց վրա դրանք պետք է կտրվեն կամ չափափոխվեն: Հաջորդը, չափափոխեք (մասշտաբեք) պատկերը և հին պատկերները փոխարինեք նորերով.

Ծառայել մասշտաբի պատկերները

Քանի որ GTmetrix- ը ցույց է տալիս միայն չպարզված պատկերները ձեր փորձարկած մեկ էջի համար, սկսեք մասշտաբել նստավայր պատկերներ, որոնք հայտնվում են բազմաթիվ էջերում (ձեր պատկերանշանի, կողային գծի և ոտնաթաթի պատկերները): Հաջորդը, ձեր մյուս էջերը գործարկեք GTmetrix- ի միջոցով և դրանց վրա մասշտաբեք անհատական ​​պատկերներ.

Կարող եմ plugin օգտագործել նկարները ինքնաբերաբար չափելու համար?
Հնարավոր չէ: Պատկերների օպտիմիզացման լրացուցիչ pluginներում դուք կարող եք սահմանել առավելագույն լայնություն + բարձրություն: Բայց ձեր կայքի տարբեր ոլորտները կոչում են հատուկ չափեր (նկարները պետք է համապատասխանաբար մասշտաբավորվեն).

Ստեղծեք պատկերի հարթության խաբե թերթ.
Փոքրացված պատկերների սխալները ծառայելուց խուսափելու լավագույն միջոցը ձեր կայքի յուրաքանչյուր տարածքի չափերն (սայթաքողներ, ֆայլեր, պատկերանշաններ, բլոգի լրիվ լայնությամբ նկարներ և այլն) սովորելն է: Հաջորդը, ստեղծեք պատկերի չափման խաբեբա թերթ, որում նշվում են յուրաքանչյուր տարածքի չափերը: Եթե ​​նախքան վերբեռնելը հետևում եք ձեր պատկերի չափսերի խաբեության թերթին և չափափոխում եք պատկերները, այլևս երբեք չպետք է կրկին ծառայեք մասշտաբային պատկերների սխալները.

1. Գտեք մեծ պատկերներ GTmetrix- ում

Գործարկել էջը GTmetrix- ի միջոցով և դիտել PageSpeed ​​ներդիրում պատկերված մասշտաբային պատկերի սխալները: Ընդլայնեք նրանց առաջարկությունները և կտեսնեք, թե որքան ճիշտ չափեր պետք է ունենա յուրաքանչյուր պատկեր: Հիշեք, որ GTmetrix- ը սխալներ կցուցաբերի միայն ձեր կողմից ստուգվող մեկ էջի համար.

Ծառայել մասշտաբային պատկերներ GTmetrix

Դուք կարող եք նաեւ ձեռքով ստուգեք, արդյոք պատկերները մասշտաբավորված են. Նախ, աջ սեղմեք և պատճենեք պատկերի հասցեն.

Պատճենեք պատկերի հասցեն

Հաջորդը, տեղադրեք պատկերի URL- ն զննարկչի նոր ներդիրում: Եթե ​​ձեր կայքում ցուցադրված պատկերը համեմատում եք ձեր պատկերի URL- ի հետ, կտեսնեք, որ նկատելի է տարբեր չափսերով: Դա նշանակում է, որ պատկերը պետք է մասշտաբի: Համեմատելով ձեր պատկերի երկու տարբերակները կողք կողքի, դուք կարող եք տեսնել, թե իրականում որքան մեծ է պատկերը (և ինչու էջը, որի վրա այն կարող է բեռնվել, շատ դանդաղ է):.

Scaled vs Unscaled Image- ն

2. Պատկերափոխել չափերը `չափերը շտկելու համար

Ներբեռնեք հին պատկերը և բացեք այն ձեր պատկերի խմբագրման ընտրության գործիքի մեջ (ես օգտագործում եմ GIMP): Չափափոխեք և (կամ) բերքը պատկերը բերեք GTmetrix- ի առաջարկած չափերին: Պատկերների խմբագրման շատ գործիքներ թույլ են տալիս սեղմել պատկերները և հեռացնել EXIF- ի տվյալները ինչը կդարձնի պատկերի ծանրաբեռնվածությունն ավելի արագ.

Պատկերի մասշտաբայինացում GIMP

Կարող եք նաև պատկերներ հավաքել և չափափոխել ուղղակիորեն WordPress- ում:

Պատկերի փոփոխում WordPress Media- ի խմբագրում

3. Հին պատկերը փոխարինեք նորով

Վերբեռնեք ձեր նոր պատկերը WordPress- ում, ապա հին պատկերը փոխարինեք նորով.

Uncc վիդջեթների պատկեր

Մասշտաբի վիդջեթների պատկեր

4. Վերստուգեք էջը GTmetrix- ում

Վերստուգեք էջը GTmetrix- ում և այլևս չպետք է ծառայի մասշտաբային պատկերների սխալներ.

100% ծառայել մասշտաբի պատկերներով

5. Ծառայել մասշտաբի պատկերները բջջայինով

Մանրացված պատկերների սպասարկումը բջջային տարբեր է.

Եթե ​​գրանցվում եք անվճար GTmetrix հաշիվ, կարող եք ստուգել ձեր փորձը բջջային կայքի արագությունը Android- ում: Հնարավոր է `կտեսնեք ավելի շատ սպասարկման պատկերների սխալներ, եթե ձեր կայքը չի օգտագործում հարմարվողական պատկերներ, ինչը նշանակում է, որ ավտոմատ չափափոխում են պատկերները բջջային սարքերի համար (դա սովորաբար կատարվում է հավելվածով).

Քայլ 1: Գործարկեք ձեր կայքը GTmetrix- ի Android Test- ի միջոցով.

GTmetrix բջջային թեստ

Ծառայել մասշտաբի պատկերները բջջայինով

Քայլ 2Գտեք ձեր բջջային ֆոնի չափերը, որոնք նախատեսված է GTmetrix- ի կողմից.

Ֆոնի առավելագույն լայնությունը

Քայլ 3Տեղադրեք Adaptive Images plugin- ը ShortPixel կամ Հարմարվող պատկերներ.

ShortPixel հարմարվող պատկերներ

Քայլ 4Սահմանեք GTmetrix- ի տրամադրած չափերը որպես ֆոնի առավելագույն լայնությունը.

Ֆոնային առավելագույն լայնությունը

Քայլ 5Վերանայեք ձեր կայքը GTmetrix- ի բջջային թեստի միջոցով ՝ համոզվելու համար, որ սխալներ չկան.

GTmetrix բջջային թեստ

Քայլ 5Կազմաձևեք ձեր հարմարվող պատկերների plugin- ի այլ պարամետրերը (ShortPixel- ը ներառում է WebP աջակցություն, ծույլ բեռնված պատկերներ, խելացի բերք և EXIF- ի տվյալների հեռացում): Սրանք նույնպես կարող են օգնել.

6. Պատկերը չափափոխել բազմակի էջերում

Եթե ​​դուք օգտագործում եք նույն պատկերը մի քանի էջերում, և այն պետք է չափափոխվի, կարող եք չափափոխել պատկերը, պատճենել HTML- ը, այնուհետև օգտագործել ավելի լավ որոնում փոխարինել plugin- ը `այն բազմաթիվ էջերում շտկելու համար.

Քայլ 1Տեղադրեք Ավելի լավ որոնում Փոխեք plugin- ը.

Քայլ 2Պատճենեք հին պատկերի HTML- ն և տեղադրեք այն «Որոնել» դաշտում «Լավագույն որոնում փոխարինող» plugin- ում: Դուք կարող եք օգտագործել WordPress տեքստի խմբագիր տեսնել պատկերի HTML- ը: Նշում. Ավելի լավ որոնման փոխարինումը կփոխարինի պատկերը միայն այն դեպքում, եթե այն պարունակում է ճշգրիտ HTML- ն, որը մուտքագրեք plugin- ում.

Քայլ 3Պատճենեք նոր պատկերի HTML- ն և տեղադրեք այն «Փոխարինեք հետ» դաշտում.

Ծառայել մասշտաբով պատկերի HTML- ին

Քայլ 4Ընտրեք աղյուսակները (օրինակ ՝ գրառումները), որոնք ցանկանում եք սկանավորել և ստուգել չոր սկանումը.

Քայլ 5Կտտացրեք «Որոնել / փոխարինել», և plugin- ը հին պատկերը կփոխարինի նորով.

7. Ստեղծեք պատկերի չափերի խաբեության թերթ

Ինչպես ավելի վաղ նշեցի, դուք պետք է չափեք ձեր վեբ կայքի բոլոր տարածքների չափերը, որպեսզի կարողանաք պատկերները չափափոխել նախքան դրանք վերբեռնելը: Դուք կարող եք գտնել այս չափերը GTmetrix- ում (միայն այն դեպքում, եթե դուք ծառայել եք մասշտաբային պատկերի սխալներ) կամ կարող եք նաև գտնել դրանք ձեր թեմայի CSS ոճաթերթում.

Օրինակ:

  • Սլայդերի պատկերներ ՝ 1900 (վտ) x 400 (ը)
  • Կարուսելի պատկերներ. 115 (վտ)
  • Վիդջեթների պատկերներ ՝ 414 (w)
  • Բլոգի լրիվ լայնության տեղադրման պատկերներ. 680 (վ)
  • Գլխավոր նկարներ ՝ 250 (վտ) x 250 (ը)
  • Yoast Facebook OG պատկեր ՝ 1200 (վ) x 628 (ը) – քայլ 11
  • Yoast Twitter OG պատկեր 1024 (w) x 512 (ը) – քայլ 11

680 պիքսել լայնության ուղղանկյուն

Իմ բլոգի լայնությունը 680px է, ուստի այս գրառման յուրաքանչյուր պատկերի չափը չափափոխվել է 680px.

8. WordPress plugin- ը մասշտաբային պատկերների սպասարկման համար

Պատկերների օպտիմիզացման plugin- ների մեծ մասը պատկերներ չափափոխելու տարբերակ ունի, սակայն GTmetrix- ում սխալները շտկելիս դա շատ արդյունավետ չէ, քանի որ ձեր կայքի տարբեր ոլորտները կոչ են անում տարբեր չափեր: Դա ավելին է, որպեսզի համոզվեք, որ ձեր պատկերները բացարձակապես հսկայական չեն: Ինչպես ասում է Imagify plugin- ը, առավելագույն լայնությունը չպետք է պակաս լինի ձեր ամենամեծ մանրապատկերից.

Ջարդել

Չափափոխել պատկերները Smush

Պատկերացրեք

Պատկերափոխել պատկերները Պատկերացրեք

EWW պատկերի օպտիմիզատոր

Չափափոխել նկարները EWWW

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

Ես գրել եմ ամբողջ ձեռնարկը Պատկերները WordPress- ում օպտիմալացնելով որը ներառում է.

  • Սեղմող պատկերներ
  • Պատկերների սպասարկում CDN- ի միջոցով
  • GIFS- ի չափափոխմամբ
  • EXIF- ի տվյալների հեռացումը
  • Ծույլ բեռնման պատկերներ + տեսանյութեր
  • Cloudflare Mirage, լեհերեն, Hotlink պաշտպանություն

Պատկերների օպտիմիզացում GTmetrix- ում

Փնտրում եք ավելի շատ WordPress Speed ​​Tutorials?
Ահա այլ ձեռնարկներ, որոնք ես գրել եմ.

  • Ինչպես կարգավորել WP հրթիռը (քեշի հավելվածը, որը ես խորհուրդ եմ տալիս)
  • Cloudways ընդդեմ SiteGround (ես առաջարկում եմ երկու լավագույն տանտերերը)
  • Ինչպե՞ս ստացա 100% GTmetrix միավորներ (WordPress Speed ​​Guide)

WordPress- ի արագության օպտիմիզացիայի ունեմ նաև հիանալի տեսանյութ ՝

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

&# x2705; Կարող եմ օգտագործել մի plugin ՝ մասշտաբային պատկերները սպասարկելու համար?

Ոչ, ձեր վեբ կայքի տարբեր բաժինները կոչ են անում տարբեր պատկերի չափսեր: Դուք պետք է չափեք պատկերները `այդ եզակի չափերին համապատասխանելու համար.

&# x2705; Որն է պատկերը սանդղակելու ամենահեշտ ձևը?

Ներբեռնեք պատկերը, բերքը / չափափոխեք այն այնպիսի ծրագրի նման, ինչպիսին է Photoshop- ը կամ Gimp- ը, ապա հին պատկերը փոխարինեք նորով.

&# x2705; Ո՞ր պատկերները պետք է նախ սկսեմ մասշտաբել?

Սկսեք մասշտաբով նկարներ, որոնք հայտնվում են բազմաթիվ էջերում, ինչպիսիք են ձեր պատկերանշանը, կողային գծերը, պատկերները, ստորին էջի պատկերները և այլն.

&# x2705; Որտե՞ղ եմ գտնում պատկերի ճիշտ չափերը?

GTmetrix- ը ձեզ ասում է յուրաքանչյուր պատկերի ճիշտ չափերը, երբ դուք ընդլայնում եք նյութը PageSpeed ​​ներդիրում.

&# x2705; Ինչպե՞ս կարող եմ լիովին օպտիմալացնել պատկերը?

Ստանդարտացրեք այն ճիշտ չափսերի վրա, սեղմեք այն և հեռացրեք EXIF ​​տվյալները ՝ օգտագործելով պատկերային ծրագիր կամ պլագին, ապա համոզվեք, որ HTML- ում նշում եք պատկերի չափերը (սահմանեք պատկերի լայնությունն ու բարձրությունը):.

Հուսով եմ `օգտակար եք գտել այս ձեռնարկը: Եթե ​​ձեր WordPress կայքում դեռ ծառայել եք մասշտաբային պատկերի սխալներ, թողեք ինձ ձեր մեկնաբանությունը մեկնաբանությամբ, և ես ամեն դեպքում կօգնեմ ձեզ:.

Ուրախություն,
Թոմ

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