GIF, JPG နဲ႔ PNG - ဘာေတြကြာသလဲ

GIF နဲ႔ JPEG format ေတြဟာ လက္ရွိ Internet မွာ အဓိကသံုးေနတဲ့ ပံု format ေတြပါ။ ဒီ Post မွာ တစ္ခုခ်င္းစီရဲ႕ overview ေလးေတြကို ရွင္းျပမွာျဖစ္ပီး၊ ဘယ္ေနရာမွာ သံုးသင့္တယ္ ဆိုတာပါေရးျပေပးသြားပါမယ္။

The GIF Format

GIF format က အင္တာနက္မွာ ေပၚျပဴလာအျဖစ္ဆံုး format ပါ။ ပံုရဲ႕ အေရာင္တူတဲ့ ေနရာေတြကို compressing လုပ္ပီး သိမ္းေပးထားတဲ့ေနရမွာ ေရာ၊ online မွာ Flash တို႔ ဘာတို႔ မသံုးပဲ animation ထဲ့ႏိုင္တဲ့ ပံု format ဆိုလို႔ သူပဲရွိတာေရာ ေၾကာင့္ပါ။ GIF89a format ဆိုရင္ transparency (ေဖာက္ထြင္းျမင္ႏိုင္ျခင္း) ကိုလဲ supports လုပ္ပါတယ္, ၿပီးေတာ့ interlacing ေပါ့။ (ဒီအေၾကာင္းေတြ ေအာက္မွာ ဆက္ရွင္းပါမယ္)

GIF files ေတြမွာ အေရာင္ေပါင္း 256 ေရာင္ထိ အမ်ားဆံုး သိမ္ထားႏိုင္ပါတယ္။ ဓါတ္ပံုေတြက လြဲရင္ ဒီေလာက္က မဆိုးဘူးေပါ့။ GIF files ေတြမွာ size ခ်ံဳျပစ္တဲ့ method က palett ထဲမွာရွိတဲ့ ကာလာ၊ အေရာင္တန္ဖိုးေတြကို ေလွ်ာ့ျပစ္တာပါပဲ။ သိထားရမွာက - GIF ဖိုင္ေတြမွာ LZW compression scheme လို႔ေခၚတဲ့ ခ်ံဳ႔တဲ့ method ပါပီးသားပါ။ ပံုရဲ႕ ဆိုက္ဒ္ကို တက္ႏိုင္သမွ် အနည္းဆံုး ျဖစ္ေအာင္ ေလွ်ာ့ခ်ေပးတာေပါ့။

Transparency

အေပၚမွာ ေျပာခဲ့သလိုပဲ၊ GIF format ဟာ transparency ကို support လုပ္ပါတယ္။ ဒါေၾကာင့္ Designer ေတြေနနဲ႔ လုပ္တဲ့ ဒီဇိုင္းရဲ႕ background ကို ေဖာက္ျမင္ေနရေအာင္ လုပ္လို႔ရသြားတာေပါ့။ ဥပမာ၊ က်ေနာ္က ပံုတစ္ခုကို အမဲေရာင္နဲ႔ အနီေရာင္စပ္လုပ္ပီး background transprant လုပ္ပီး GIF နဲ႔သိမ္း။ ပီးရင္ အ၀ါေရာင္ ေနာက္ခံေပၚ အဲဒိ GIF ပံုကို တင္လိုက္ရင္၊ ပံုရဲ႕ transprant ျဖစ္ေနတဲ့ background အေရာင္က အ၀ါေရာင္ျမင္ေနရမွာေပါ့။ ေနာက္ခံက transprant ျဖစ္ေနတာကိုး၊

Interlacing

ဒီ GIF file ရဲ႕ interlacing feature ပံုေတြကို loading လုပ္တဲ့အခါမွာ အင္မတန္အသံုး၀င္ပါတယ္။ ဘယ္လိုလဲဆိုရင္၊ ပံုတစ္ပံုကို အင္တာနက္ကေန download လုပ္ၾကည့္တဲ့အခါ ပံုကုိ တဆင့္ျခင္းျပတာပါ။ ပထမ data နဲနဲေလးပဲ download လုပ္ရေသးရင္ ၀ါးတားတားၾကီး။ ေနာက္ေတာ့ တဆင့္ခ်င္း ၾကည္လင္လာတာပါ။ အဲဒိလို ျဖစ္ေအာင္ လုပ္ထားတာကို interlacing လုပ္တယ္လို႔ ေခၚပါတယ္။ သတိထားရမွာက GIF ဖိုင္ေတြကို interlace ျဖစ္ေအာင္ လုပ္လို႔ရွိရင္ ပံုမွန္ size ထက္နဲနဲပိုၾကီးလာတာပါပဲ။ ဒါေၾကာင့္ interlace လုပ္တာကို တကယ္လိုမယ္ထင္တဲ့ ေနရာမွာမွ သံုးေစခ်င္ပါတယ္။

When to use them

ပံုမွန္ေတာ့ GIF files ေတြကို logos, line drawings နဲ႔ icons ေတြမွာ သံုးသင့္ပါတယ္။ ဓါတ္ပံုေတြ၊ resolution ေကာင္းမွျဖစ္မယ့္ art works ေတြမွာ မသံုးပါနဲ႔။ GIF file အတြက္ ဒီဇိုင္းလုပ္တဲ့အခါ gradients ေတြမသံုးပါနဲ႔၊ ဘယ္လိုမွ မလွပါဘူး။ ေနာက္ပီး file size ကို ခ်ံဳႏိုင္သမွ် ခ်ံဳ႕လို႔ရေအာင္ anti-aliasing ကိုလဲ ပိတ္ထားပါ။

The JPEG Format

JPEG format ကေတာ့ ဓါတ္ပံုေတြအတြက္ အဓိက ရည္ရြယ္ၿပီး အေရာင္ေပါင္း 16.7 million ကို supports လုပ္ပါတယ္။ JPEG ရဲ႕ internal compression algorithm က GIF format နဲ႔မတူပါဘူး။ ပံုရဲ႕ information ကိုေျပာင္းပီးသိမ္ပစ္လိုက္လို႔ပါ။ ပံုရဲ႕ quality ကိုေလွ်ာ့ပီး သိမ္းလိုက္ပီးရင္ ျပန္တင္လို႔မရေတာ့ပါဘူး။ ဒါေၾကာင့္ ပံုေတြကို ျပင္တဲ့အခါ back-up ထားၿပီးမွ ျပင္သင့္ပါတယ္။

Progressive JPEG's

ဘယ္ JPEG file မဆို Progressive JPEG အျဖစ္သိမ္ႏိုင္ပါတယ္။ သူက GIF ရဲ႕ interlaced လုပ္တာနဲ႔ အေတာ္ဆင္ပါတယ္။ GIF လုိပဲ visitor ေတြကို lower quality ပံုကိုအရင္ျပတယ္။ ေနာက္ပိုင္းမွ တျဖည္းျဖည္းျခင္း data downloaded ေပၚမူတည္ၿပီး ပံုကိုျပပါတယ္။ Graphic editing tools ေတြသံုးၿပီး အဲလို low quality ကေန၊ original quality ထိ တဆင့္ျခင္းျပတဲ့အခါ အဆင့္ဘယ္ႏွဆင့္ကို သံုးမလဲဆိုတာပါ ျပင္လို႔ရပါတယ္။

When to use

Rule အရေတာ့ JPEG format ေတြကို photographic images (ဓါတ္ပံု) ေတြမွာ သံုးသင့္ပါတယ္။ ဒါမွမဟုတ္ .. 256 color ေလာက္နဲ႔ မလွႏိုင္တဲ့ ပံုေတြ။ Art Creation ေတြမွာေပါ့။

The PNG Format

(PNG stands for Portable Network Graphics, and is an image file format for loss-less compression of images)

တတိယနဲ႔ ေနာက္ဆံုး၊ အသစ္ဆံုး format ကေတာ့ Web မွာ အေတာ္မ်ားမ်ား သံုးေနၾကၿပီျဖစ္တဲ့ PNG format ပါ (Ping လို႔အသံထြက္ပါ)။ PNG ကို GIF ရဲမွာ မရတဲ့ features ေတြရေစခ်င္လို႔ ရည္ရြယ္ၿပီးလုပ္တာပါ။ ေနာက္ၿပီး developer ေတြအတြက္ အျခား format ေတြနဲ႔ patent licenses ကိစၥရႈပ္မွာကိုလဲ ေရွာင္ရွားႏိုင္ေအာင္လို႔ပါတဲ့ (ဒီကိစၥ က်ေနာ္လဲ ေသျခာမရွင္းဘူး :P)။ PNG ကို GIF ရဲ႕ main features ေတြရေအာင္ ဒီဇိုင္းလုပ္ခဲ့တာပါ။ streaming နဲ႔ progressive fiel formats ေတြအပါအ၀င္ေပါ့။ ၿပီးေတာ့ သူ႔မွာ အရမ္းေကာင္းတဲ့ color depth လဲပါပါတယ္။ 24 bit ထိရပါတယ္။

PNG ကို ေနာက္ပိုင္းမွာ က်ယ္က်ယ္ျပန္႔ျပန္႔ သံုးလာၾကမယ္လို႔ ေမွ်ာ္လင့္ေနၾကတယ္တဲ့။ ဒါေပမယ့္ GIF ကိုေတာ့ အစားထိုးႏိုင္ဦးမွာ မဟုတ္ပါဘူး၊ ဘာလို႔ဆို၊ PNG မွာ animation မရလို႔ပါ။

ေနာက္ပိုင္း flash animation ေတြလုပ္တဲ့အခါ PNG ကို က်ယ္က်ယ္ျပန္႔ျပန္႔သံုးလာၾကပါတယ္။ အင္တာနက္ကလဲ ျမန္လာ၊ ကြန္ျပဴတာေတြကလဲ ေကာင္း၊ ေမာနီတာေတြကလဲ အေရာင္ေတြ စိုလာၾကေတာ့ ေနာက္ပိုင္း web design လုပ္တဲ့အခါ အရင္လို limitation ေတြနည္းလာတာအမွန္ပါပဲ။

Disclaimer: Above translation is not a direct translation. Alternations of the ways of describing certain details have been made for better picture.

Original : GIF, JPG and PNG - What's the difference?