GIF vs JPG vs PNG – Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Kaya, binuo mo ang iyong unang website, at kailangan mo ng ilang mga larawan para dito. Nagsasagawa ka ng ilang pananaliksik, sabi ng isang tao na “JPG,” at isa pa ang nagsabi tungkol sa “PNG.” Alam mo kung ano ang isang GIF, sapagkat ito ang gumagalaw, ngunit hindi ka lubos na sigurado kung ano ang ibig sabihin ng lahat ng mga extension ng file na ito o kung bakit mahalaga ito sa iyong website. Ano ang tunay na pagkakaiba?!


Ang pagpasok sa disenyo ng web ay nagpapakilala sa isang buong bagong mundo ng mga kadahilanan upang isaalang-alang kapag pumipili ng tamang format ng imahe para sa trabaho sa kamay. Para sa isa, mayroong laki ng file. Tinutukoy nito kung magkano ang puwang na nakuha sa hosting server, gaano katagal ang larawan upang mai-load, at kung magkano ang paglilipat ng data ay ginagamit sa plano ng data ng bisita.

Kung gayon may kalidad din na isaalang-alang. Nais mo bang gumamit ng isang “lossy” na format, na nagsasakripisyo ng ilan sa mga detalye ng orihinal na larawan para sa isang mas maliit na laki ng file? O paano ang tungkol sa isang “pagkawala ng pagkawala” na format, na may kalidad ng peerless, ngunit may sariling mga drawbacks? Kumusta naman ang mga larawan na may mga transparent na background?

Kung nasa isip mo ang mga tanong na iyon, mayroon kaming mga sagot para sa iyo. Personal kong hinukay ang mga teknikal na aspeto ng bawat format upang hindi mo na kailangan. Basahin ang para sa lahat ng mga detalye, o tumungo sa ilalim, kung saan isinama ko ang isang maliit na sheet ng cheat.

GIF (Graphics Interchange Format) – para sa mga Bata sa Pagsayaw

Ah, ang GIF. Nagdala ito sa amin ng mga kaibig-ibig na pusa, sayaw na mga sanggol, at dagdag na makintab na mga pindutan na sparkled at gleamed.

Maaari mong isipin ang mga animated na GIF bilang mga hudyat sa kumplikado, animated na UIs na mayroon kami ngayon. Pinukaw nila ang mga Flash site, na pagkatapos ay pinalitan ng mga advanced na mga animation ng JavaScript na nakikita natin ngayon. Ang mga sanggol na sumasayaw ay nagpapahintulot sa maraming tao na makita ang potensyal sa internet, kakaiba tulad ng sinasabi nito.

Ang aktwal na format ay binuo noong 1987, at simple. Nakakakuha ka ng 256 na kulay bawat imahe, napili mula sa RGB (Red, Green, and Blue) spectrum. Kung mayroon kang isang animated na GIF, pagkatapos ang bawat frame ay makakakuha ng sariling palette. Ang sistemang ito ay tumutulong na mapanatili ang mga laki ng file … medyo nagsasalita. Ang mga mahabang animated GIF sa malalaking resolusyon ay madaling tumakbo sa daan-daang mga megabytes, na maaaring masaktan ng kaunti kung ikaw ay nasa isang naka-cache na plano ng data.

Ang mga limitasyon ng format na ito ay nangangahulugan din na hindi ito angkop para sa pagpapakita ng mga litrato. Ang mga limitasyon ng kulay ay nangangahulugang 256 hues at shade ay dapat gawin ang trabaho na karaniwang ginagawa ng 16 milyong mga kulay sa spectrum ng RGB. Narito ang isang halimbawa:

Ito ay isang asno na kinunan ko ng litrato noong Oktubre 2017:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Tinawagan ko siyang Gary, at medyo ginaw siya tungkol sa buong bagay. Mahusay na modelo. Pa rin, iyon ay talagang isang mataas na kalidad na imahe ng JPG. Narito ang parehong larawan, ngunit sa format ng GIF:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Tingnan kung paano ito tila tulad ng isang watercolor? Ngayon, ito ay perpektong okay para sa mga animation – hindi dapat tingnan ng mga tao ang masarap na detalye ng bawat frame. Dapat nilang tamasahin ang pagkilos.

Kapag nagtatayo ng isang website, hindi ko gagamitin ang mga GIF bilang bahagi ng aktwal na UI … ang animated na background ng mga nakaraang taon ay pinagmumultuhan nating lahat. Pa rin, ang mga GIF ay pinakamahusay na ginagamit bilang nilalaman. Itapon ang isa sa gitna ng iyong post sa blog upang magmaneho ng isang punto sa bahay, o magaan ang pakiramdam.

JPG (Joint Photographic Experts Group) – para sa Mga Friendly Donkey, at Iba pang Mga Imahe na High-Detail

Mula pa nang mailabas ang format na JPG noong 1992, ito ay isang sangkap ng online na imahe, photography-grade photography, at anumang iba pang kaso ng paggamit na nangangailangan ng isang malaking halaga ng detalye sa isang maliit na laki ng file. Ang JPG ay nangingibabaw sa loob ng mahabang panahon dahil binibigyan ka nito nang eksakto na: maraming detalye, medyo maliit na laki ng file.

Sa mga format sa listahang ito, ang JPG ay ang pinakamahusay na pagpipilian para sa mga larawan na may maraming kulay at detalye. Napakaangkop din ito dahil maaari mong ma-export ang mga imahe ng JPG sa iba’t ibang antas ng kalidad, na nagbibigay-daan sa iyo upang magpasya nang eksakto kung magkano ang kalidad na nais mong ipagpalit para sa mas maliit na laki ng file.

Tingnan natin ang isa pang mabuting matandang kaibigan na si Gary. Narito siya sa isang imahe ng JPG na may kalidad na nakatakda sa 100 (ang pinakamataas na halaga). Ang imahe ay “tumitimbang” 633 kilobyte.

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

At ngayon, itakda ang kalidad ng imahe sa 80. Kung titingnan mo nang mabuti, ang detalye ay tiyak na nawala, ngunit hindi ganoon. At kahit na sa kaunting pagkawala ng detalye na ito, ang laki ng imahe ay nabawasan sa 121 kilobyte.

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Sa antas ng kalidad ng 50, nagsisimula ang imahe upang ipakita ang mas malubhang compression ng imahe. Gayunpaman, ang pagbawas ng pagbabalik sa mga tuntunin ng laki ng file ay kapansin-pansin. Nawala lamang kami sa 41 kilobyte, na bumaba sa amin sa 80 sa kabuuan.

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

At sa isang kalidad na antas ng 30, hindi lang ito katumbas ng halaga. 65.4 kilobyte.

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Kaya, sa pangkalahatan ay nais mong mapanatili ang halaga ng kalidad ng imahe sa paligid ng 80, at kadalasan hindi ito nagkakahalaga ng mas mababa kaysa 70 sa lahat. Pumunta masyadong mababa, at natapos mo ang pagkawala ng maraming mga detalye, na may hindi maraming upang ipakita para sa mga ito sa mga tuntunin ng nabawasan ang laki ng file.

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Dapat mong tandaan iyon Ang built-in na compression ng JPG ay may posibilidad na huwag maglaro ng magagandang mga imahe na nangangailangan ng makinis, malulutong na linya, tulad ng mga imahe na may teksto sa isang solidong background, o mga logo. Upang ipakita sa iyo ang ibig kong sabihin, nais kong ipakita ang napaka-simpleng graphic na ito:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Itinakda ko ang kalidad sa 70 upang mas madaling ipakita sa iyo ang ibig kong sabihin. Kung titingnan mo nang mabuti ang imahe, dapat mong makita na ang mga gilid sa paligid ng teksto at ang asul na hugis ay malabo. Narito ang isang naka-zoom na bersyon:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Kaya kung saan naaangkop ang JPG sa isang website? Mga larawan, payak at simple. Gusto mo ng isang malaking larawan sa background para sa website? JPG. Ipinapakita ang mga larawan ng iyong mga produkto? JPG. Mga shot mula sa iyong taunang paglalakbay sa kamping? Nakita mo kung saan ako sasama dito.

PNG (Portable Network Graphics) – Karamihan sa mga logo at Icon

At iyon ang nagdadala sa amin sa PNG. Ang paraan ng paggawa nito ay talagang medyo katulad sa paraan ng paggana ng GIF. Sa katunayan, ang dating variant ng PNG-8 ay limitado sa 256 na kulay, ngunit hindi na gaanong ginagamit iyon ng mga tao.

Ang format na kadalasang ginagamit namin ay tinatawag na PNG-24, at sinusuportahan ito ng hanggang sa 16 milyong mga kulay, nangangahulugang gumaganap ito bilang isang walang pagkawala ng format. Walang detalyadong nawala. Kailanman.

May built-in na compression file. Habang pinipilit ng JPG ang mga imahe sa pamamagitan ng uri ng mga blurring na magkasama, hindi ito ginagawa ng PNG. Nangangahulugan ito na hindi kapani-paniwala para sa mga imahe kung saan mo nais ang mga malulutong na linya. Tingnan ang bersyon ng PNG ng aking napaka-simpleng graphic mula sa mas maaga:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

At ang naka-zoom-in na bersyon:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Ang bersyon ng PNG ng simpleng graphic ay tungkol sa sampung kilobyt na mas malaki kaysa sa JPG bersyon, ngunit iyon ay isang kapabayaang pagkakaiba para sa isang kahanga-hangang pagtaas ng kalidad. Gayunpaman, ito ay totoo lamang para sa pinaka minimalist ng mga imahe, na may solidong kulay at simpleng mga hugis.

Na larawan ni Gary, ang medyo chilling na asno? Ang bersyon ng PNG nito ay tumitimbang sa 2.32 megabytes, na napakalaki para sa isang imahe ng mga sukat na iyon. Hindi ko ito kasama dito dahil nirerespeto ko ang anumang mga limitasyon ng bandwidth o data cap na maaaring mayroon ka.

Bilang isang bonus, sinusuportahan ng PNG ang transparency, na nangangahulugang maaari kang kumuha ng imahe ng PNG na walang background, at i-overlay ito sa anumang uri ng background na gusto mo.

Ang bagay ay, ang PNG ay bahagya ang unang format ng imahe upang suportahan ang tampok na ito; Ang mga imahe ng GIF ay maaaring gawin ito. Gayunpaman, mas mahusay ang PNG. Para sa paghahambing na ito, kinuha ko ang kahila-hilakbot na graphic, tinanggal ang puting background, at nai-save ang imahe sa parehong mga format ng PNG at GIF. Inilagay ko ang mga larawang iyon sa isa pa, mas madidilim na background upang ipakita sa iyo kung paano ang bawat format ay humahawak ng transparency:

GIF vs JPG vs PNG - Aling Format ng Imahe ang Dapat mong Gumamit at Kailan?

Tulad ng nakikita mo, ang transparency na ibinigay ng format ng GIF ay nag-iiwan ng mga hugis na sa halip na mga malutong na gilid. Nanalo ang PNG, dito.

Sa mga website, ang PNG ay karaniwang ginagamit para sa mga bagay tulad ng mga logo, mga icon, at sa pangkalahatan ay napaka-simpleng graphics. Ginagamit din ang mga ito para sa mga ad, at kung minsan para sa napakaliit na mga imahe na nai-imahe ng “thumbnail”, kung saan pinahahalagahan ang sobrang detalye ng isang pagkawala ng pormat.

Pinagsasama Ito Lahat

Maraming malaman tungkol sa mga format ng imahe na ito. Ang bawat isa ay may sariling kasaysayan at paraan ng paggawa ng mga bagay. Ang impormasyon sa artikulong ito ay bahagya na kumamot sa ibabaw, at ang bawat format sa sarili nitong ay madaling mapunan ang isang libro o tatlo. Ngunit para sa pag-upo at pagpapatakbo ng iyong website, mas mahusay na panatilihing simple ang mga bagay.

Sa pagsasalita ng pagpapanatili ng mga bagay na simple, narito ang cheat sheet na nabanggit ko kanina:

FormatPinakadakilang lakasPinakamalaking kahinaanKaraniwang Ginagamit Para saUri
GIFAnimasyonPagiging kumplikadoMga animated na imahe; memesLossy
JPGPagiging kumplikado at compression ng fileAng kompresyon ay ginagawang mas simple ang hitsura ng mga graphicMga larawanLossy
PNGSimple, malinis na graphics; walang pagkawala ng kalidad; aninawAng mga kumplikadong imahe tulad ng mga larawan ay maaaring magkaroon ng napakalaking sukat ng fileMga logo; simpleng graphicsWalang kamalian

Sa wakas, ang mga ito ay matagal nang naitatag na mga format ng imahe, kaya medyo simple silang gamitin: Mag-upload lamang ito sa iyong website, at pumunta. Napakahirap, makahanap ng mga tagabuo ng website (tulad ng Wix o GoDaddy) o mga web host na hindi sumusuporta sa lahat ng tatlo.

Ang tatlong mga format ay sinusuportahan din sa lahat ng mga pangunahing browser (Chrome, Firefox, Edge, Safari) at ang karamihan sa mga hindi kilalang browser. Sundin ang pangkalahatang payo sa artikulo, at magiging maayos ka…

…hanggang mapalitan ng WebP ang JPG, GIF, at marahil kahit PNG. Ngunit iyon ay isang buong magkakaibang artikulo, kaya huwag mo ako simulan.

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