Mayroong isang bilang ng mga format ng imahe na maaaring magamit sa mga web page. Ang ilang karaniwang mga halimbawa ay GIF , JPG , at PNG . Karaniwang ginagamit din ang mga file ng SVG sa mga website ngayon, na nagbibigay ng iba pang pagpipilian para sa mga imaheng imahe sa web designer.
GIF Images
Gumamit ng mga file ng GIF para sa mga larawan na may maliit, naayos na bilang ng mga kulay. Ang mga file ng GIF ay palaging nabawasan sa hindi hihigit sa 256 natatanging mga kulay. Ang compression algorithm para sa mga GIF file ay mas kumplikado kaysa sa mga JPG file, ngunit kapag ginamit sa mga flat na imahe ng kulay at teksto ito ay gumagawa ng napakaliit na laki ng file .
Ang format ng GIF ay hindi angkop para sa mga imaheng photographic o mga imahe na may kulay ng gradient. Dahil ang format ng GIF ay may limitadong bilang ng mga kulay, ang mga gradiente at mga larawan ay magtatapos sa pag-banding at pixelation kapag nai-save bilang isang GIF file.
Sa maikling salita, gagamitin mo lamang ang mga GIF para sa mga simpleng larawan na may ilang mga kulay, ngunit maaari mo ring gamitin ang PNGs para sa na rin (higit pa sa na ilang sandali).
JPG Images
Gumamit ng mga larawan ng JPG para sa mga litrato at iba pang mga imahe na may milyon-milyong mga kulay. Gumagamit ito ng isang kumplikadong kompresyong algorithm na nagpapahintulot sa iyo na lumikha ng mas maliit na graphics sa pamamagitan ng pagkawala ng ilan sa kalidad ng imahe. Ito ay tinatawag na isang "lossy" compression dahil ang ilan sa mga impormasyon ng imahe ay nawala kapag ang imahe ay naka-compress.
Ang format ng JPG ay hindi angkop sa mga larawan na may teksto, malalaking bloke ng solid na kulay, at simpleng mga hugis na may malulutong na gilid. Ito ay dahil kapag ang imahe ay naka-compress, ang teksto, kulay, o mga linya ay maaaring lumabo na nagreresulta sa isang imahe na hindi masidhi dahil ito ay mai-save sa ibang format.
Ang mga larawang JPG ay pinakamahusay na ginagamit para sa mga litrato at mga imahe na may maraming at maraming natural na mga kulay.
Mga Larawan ng PNG
Ang format ng PNG ay binuo bilang isang kapalit para sa format ng GIF kapag lumitaw na ang mga imaheng GIF ay sasailalim sa isang royalty fee. Ang PNG graphics ay may mas mahusay na rate ng compression kaysa sa mga imahe ng GIF na nagreresulta sa mas maliliit na imahe kaysa sa parehong file na nai-save bilang isang GIF. Ang mga file ng PNG ay nag-aalok ng transparency ng alpha, ibig sabihin maaari kang magkaroon ng mga lugar ng iyong mga larawan na alinman sa ganap na transparent o kahit na gumamit ng isang hanay ng transparency ng alpha. Halimbawa, ang isang drop shadow ay gumagamit ng isang hanay ng mga epekto ng transparency at magiging angkop para sa isang PNG (o maaari mo lamang tapusin sa amin gamit ang CSS shadows sa halip).
Ang mga imahe ng PNG, tulad ng GIF, ay hindi angkop sa mga litrato. Posible upang makakuha ng paligid ng isyu ng banding na nakakaapekto sa mga litrato na nai-save bilang mga file ng GIF gamit ang mga totoong kulay, ngunit maaaring magresulta ito sa napakalaki na mga imahe. Ang mga imahe ng PNG ay hindi rin sinusuportahan ng mas lumang mga cell phone at tampok na mga telepono.
Ginagamit namin ang PNG para sa anumang file na nangangailangan ng transparency. Gumagamit din kami ng PNG-8 para sa anumang file na magiging angkop bilang isang GIF, sa halip gamitin ang format na PNG na ito.
SVG Images
Ang ibig sabihin ng SVG ay Scalable Vector Graphic. Hindi tulad ng mga format na batay sa raster na natagpuan sa JPG, GIF, at PNG, ang mga file na ito ay gumagamit ng mga vectors upang lumikha ng napakaliit na mga file na maaaring i-render sa anumang laki na walang pagkawala ng kalidad ng pagtaas sa laki ng file. Nilikha ang mga ito para sa mga guhit tulad ng mga icon at kahit mga logo.
Paghahanda ng mga Imahe para sa Paghahatid sa Web
Anuman ang format ng imahe na iyong ginagamit, at tiyak na gumamit ang iyong website ng maraming iba't ibang mga format sa lahat ng mga pahina nito, kailangan mong tiyakin na ang lahat ng mga larawan sa site na iyon ay handa para sa paghahatid ng web . Ang mga malalaking larawan ay maaaring maging sanhi ng isang site na dahan-dahan na tumakbo at makaapekto sa pangkalahatang pagganap. Upang labanan ito, ang mga larawang iyon ay dapat na ma-optimize upang mahanap ang balanse sa pagitan ng mataas na kalidad at ang pinakamababang sukat ng file na posible sa antas ng kalidad na iyon.
Ang pagpili ng tamang mga format ng imahe ay bahagi ng labanan, ngunit tinitiyak din na inihanda mo ang mga file na iyon ay ang susunod na hakbang sa mahalagang proseso ng paghahatid ng web.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard.