PNG ကို WEBP သို့

1. နိဒါန်း

PNG မှ WebP ပြောင်းစက် သည် မြန်ဆန်သော Browser အခြေပြုကိရိယာတစ်ခုဖြစ်ပြီး PNG ပုံများကို ခေတ်မီသော WebP ဖိုင်ဖော်မတ်သို့ ပြောင်းလဲပေးကာ ပုံအရည်အသွေးနှင့် ဖိသိပ်မှု (Compression) အဆင့်ကိုလည်း သင်ကိုယ်တိုင် ထိန်းချုပ်နိုင်စေပါသည်။ မြင်သာသောပုံအရည်အသွေးကို သိသိသာသာ မလျော့စေဘဲ ဖိုင်အရွယ်အစားကို လျှော့ချလိုပါက ဤကိရိယာသည် ရိုးရှင်းပြီး ထိရောက်သော ဖြေရှင်းချက်တစ်ခုကို ပေးစွမ်းပါသည်။

PNG ဖိုင်များကို အရည်အသွေးမြင့် ဂရပ်ဖစ်များနှင့် အကြည်ပုံများ (Transparent Images) အတွက် ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုကြသော်လည်း ဖိုင်အရွယ်အစားမှာ ကြီးမားနိုင်ပါသည်။ အခြားတစ်ဖက်တွင် WebP သည် ပိုမိုကောင်းမွန်သော ဖိသိပ်မှုနှင့် စွမ်းဆောင်ရည်ကို ပေးနိုင်ရန် ဒီဇိုင်းထုတ်ထားသောကြောင့် ဝဘ်ဆိုက်များ၊ အက်ပ်များနှင့် ဒစ်ဂျစ်တယ်ထုတ်ကုန်များအတွက် အထူးသင့်တော်ပါသည်။ PNG ကို WebP သို့ ပြောင်းလဲခြင်းဖြင့် Bandwidth အသုံးပြုမှုကို လျှော့ချနိုင်ပြီး စာမျက်နှာဖွင့်နှုန်းကို မြှင့်တင်ကာ အသုံးပြုသူအတွေ့အကြုံကိုလည်း ပိုမိုကောင်းမွန်စေပါသည်။

ဤကိရိယာသည် Browser အတွင်းတွင်သာ အလုပ်လုပ်သောကြောင့် သင့်ပုံများကို Server သို့ တင်ပို့ခြင်းမရှိဘဲ စက်အတွင်း၌သာ လုပ်ဆောင်ပါသည်။ Web Developer များ၊ Designer များ၊ Blogger များ၊ Marketer များနှင့် ပုံများကို ပိုမိုမြန်ဆန်စွာ ဖွင့်နိုင်စေရန်နှင့် SEO စွမ်းဆောင်ရည်ကောင်းမွန်စေရန် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်လိုသူတိုင်းအတွက် သင့်တော်ပါသည်။

2. အလုပ်လုပ်ပုံ

ဤကိရိယာသည် Browser အတွင်းရှိ ပုံပြောင်းလဲမှုနည်းပညာကို အသုံးပြု၍ PNG ပုံကို WebP ဖိုင်ဖော်မတ်သို့ ပြောင်းလဲပေးပါသည်။ ပြောင်းလဲမှုကို လုံခြုံပြီး ထိရောက်စွာ ဆောင်ရွက်နိုင်ရန် FileReader နှင့် HTML5 Canvas ကဲ့သို့သော ခေတ်မီ Browser API များကို အသုံးပြုထားပါသည်။

ထည့်သွင်းရမည့် အချက်များ

• ပုံ (လိုအပ်သည်) – .png ဖိုင်အမျိုးအစားကိုသာ တင်ရပါမည်။ အခြားဖိုင်အမျိုးအစားများကို လက်မခံပါ။
• အရည်အသွေး (လိုအပ်သည်) – 1 မှ 100 အတွင်းရှိ ကိန်းဂဏန်းတန်ဖိုးဖြစ်ပြီး ထွက်ရှိလာမည့် WebP ပုံ၏ ဖိသိပ်မှုအဆင့်ကို ထိန်းချုပ်ပေးပါသည်။
  • 1 = ဖိသိပ်မှု အများဆုံး (ဖိုင်သေး၊ အရည်အသွေးနည်း)
  • 100 = ဖိသိပ်မှု အနည်းဆုံး (ဖိုင်ကြီး၊ အရည်အသွေးမြင့်)

ပြောင်းလဲမှု လုပ်ငန်းစဉ်

PNG ပုံတစ်ပုံကို ရွေးချယ်သောအခါ ကိရိယာသည် FileReader ဖြင့် ဖိုင်ကို ဖတ်ပြီး Base64 Data URL အဖြစ် ပြောင်းလဲပေးပါသည်။ ထို့နောက် ပုံ၏ မူလအကျယ်နှင့် အမြင့်ကို ရယူရန် HTML Image Object ထဲသို့ ထည့်သွင်းပြီး မူလ Resolution ကို ထိန်းသိမ်းနိုင်ရန် တူညီသော အရွယ်အစားရှိသော Canvas တစ်ခုကို ဖန်တီးပါသည်။

ပုံကို Canvas ပေါ်တွင် ရေးဆွဲပြီးနောက် သတ်မှတ်ထားသော အရည်အသွေးအတိုင်း image/webp ဖိုင်ဖော်မတ်ဖြင့် ပုံအသစ်ကို ထုတ်ပေးပါသည်။ ထွက်ရှိလာသော WebP ပုံကို ချက်ချင်း Preview အဖြစ် ပြသပြီး Download လုပ်နိုင်ပါသည်။

အတည်ပြုစည်းမျဉ်းများ

• .png ဖိုင်များကိုသာ လက်ခံပါသည်။
• အရည်အသွေးတန်ဖိုးသည် 1 မှ 100 အတွင်းရှိ ဂဏန်းဖြစ်ရပါမည်။
• မပြောင်းလဲမီ ပုံဖိုင်တစ်ခုကို ရွေးချယ်ထားရပါမည်။

ထွက်ရှိမည့် ဖိုင်ဖော်မတ်

• ဖိုင်ဖော်မတ် - WebP (.webp)
• Resolution - မူလ PNG နှင့် တူညီသည်
• ဖိသိပ်မှု - ရွေးချယ်ထားသော အရည်အသွေးတန်ဖိုးအပေါ် မူတည်သည်
• Preview - Browser တွင် ချက်ချင်း ပြသသည်

ကန့်သတ်ချက်များ

• PNG ဖိုင်များကိုသာ ပြောင်းလဲနိုင်ပါသည်။
• အလွန်ကြီးမားသော ပုံများသည် Browser Memory ကို များစွာ အသုံးပြုနိုင်ပါသည်။
• Transparency ကို ပံ့ပိုးပေးသော်လည်း အရည်အသွေးနိမ့်သောအခါ ဖိသိပ်မှုကြောင့် ပုံ၏ ကြည်လင်မှုကို ထိခိုက်စေနိုင်ပါသည်။

3. ဤကိရိယာကို အသုံးပြုနည်း

1. ပုံ အကွက်ကို နှိပ်ပြီး သင့်စက်မှ PNG ဖိုင်တစ်ခုကို ရွေးချယ်ပါ။
2. အရည်အသွေးတန်ဖိုးကို 1 မှ 100 အတွင်း ထည့်သွင်းပါ။
3. လုပ်ဆောင်ရန် ခလုတ်ကို နှိပ်ပါ (သို့မဟုတ် အရည်အသွေးကို ပြောင်းလဲခြင်းဖြင့် အလိုအလျောက် ပြောင်းလဲစေပါ)။
4. ပြောင်းလဲပြီးသော WebP ပုံကို ချက်ချင်း Preview ကြည့်ပါ။
5. WebP ဖိုင်ကို သင့်စက်ထဲသို့ သိမ်းဆည်းရန် Download ခလုတ်ကို နှိပ်ပါ။

4. လက်တွေ့အသုံးပြုမှု ဥပမာများ

ဥပမာ 1 - Website ပုံများကို အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ခြင်း

ထည့်သွင်းမှု -

• ဖိုင် - banner.png (1920×1080)
• အရည်အသွေး - 80

ထွက်ရှိမှု -

• ဖိုင် - result.webp
• Resolution - 1920×1080
• ပုံအရည်အသွေး အနည်းငယ်သာ ကွာခြားပြီး ဖိုင်အရွယ်အစား ပိုသေးသည်

Homepage ဖွင့်ချိန်ကို လျှော့ချပြီး ပုံ၏ကြည်လင်မှုကို ထိန်းသိမ်းလိုသည့်အခါ အထူးသင့်တော်ပါသည်။

ဥပမာ 2 - Thumbnail များအတွက် ဖိသိပ်မှု အများဆုံး

ထည့်သွင်းမှု -

• ဖိုင် - product.png (800×800)
• အရည်အသွေး - 40

ထွက်ရှိမှု -

• ဖိုင် - result.webp
• Resolution - 800×800
• ဖိုင်အရွယ်အစား သိသိသာသာ လျှော့ချထားသည်

Pixel တစ်ခုချင်းစီ၏ အသေးစိတ်ထက် ဖိုင်အရွယ်အစား ပိုအရေးကြီးသော Product Listing များ သို့မဟုတ် Gallery Thumbnail များအတွက် အထူးသင့်တော်ပါသည်။

5. Developer များအတွက် အသုံးပြုနိုင်သည့် အခြေအနေများ

- Client-Side ပုံများကို အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ခြင်း

ဤ Logic ကို Web Application များတွင် ထည့်သွင်းအသုံးပြုပြီး အသုံးပြုသူတင်သော PNG ပုံများကို Server သို့ မတင်မီ WebP သို့ ပြောင်းလဲခြင်းဖြင့် Storage နှင့် Bandwidth ကုန်ကျစရိတ်ကို လျှော့ချနိုင်ပါသည်။

- CMS ပုံဖိသိပ်မှု

Content Management System (CMS) အတွင်းရှိ Blog ပုံများကို WebP သို့ အလိုအလျောက် ပြောင်းလဲပေးခြင်းဖြင့် Core Web Vitals နှင့် SEO စွမ်းဆောင်ရည်ကို မြှင့်တင်နိုင်ပါသည်။

- JavaScript ပေါင်းစည်းမှု ဥပမာ

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
const webpData = canvas.toDataURL('image/webp', 0.85);

- Upload မလုပ်မီ PHP အတည်ပြုခြင်း

if($_FILES['image']['type'] !== 'image/png') {
    die('PNG ဖိုင်များကိုသာ ခွင့်ပြုပါသည်။');
}

လုံခြုံရေးနှင့် အတည်ပြုမှုဆိုင်ရာ ထည့်သွင်းစဉ်းစားရန် အချက်များ

• Server ပေါ်တွင် MIME Type များကို အမြဲစစ်ဆေးပါ။
• Memory ကုန်ဆုံးခြင်းကို ကာကွယ်ရန် ဖိုင်အရွယ်အစားကို ကန့်သတ်ပါ။
• သိမ်းဆည်းမီ ဖိုင်အမည်များကို လုံခြုံစွာ ပြင်ဆင်ပါ။
• လုံခြုံသော Form Submission များအတွက် CSRF ကာကွယ်မှုကို အသုံးပြုပါ။

6. အမေးများသော မေးခွန်းများ

ဤ PNG မှ WebP ပြောင်းစက်က ဘာလုပ်ပေးသလဲ?

၎င်းသည် PNG ပုံကို သင့် Browser အတွင်းတွင်ပင် WebP ဖိုင်ဖော်မတ်သို့ ပြောင်းလဲပေးပြီး ဖိသိပ်မှုအရည်အသွေးကို သင်ကိုယ်တိုင် ထိန်းချုပ်နိုင်စေပါသည်။

ဤကိရိယာသည် ကျွန်ုပ်၏ပုံများကို Server သို့ Upload လုပ်ပါသလား?

မလုပ်ပါ။ ပြောင်းလဲမှုအားလုံးကို HTML5 Canvas ဖြင့် သင့် Browser အတွင်းတွင်သာ လုပ်ဆောင်သောကြောင့် ပုံသည် သင့်စက်ပေါ်တွင်သာ ရှိနေပါသည်။

မည်သည့် အရည်အသွေးတန်ဖိုးကို အသုံးပြုသင့်သလဲ?

Web အသုံးပြုမှုအများစုအတွက် 75 မှ 85 အတွင်းရှိ တန်ဖိုးသည် ပုံကြည်လင်မှုနှင့် ဖိုင်အရွယ်အစားကြား မျှတသော ရလဒ်ကို ပေးစွမ်းပါသည်။

ပုံ၏ Resolution ပြောင်းလဲသွားပါသလား?

မပြောင်းလဲပါ။ ထွက်ရှိလာသော WebP ပုံသည် မူလ PNG ဖိုင်၏ အကျယ်နှင့် အမြင့်ကို အတိအကျ ထိန်းသိမ်းထားပါသည်။

အခြားဖိုင်ဖော်မတ်များကိုလည်း ပြောင်းလဲနိုင်ပါသလား?

မရပါ။ ဤကိရိယာသည် WebP သို့ ပြောင်းရန် PNG ဖိုင်များကိုသာ လက်ခံပါသည်။

WebP သည် Transparency ကို ပံ့ပိုးပါသလား?

ပံ့ပိုးပါသည်။ WebP သည် PNG ကဲ့သို့ Transparency ကို ပံ့ပိုးသောကြောင့် Logo များနှင့် UI Graphic များအတွက် သင့်တော်ပါသည်။

SEO အတွက် WebP က ပိုကောင်းသလား?

ပုံဖိုင်အရွယ်အစား သေးငယ်ခြင်းသည် Page Load Speed ကို မြှင့်တင်နိုင်ပြီး SEO စွမ်းဆောင်ရည်နှင့် အသုံးပြုသူအတွေ့အကြုံအပေါ် အပြုသဘောဆောင်သော သက်ရောက်မှုရှိနိုင်ပါသည်။