Դուք չե՞ք սիրում պատկերներ:

Նրանք կարող են տեքստի մի հատվածը վերածել գրավիչ փորձի, մինչ դուք կարդում եք: Պատկերները բարելավում են բլոգի գրառումը, դարձնում այն ​​ավելի համօգտագործելի և սահմանում ձեր ամբողջ կայքի տոնայնությունն ու ապրանքանիշը:

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

Սակայն, եթե ուշադիր չլինեք, պատկերները կարող են կազմել ձեր վեբ էջի ընդհանուր չափի կեսը (կամ ավելին): Ընդամենը մի քանի տարի առաջ վեբ էջի միջին չափը կազմում էր 600–700K: Այժմ միջինը 2 ՄԲ է և ամեն տարի ավելանում է:

Դա հսկայական է:

Դա տեղի է ունենում հիմնական պատճառն այն է, որ բազմաթիվ պատկերներ ավելի հաճախ են օգտագործվում վեբ էջերում, և այդ պատկերները չեն ճիշտ չափի և օպտիմիզացված չէ: Սա նշանակում է, որ դրանք չեն պահպանվում կամ հավաքագրվում վեբ-բարեկամական ձևով, և փոխարենը փչում են ձեր էջերը:

Մեզնից շատերը, այնուամենայնիվ, թողնում են պատկերների օպտիմալացումը որպես հետևողական միտք և նախընտրում են հաճույք ստանալ զվարճալի բաներից: ինչպես էպիկական գրառում պատրաստելը կամ ձեր տեղը այլ բլոգերների հետ ցանց ստեղծելը:

Սակայն էջի փքվածություն ունենալը նշանակում է, որ ձեր էջի բեռնման արագությունը ազդում է: Դուք կարող եք չմտածել, որ սա մեծ խնդիր է, եթե դուք բարձր արագությամբ կապի մեջ եք, բայց ձեր այցելուներից շատերը չեն: Նաև Google-ը չի սիրում դանդաղ բեռնվող էջերը, և դա կարող է բացասաբար ազդել ձեր SEO-ի վրա:

Ինչու՞ պետք է օպտիմալացնել պատկերները

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

Ուսումնասիրությունները ցույց են տալիս, որ մինչև 40%-ը այցելուները սեղմում են «Հետ» կոճակը, եթե կայքի բեռնումը տևում է երեք վայրկյանից ավելի երկար:

Ես գիտեմ, որ երեք վայրկյանն իսկապես այդքան էլ երկար չէ, բայց երբ միացված եք բջջային կապին և սպասում եք Կայքը բեռնելու համար վայրկյանը կարող է հավերժ թվալ:

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

Անտեղի մեծ պատկերները նույնպես տեղ են զբաղեցնում ձեր հոսթինգի հաշվում: Թեև ձեզանից ոմանք կարող են հոսթինգ ունենալ «անսահմանափակ» պահեստային տարածքով, պրեմիում հոսթինգի շատ պրովայդերներ սահմանափակում են ձեզ մոտ 10 ԳԲ պահեստով ավելի ցածր մակարդակի պլանների վրա: Սա կարող է արագ լցվել, հատկապես, եթե դուք միևնույն հաշվում հյուրընկալում եք բազմաթիվ, պատկերներով ծանրաբեռնված կայքեր:

Այսպիսով, ինչպե՞ս կարող եք իմանալ, թե արդյոք ձեր պատկերները դանդաղեցնում են ձեր կայքը: Ստուգեք ձեր կայքի արագությունը Google PageSpeed ​​Insights-ի միջոցով:

Եթե Google-ը հաղորդում է չօպտիմիզացված պատկերները որպես խնդիր, ահա այն, ինչ դուք պետք է իմանաք այն շտկելու համար:

Պատկերի օպտիմալացման հիմունքները

Երբ խոսքը վերաբերում է ձեր բլոգում պատկերների օպտիմալացմանը, կան մի քանի տարբեր բաներ, որոնք դուք պետք է լինեքտեղյակ է. ֆայլի տեսակը, պատկերի չափը և չափերը, ինչպես եք մատուցում ձեր պատկերները և պատկերի սեղմումը:

Եկեք ավելի մանրամասն նայենք այս ոլորտներից յուրաքանչյուրին:

Ֆայլի տեսակը

Համացանցում պատկերները սովորաբար պահվում են PNG կամ JPEG ֆայլի ձևաչափով կամ GIF անիմացիայի համար: Ո՞վ չի սիրում այդ զվարճալի անիմացիոն GIF-ները, որոնք լողում են համացանցում:

Այժմ տեխնիկապես լավ է , եթե ձեր պատկերները պահեք որևէ ձևաչափով. ձեր այցելուի դիտարկիչը դժվարություն չի ունենա ցուցադրելու ձեր վեբ էջը: – բայց լավագույն որակի և օպտիմալացման համար հետևեք հետևյալ կանոններին.

• JPEG – օգտագործել լուսանկարների և դիզայնի համար, որտեղ մարդիկ, վայրերը կամ իրերը ցուցադրվում են
• PNG – լավագույնը գրաֆիկայի համար , լոգոներ, տեքստային ձևավորումներ, սքրինշոթներ և երբ ձեզ անհրաժեշտ են թափանցիկ ֆոնով պատկերներ
• GIF – եթե ձեզ անհրաժեշտ է անիմացիա, հակառակ դեպքում օգտագործեք PNG

Ուրեմն ինչու կան տարբեր ձևաչափեր ?

Դե, PNG-ն ավանդաբար օգտագործվում է լոգոները և գրաֆիկան պահելու համար, քանի որ այն պահպանում է բնօրինակ պատկերի որակը. ոչ ոք չի ուզում մշուշոտ տեքստ և պիքսելացված ձևեր: Բայց եթե փորձեք լուսանկարը պահել որպես PNG, այն զարմանալի տեսք կունենա, բայց արդյունքում ֆայլի չափը կլինի ոչ այնքան զարմանալի:

JPEG-ն ավանդաբար օգտագործվում է լուսանկարները պահելու համար: Պատկերի որոշ տվյալներ դեն են նետվում՝ ֆայլի կտրուկ փոքր չափս ստեղծելու համար, բայց քանի որ լուսանկարները պարունակում են գույների լայն տեսականի և բնական տատանումներ, որակի կորուստը տեղի է ունենում.սովորաբար աննկատելի է մարդու աչքին:

Մենք ավելի մանրամասն կանդրադառնանք սեղմման մասին ավելի ուշ, բայց առայժմ, եթե հիշում եք միայն երկու բան, հիշեք. JPEG լուսանկարների համար և PNG տեքստի/գրաֆիկայի համար:

Պատկերի չափսերը

Երբևէ բեռնե՞լ եք վեբ էջ և նկատե՞լ եք, որ փոքրիկ նկարը (օրինակ՝ գլխի նկարը) ներբեռնելու համար անհրաժեշտ է f-o-r-e-v-e-r: Արդյո՞ք, այդքան դանդաղ, դուք կարող եք տեսնել յուրաքանչյուր տողի մուտքը: Ինքներդ մտածում եք՝ ինչպե՞ս կարող է այդքան փոքր պատկերի ներբեռնումն այդքան երկար տևել:

Եվ երբ դա տեղի է ունենում մեծ վերնագրի պատկերի հետ, դա ավելի վատ է, քանի որ այն կարող է դադարեցնել էջի ամբողջ բեռնումը:

Պատճառը դա տեղի է ունենում այն ​​պատճառով, որ բլոգերը ճիշտ չի չափափոխել և չի օպտիմիզացրել իր պատկերը, և մեր գլխաշոթի օրինակի դեպքում նա կարող էր վերբեռնել ամբողջական լուծաչափով JPEG անմիջապես իր DSLR տեսախցիկից:

Եվ դա հսկայական ֆայլ է:

Տեսնում եք, վեբ զննարկիչը (սովորաբար) չափում է պատկերն իր սկզբնական չափերից, որպեսզի այն լավ տեղավորվի վեբ էջի իր տեղում: Այն, ինչ կարծես փոքր պատկեր է էկրանին, կարող է իրականում լինել 10 մեգապիքսելանոց հսկայական լուսանկար՝ իրական ժամանակում փոքրացված բրաուզերի կողմից:

Այժմ որոշ վեբ հրապարակման հարթակներ ինքնաբերաբար կստեղծեն ձեր ամբողջական լուծաչափով պատկերի մի քանի տատանումներ տարբեր տարբերակներում: չափերը, բայց եթե ոչ, դուք պետք է նախապես չափափոխեք ձեր պատկերների չափերը պատկերների խմբագրիչում, ինչպիսիք են Photoshop-ը, Lightroom-ը, Pixlr-ը կամ նույնիսկ MS Paint-ը: Դա կարող է նշանակել տարբերություն50K ֆայլի և 5 ՄԲ ֆայլի միջև:

Օրինակ, WordPress-ը ավտոմատ կերպով կստեղծի ձեր վերբեռնված պատկերի երեք (կամ ավելի շատ, կախված ձեր թեմայից) պատճենները, բոլորը տարբեր չափսերով, որոնք կարող եք օգտագործել: բլոգի գրառումներում, այլ ոչ թե միշտ օգտագործել ամբողջական չափի պատկերը:

Եթե դուք սովորություն ունեք վերբեռնելու հսկայական ֆոնդային լուսանկարների պատկերներ և ցանկանում եք տարածք խնայել ձեր հոսթինգի հաշվում, ապա WordPress հավելվածը Imsanity-ն ունի ձեր թիկունքը:

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

Ակտիվացնելուց հետո Imsanity-ը կարող է նաև որոնել ձեր առկա պատկերները և համապատասխանաբար չափափոխել:

Ձեր պատկերները մատուցելը

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

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

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

Սա նշանակում է, որ այցելուները, օրինակ, Եվրոպայից, կստանան պատկերներ, որոնք մատուցվում են տեղական եվրոպական սերվերից, այլ ոչ թե նահանգներից կամ այլուր: Քանի որ արձագանքման ժամանակը և ցանցի հետաձգումը կրճատվում են, պատկերները շատ ավելի արագ են ներբեռնվում՝ նվազեցնելով էջի բեռնման ժամանակը:

Blogging Wizard-ն օգտագործում է Sucuri (այն ներառում է Firewall անվտանգության համար, ինչպես նաև CDN), սակայն կան որակյալ այլ մատակարարներ: ինչպես Amazon-ի Cloudfront-ը կամ KeyCDN-ը: Նույնիսկ հանրաճանաչ CloudFlare-ը, որը խստորեն CDN չէ, առաջարկում է CDN անվճար և հեշտ է կարգավորել ընդհանուր հոստինգ փաթեթների մեծ մասում:

Պատկերի սեղմում

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

Պատկերի խմբագրման գործիքների մեծ մասը, ինչպիսիք են Visme-ը կամ Photoshop-ը, կպահեն ֆայլերը՝ օգտագործելով կորստի JPEG սեղմում, քանի որ այն ունի ֆայլի չափի լավագույն կրճատում: Այսպիսով, թեև պատկերի որակը փոքր-ինչ նվազում է, պատկերի կորստի սեղմման օգտագործումը հսկայական պատկերները նվազեցնում է վեբ չափերի:

Վստահ եմ, որ Photoshop օգտագործողներից շատերը կարող են դիտել դրա Պահել համացանցում հատկությունը: որպես պատկերի օպտիմիզացման բոլորը և վերջը: Եվ նույնիսկ առցանց պատկերների խմբագրման գործիքները, ինչպիսիք են PicMonkey-ը կամ Visme-ը, նույնպես օպտիմիզացնում են ձեր պատկերները:

Բայց գիտե՞ք, որ կան գործիքներ, որոնք կարող են վերցնել ձեր «օպտիմալացված» պատկերը Photoshop-ից կամ խմբագրման այլ գործիքներից, սեղմել և սեղմել այն: ևս 40%-ով (կամ ավելի),և դեռևս արդյո՞ք այն գրեթե նույնական է մարդու աչքին:

Ահա մի քանի անվճար և վճարովի գործիքներ, որոնք կօգնեն ձեզ կրճատել ձեր պատկերները վեբ-բարեկամական կարգավիճակի:

Աշխատասեղանի գործիքներ

ImageAlpha / ImageOptim

Mac օգտագործողի համար ImageOptim-ը աշխատասեղանի անվճար գործիք է, որը ես ամեն օր օգտագործում եմ PNG պատկերները, հիմնականում սքրինշոթները, օպտիմալացնելու համար, նախքան դրանք վերբեռնելը: Այս գործիքները հեշտ է օգտագործել, դուք պարզապես քաշում և թողնում եք ձեր ֆայլերը, բայց դուք պետք է միանգամից մեկ պատկեր անեք:

Pro հուշում . Տեխնոլոգների համար կա ImageOptim– CLI, որտեղ դուք կարող եք միանգամից օպտիմիզացնել պատկերների մի ամբողջ թղթապանակ:

ImageAlpha-ն վնասող PNG կոմպրեսոր է և կարող է հրաշքներ գործել PNG ֆայլերի կրճատման հարցում, մինչդեռ ImageOptim-ը կատարում է առաջադեմ անկորուստ (կորուստի տարբերակով) սեղմում – և դա հեռացնում է ավելորդ մետատվյալները PNG, JPEG և GIF ֆայլերից:

Իմ PNG պատկերների համար ես դրանք առաջինը գործարկում եմ ImageAlpha-ի միջոցով:

Այստեղ այն նվազեցրեց իմ սքրինշոթի պատկերը 103K-ից մինչև 28K:

Այնուհետև ես այն գործարկեցի ImageOptim-ի միջոցով և խնայեցի լրացուցիչ 10%։

JPEGmini

Իմ JPEG ֆայլերի համար ես դրանք օպտիմալացնում եմ աշխատասեղանի JPEGmini հավելվածի միջոցով, որը հասանելի է։ և՛ Mac-ի, և՛ Windows-ի համար:

Lite տարբերակը թույլ է տալիս անվճար օպտիմիզացնել օրական մինչև 20 պատկեր, իսկ սահմանաչափը հեռացնելու համար արժե $19,99:

Pro հուշում : Ընդլայնված օգտվողները, ովքեր ցանկանում են ինտեգրել JPEGmini-ն Photoshop-ի կամ Lightroom-ի մեջ plugin-ի միջոցով, կարող են գնել Pro տարբերակը:$99,99:

Առցանց / Cloud / SaaS գործիքներ

TinyPNG

Եթե փնտրում եք բարձրորակ առցանց պատկերի սեղմման գործիք՝ TinyPNG (այն օպտիմիզացնում է JPEG-ը ֆայլերը նույնպես, չնայած անվանը) վեբ հավելված է, որը թույլ է տալիս քաշել մինչև 20 5 ՄԲ կամ ավելի փոքր պատկերներ ձեր բրաուզերում և դրանք միանգամից օպտիմիզացնել:

Նրանք նաև ունեն մշակողի API և ստեղծել WordPress: հասանելի է plugin, որը կարող է ավտոմատ կերպով օպտիմիզացնել ձեր պատկերները վերբեռնելիս:

TinyPNG-ը ձեզ տալիս է ամսական 500 անվճար պատկերի օպտիմիզացում, և դրանից հետո գանձվում է 0,002–0,009 դոլար մեկ պատկերի համար՝ կախված ծավալից:

Այժմ 500 Ամսական պատկերները կարող են շատ թվալ, բայց եթե հաշվի առնեք այն փաստը, որ WordPress-ը հաճախ ստեղծում է յուրաքանչյուր պատկերի երեքից հինգ տարբերակ տարբեր չափերի, 500 պատկերները այդքան չեն թվում բեղմնավոր բլոգերի համար: Բարեբախտաբար, մեկ նկարի արժեքը բյուջետային է:

EWWW Image Optimizer

Եթե պատրաստ չեք գումար ծախսել և չեք ուզում ձեզ անհանգստացնել օպտիմալացնելը ձեր պատկերները ձեռքով, WordPress-ի համար անվճար EWWW Image Optimizer հավելվածը կարող է ավտոմատ կերպով օպտիմիզացնել ձեր վերբեռնված պատկերները:

Դուք կարող եք ընտրել պրեմիում բաժանորդագրություն, որն իրականացնում է կորուստներով սեղմում, բայց անվճար տարբերակը կատարում է միայն անկորուստ սեղմում, այնպես որ խնայողությունները չեն: գրեթե նույնքան էական: Այն կխնայի ձեր ժամանակը և ավելի լավ է, քան ոչինչ:

Նշում. Ամբողջական ամփոփման համար ստուգեքմեր գրառումը պատկերների սեղմման գործիքների վերաբերյալ:

Ամբողջացնելով այն

Որոշ մարդիկ կանխատեսում են, որ վեբ էջի միջին չափը մինչև 2017 թվականը կհասնի 3 ՄԲ-ի, այժմ ժամանակն է սկսել ձեր պատկերների օպտիմալացումը:

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

Ուշադրություն դարձրեք ձեր պատկերի չափսերին և չափափոխեք թվային ֆոտոխցիկից ստացված չափազանց մեծ լուսանկարների կամ պատկերների չափերը համապատասխանի: չափը:

Այնուհետև օգտվեք ժամանակակից պատկերի սեղմումից աշխատասեղանի հավելվածներով, ինչպիսիք են JPEGmini-ն կամ ամպային գործիքները, ինչպիսիք են TinyPNG-ը կամ Kraken-ը` հնարավորության դեպքում դրանք ինտեգրելով WordPress-ին պլագինով:

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

Առնչվող ընթերցում. 7 եղանակներ նվազեցնելու համար PDF ֆայլերի չափը: