GIF vs JPG vs PNG – Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Այսպիսով, դուք ստեղծում եք ձեր առաջին վեբ կայքը, և դրա համար ձեզ հարկավոր են որոշ նկարներ: Դուք ինչ-որ հետազոտություններ եք անում, ինչ-որ մեկը ասում է «JPG», իսկ մյուսը «PNG» – ի մասին է ասում: Դուք գիտեք, թե ինչ է GIF- ը, քանի որ այն մեկն է, որը շարժվում է, բայց դուք լիովին վստահ չեք, թե ինչ են նշանակում այս բոլոր ընդարձակման ֆայլերը կամ ինչու են դա կարևոր ձեր վեբ կայքում: Ո՞րն է իրական տարբերությունը?!

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

Այնուհետև հարկ է նաև հաշվի առնել որակը: Doանկանո՞ւմ եք օգտագործել «կորուստ» ձևաչափ, որը զոհաբերում է օրիգինալ նկարի որոշ մանրամասներ ՝ ավելի փոքր ֆայլի չափի համար: Կամ ինչպե՞ս «անպաշտպան» ձևաչափի մասին, որն ունի անթերի որակ, բայց ունի իր սեփական թերություններ: Ինչ վերաբերում է թափանցիկ նախապատմությամբ նկարներին?

Եթե ​​այդ հարցերը ձեր մտքում են, մենք ձեզ համար պատասխաններ ենք ստանում: Ես անձամբ փորել եմ յուրաքանչյուր ձևաչափի տեխնիկական ասպեկտները, որպեսզի պարտադիր չլինեք. Կարդացեք բոլոր մանրամասների համար կամ ցատկեք ներքևից ներքև, որտեղ ես ներառել եմ մի փոքր խաբեբան.

GIF (Graphics Interchange Format) – Պարող նորածինների համար

Ահ, GIF. Դա բերել է մեզ պաշտելի կատուներ, պարող մանուկներ և լրացուցիչ փայլուն կոճակներ, որոնք շողշողում և փայլում էին.

Դուք կարող եք մտածել անիմացիոն GIF- ների մասին, որպես նախորդ, բարդ, անիմացիոն UI- ների նախադրյալներ: Նրանք ոգեշնչեցին Flash կայքեր, որոնք այնուհետև փոխարինվեցին JavaScript- ի առաջատար անիմացիաներով, որոնք մենք տեսնում ենք այսօր: Պարող այդ երեխաները շատ մարդկանց թույլ էին տալիս տեսնել ինտերնետի ներուժը, որքան էլ տարօրինակ է.

Իրական ձևաչափը մշակվել է 1987 թ., Եւ այն բավականին պարզ է: RGB (Կարմիր, կանաչ և կապույտ) սպեկտրից ընտրված եք յուրաքանչյուր պատկերի համար 256 գույն: Եթե ​​ունեք անիմացիոն GIF, ապա յուրաքանչյուր շրջանակ կստանա իր պալիտրա: Այս համակարգը օգնում է ֆայլերի չափերը ցածր պահել… համեմատաբար խոսելը. Երկար անիմացիոն GIF- ները մեծ լուծումներով կարող են հեշտությամբ անցնել հարյուրավոր մեգաբայթերի, ինչը կարող է մի փոքր վնասել, եթե չփակված տվյալների պլանում եք.

Այս ձևաչափի սահմանափակումները նաև նշանակում են, որ այն այնքան էլ հարմար չէ լուսանկարներ ցուցադրելու համար: Գույնի սահմանափակումները նշանակում են, որ 256 երանգներն ու երանգները պետք է կատարեն RGB սպեկտրում 16 միլիոն գույներով սովորաբար արված գործը: Ահա մի օրինակ.

Սա էշ է, որը լուսանկարել եմ 2017-ի հոկտեմբերին.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Ես նրան անվանում եմ Գարի, և նա բավականին ցնցված էր ամբողջ բանի մասին: Հիանալի մոդել: Համենայն դեպս, դա իրականում բարձրորակ JPG պատկեր էր: Ահա նույն պատկերը, բայց GIF ձևաչափով.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Տեսեք, թե ինչպես է այն գրեթե նման ջրաներկ: Այժմ, սա բոլորովին լավ է անիմացիաների համար – մարդիկ չպետք է նայեն յուրաքանչյուր շրջանակի նուրբ մանրամասներին. Նրանք պետք է վայելեն ակցիան.

Վեբ կայքեր ստեղծելիս ես սովորաբար GIF- ները չէի օգտագործի որպես UI- ի իրական մաս… անցած տարիների անիմացիոն ֆոնները հետապնդում են մեզ բոլորիս: Համենայն դեպս, GIF- ները լավագույնս օգտագործվում են որպես բովանդակություն: Նետեք ձեր բլոգի գրառման մեջտեղը, որպեսզի մի կետ տանեք, կամ թեթևացրեք տրամադրությունը.

JPG (համատեղ լուսանկարչական փորձագետների խումբ) – ընկերական էշերի և այլ բարձրորակ պատկերների համար

JPG ձևաչափը 1992 թ.-ին թողարկվելուց ի վեր այն հանդիսանում է առցանց պատկերների, սպառողի կարգի լուսանկարչության և ցանկացած այլ օգտագործման դեպք, որը պահանջում է զգալի քանակությամբ մանրամասներ փոքր ֆայլի չափով: JPG- ն երկար ժամանակ գերիշխող է, քանի որ այն ձեզ տալիս է հենց դա. Շատ մանրամասնություններ, համեմատաբար փոքր ֆայլերի չափեր.

Այս ցուցակի ձևաչափերից JPG- ն ամենալավ տարբերակն է `շատ գույներով և մանրուքներով լուսանկարների համար. Այն նաև բավականին ճկուն է, քանի որ կարող եք արտահանել JPG պատկերներ տարբեր աստիճանի որակի, ինչը թույլ է տալիս ճիշտ որոշել, թե որքան որակի եք պատրաստ առևտուր անել ֆայլերի ավելի փոքր չափերի համար.

Եկեք մեկ այլ հայացքով նայենք մեր լավ հին ընկերոջը ՝ Գարին: Այստեղ նա գտնվում է JPG պատկերով, որի որակը սահմանվել է 100-ի (ամենաբարձր արժեքը): Պատկերը «կշռում է» 633 կիլոբայթ.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Եվ հիմա, եկեք պատկերնենք պատկերի որակը 80-ի. Եթե ​​ուշադիր նայեք, մանրամասները միանշանակ կորել են, բայց ոչ այնքան. Եվ նույնիսկ մանրամասների այս նվազագույն կորստով, պատկերի չափը կրճատվել է մինչև 121 կիլոբայթ.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

50-ի որակի մակարդակում պատկերն սկսում է ցույց տալ շատ ավելի լուրջ պատկերի սեղմում: Այնուամենայնիվ, ուշագրավ են ֆայլի չափի նվազող եկամուտները: Մենք կորցրել ենք ընդամենը 41 կիլոբայթ ՝ ընդհանուր առմամբ մեզ հասցնելով 80-ի.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Եվ 30-ի որակի մակարդակում, դա պարզապես չարժի. 65,4 կիլոբայթ.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Այսպիսով, դուք սովորաբար ցանկանում եք պահպանել պատկերի որակի արժեքը մոտ 80-ի սահմաններում, և սովորաբար ամենևին էլ չարժի 70-ից ցածր իջնել: Գնացեք շատ ցածր, և վերջում կորցնում եք շատ մանրուքներ, ֆայլի չափի կրճատման առումով շատ բան ցույց տալու համար.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Պետք է հիշել դա JPG- ի ներկառուցված սեղմումը հակված է հաճելիորեն չկատարել հարթ, փխրուն գծերի կարիք ունեցող պատկերների հետ, օրինակ ՝ պինդ ֆոնի վրա տեքստերով պատկերներ կամ պատկերանշաններ: Որպեսզի ցույց տամ, թե ինչ նկատի ունեմ, ես կցանկանայի ներկայացնել այս շատ պարզ գրաֆիկը.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Որակը ես դնում եմ 70-ի, որպեսզի ավելի հեշտ լինի ցույց տալ ձեզ, թե ինչ նկատի ունեմ: Եթե ​​ուշադիր նայում եք պատկերին, ապա պետք է տեսնեք, որ տեքստի շուրջը և այդ կապույտ ձևը շրջապատված ծայրերը փխրուն են: Ահա խոշորացված տարբերակը ՝

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Այսպիսով, որտեղ է տեղավորվում JPG կայքը: Լուսանկարներ ՝ պարզ և պարզ: Wantանկանու՞մ եք վեբ կայքի մեծ ֆոնային լուսանկար: JPG: Productsուցադրվում են ձեր արտադրանքի լուսանկարները: JPG: Կրակոցներ ձեր տարեկան ճամբարային ուղևորությունից: Դուք տեսնում եք, թե ուր եմ գնում այս ամենի հետ.

PNG (Դյուրակիր ցանցային գրաֆիկա) – հիմնականում լոգոների և սրբապատկերների համար

Եվ դա մեզ բերում է PNG: Այն գործելու եղանակը իրականում ինչ-որ չափով նման է GIF ձևաչափի գործելակերպին: Փաստորեն, հին PNG-8 տարբերակը սահմանափակվում է 256 գույներով, բայց մարդիկ այլևս հազիվ թե այդ օգտագործեն.

Այն ձևաչափը, որը մենք սովորաբար օգտագործում ենք, կոչվում է PNG-24, և այն աջակցում է մինչև 16 միլիոն գույների, այսինքն ՝ այն գործում է որպես կորուստ ձևաչափ: Ոչ մի մանրամասն չի կորչում: Երբևէ.

Ներկառուցված ֆայլերի սեղմում կա: Չնայած JPG- ն սեղմում է պատկերները ՝ միմյանց հետ շփոթելով փիքսելային պիքսելները, PNG- ն դա չի անում: Դա նշանակում է, որ դա ֆանտաստիկ է այն պատկերների համար, որտեղ ցանկանում եք փխրուն գծեր: Ավելի վաղ դիտեք իմ շատ պարզ գրաֆիկայի PNG տարբերակը:

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Եվ խոշորացված տարբերակը.

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Պարզ գրաֆիկայի PNG- ի տարբերակը մոտ տաս կիլոբայթ ավելի է, քան JPG տարբերակն է, բայց դա աննշան տարբերություն է որակի տպավորիչ բարձրացման համար. Այնուամենայնիվ, դա ճիշտ է միայն պատկերների առավելագույն նվազագույնի համար ՝ ամուր գույներով և պարզ ձևերով.

Գարիի այդ լուսանկարը, շատ ցուրտ էշը: Նրա PNG տարբերակը կշռում է 2,32 մեգաբայթ, ինչը հսկայական է այդ չափսերի պատկերի համար: Ես այստեղ չեմ ներառել, քանի որ հարգում եմ ձեր թողունակության կամ տվյալների կափարիչի սահմանափակումները.

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

Բանն այն է, որ PNG- ն հազիվ թե առաջին առանձնահատկությունն էր, որն աջակցում էր այս հատկությանը: GIF- ի պատկերները նույնպես կարող են դա անել. PNG- ն, այնուամենայնիվ, ավելի լավ է անում. Այս համեմատության համար ես վերցրի սարսափելի գրաֆիկը, հանեցի սպիտակ ֆոնը և պահպանեցի պատկերը ինչպես PNG, այնպես էլ GIF ձևաչափերով: Այնուհետև ես տեղադրեցի այդ պատկերները մեկ այլ, ավելի մուգ ֆոնի վրա, որպեսզի ցույց տամ ձեզ, թե ինչպես է յուրաքանչյուր ձևաչափը կարգավորում թափանցիկությունը

GIF vs JPG vs PNG - Որ պատկերի ձևաչափը պետք է օգտագործեք և երբ:

Ինչպես տեսնում եք, GIF ձևաչափով ապահովված թափանցիկությունը ձևերը թողնում է բավականին խճճված եզրերով: PNG- ն հաղթում է, ահա.

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

Բոլորը միասին բերելով

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

Խոսելով իրերը պարզ պահելու մասին, ահա այն խաբեբան թերթը, որը ես նշեցի ավելի վաղ.

ՁևաչափՄեծագույն ուժՄեծագույն թուլությունԸնդհանուր օգտագործման համարՏիպ
GIFԱնիմացիաԲարդությունըԱնիմացիոն պատկերներ; մեմերըԿորուստ
JPGԲարդություն և ֆայլերի սեղմումՍեղմումը ավելի պարզ գրաֆիկա է դարձնում վատՆկարներԿորուստ
PNGՊարզ, մաքուր գրաֆիկա; ան windless որակ; թափանցիկությունԼուսանկարների նման բարդ լուսանկարները կարող են ունենալ ֆայլի զանգվածային չափերԼոգո; պարզ գրաֆիկաԱնհայտ

Վերջապես, դրանք պատկերի վաղուց ձևավորված ձևաչափեր են, ուստի դրանք շատ պարզ են օգտագործման համար. Պարզապես դրանք վերբեռնեք ձեր վեբ կայքում և գնացեք: Շատ դժվար կլինի գտնել վեբ կայքի ստեղծողներ (Wix կամ GoDaddy) կամ վեբ հոստեր, որոնք չեն աջակցում բոլոր երեքին.

Երեք ձևաչափերն աջակցվում են նաև բոլոր հիմնական դիտարկիչներում (Chrome, Firefox, Edge, Safari) և ավելի քիչ հայտնի բրաուզերների գերակշիռ մասում: Հետևեք հոդվածում տրված ընդհանուր խորհուրդներին և լավ կլինեք…

…մինչև WebP- ը փոխարինի JPG, GIF և գուցե նույնիսկ PNG: Բայց դա բոլորովին այլ հոդված է, այնպես որ մի սկսեք ինձ.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me