Image Optimization

💡 ရည်ရွယ်ချက်

သင့်လျော်တဲ့ ပုံအမျိုးအစား (Image Formats) တွေကို ရွေးချယ်တတ်ဖို့၊ ထိရောက်တဲ့ Compression (ဖိုင်အရွယ်အစား ချုံ့နည်း) တွေကို အသုံးပြုတတ်ဖို့၊ ဖုန်း၊ ကွန်ပျူတာ အစရှိတဲ့ Screen အရွယ်အစား မျိုးစုံနဲ့ ကိုက်ညီအောင် ပုံတွေကို ပြင်ဆင်တတ်ဖို့ (Responsive Images) နဲ့ ပုံတွေကြောင့် Website နှေးကွေးမှုကို သိသိသာသာ လျှော့ချနိုင်ဖို့အတွက် Lazy Loading နည်းပညာကို အသုံးပြုတတ်ဖို့ သင်ယူကြပါမယ် ခင်ဗျာ။

ဘာကြောင့် ပုံတွေကို အထူးဂရုစိုက်သင့်သလဲ?

Website တစ်ခုရဲ့ စုစုပေါင်း ဖိုင်အရွယ်အစား (Total Byte Size) ရဲ့ အများစုဟာ ပုံတွေ (Images) ကြောင့် ဖြစ်တတ်ပါတယ်။ ပုံတွေကို စနစ်တကျ မပြင်ဆင် (Optimize မလုပ်) ထားဘူးဆိုရင် Website ကို သိသိသာသာ နှေးကွေးသွားစေနိုင်ပြီး၊ သုံးစွဲသူတွေရဲ့ မိုဘိုင်း အင်တာနက် Data တွေကိုလည်း အလဟဿ ကုန်ဆုံးစေပါတယ်။

သင့်လျော်တဲ့ ပုံ Format ကို ရွေးချယ်ခြင်း

ပုံအမျိုးအစား (ရည်ရွယ်ချက်) ပေါ် မူတည်ပြီး အသုံးပြုသင့်တဲ့ Format တွေက ကွဲပြားပါတယ်။

JPEG (သို့မဟုတ် JPG)

• အသင့်တော်ဆုံး: ဓာတ်ပုံများ၊ အရောင်အသွေး စုံလင်ပြီး ရောစပ်နေတဲ့ (Gradients) ပုံတွေ။
• အားသာချက်: ဓာတ်ပုံတွေအတွက် ဖိုင်အရွယ်အစားကို ကောင်းကောင်း သေးငယ်အောင် ချုံ့နိုင်ပါတယ်။
• အားနည်းချက်: ပြင်းပြင်းထန်ထန် ချုံ့လိုက်ရင် ပုံရဲ့ အရည်အသွေး (Quality) အနည်းငယ် ကျသွားနိုင်ပါတယ်။ နောက်ခံ အကြည် (Transparent Background) ကို လက်မခံပါဘူး။

PNG (Portable Network Graphics)

• အသင့်တော်ဆုံး: နောက်ခံ အကြည် (Transparent Background) လိုအပ်တဲ့ ပုံတွေ (ဥပမာ - Logos များ၊ Icons များ)၊ စာသားတွေ ပါဝင်တဲ့ ပုံတွေ သို့မဟုတ် အရည်အသွေး အတိအကျ ကောင်းမွန်ဖို့ လိုအပ်တဲ့ ပုံတွေ (ဥပမာ - Screenshots များ)။
• အားသာချက်: ချုံ့လိုက်တဲ့အခါမှာ အရည်အသွေး လုံးဝ မကျဆင်းပါဘူး (Lossless compression)။
• အားနည်းချက်: များသောအားဖြင့် JPEG ထက် ဖိုင်အရွယ်အစား ပိုကြီးတတ်ပါတယ်။

WebP

• အသင့်တော်ဆုံး: JPEG နဲ့ PNG နှစ်မျိုးလုံးရဲ့ နေရာမှာ အစားထိုး အသုံးပြုဖို့အတွက် ဖန်တီးထားတဲ့ ခေတ်မီ Format ပါ။ အရည်အသွေး မကျဘဲ ချုံ့နိုင်သလို၊ အရည်အသွေး နည်းနည်းလျှော့ပြီးလည်း ချုံ့နိုင်ပါတယ်။ Transparent Background နဲ့ Animation တွေကိုပါ လက်ခံပါတယ်။
• အားသာချက်: အရည်အသွေး တူညီတဲ့တိုင်အောင် JPEG/PNG တို့ထက် ဖိုင်အရွယ်အစား သိသိသာသာ ပိုသေးငယ်ပါတယ်။
• အားနည်းချက်: အရမ်း ဟောင်းနွမ်းနေတဲ့ Browser တွေ (ဥပမာ - IE) က လက်မခံပါဘူး။ ဒါပေမဲ့ အောက်မှာပြထားသလို <picture> tag ကို သုံးပြီး အစားထိုး (Fallback) ပုံတွေ ထည့်ပေးထားလို့ ရပါတယ်။

AVIF (AV1 Image File Format)

• အသင့်တော်ဆုံး: WebP နဲ့ ဆင်တူပေမဲ့ ပိုပြီး မျိုးဆက်သစ်ကျတဲ့ Format ဖြစ်ပါတယ်။ အထူးသဖြင့် ဖိုင်အရွယ်အစားကို အလွန် သေးငယ်အောင် ချုံ့နိုင်ပါတယ်။
• အားသာချက်: WebP ထက်တောင် ပိုပြီး ကောင်းကောင်း ချုံ့နိုင်ပါတယ်။ HDR (High Dynamic Range) ကို လက်ခံပါတယ်။ ယခုအခါ Browser အများစုကလည်း အပြည့်အဝ လက်ခံလာကြပါပြီ။
• အားနည်းချက်: Format အသစ် ဖြစ်နေသေးလို့ WebP လောက်တော့ Browser Support မပြည့်စုံသေးပါဘူး။

SVG (Scalable Vector Graphics)

• အသင့်တော်ဆုံး: Logos များ၊ Icons များ၊ သရုပ်ဖော်ပုံ (Illustrations) များနဲ့ အရည်အသွေး လုံးဝ မကျဆင်းဘဲ ဘယ်အရွယ်အစားမဆို အကြီးအသေး ချဲ့နိုင်ဖို့ လိုအပ်တဲ့ ပုံတွေ။ (XML-based Code နဲ့ ရေးဆွဲထားတာ ဖြစ်ပါတယ်)။
• အားသာချက်: ဘယ်လောက်ချဲ့ချဲ့ အရည်အသွေး မကျပါဘူး (Resolution-independent)။ ဖိုင်အရွယ်အစား အလွန် သေးငယ်လေ့ရှိပါတယ်။ CSS နဲ့ JavaScript ကို သုံးပြီး အရောင်ပြောင်းတာ၊ လှုပ်ရှားတာ (Animation) တွေ ပြုလုပ်လို့ ရပါတယ်။
• အားနည်းချက်: အရောင်အသွေး စုံလင်တဲ့ သာမန် ဓာတ်ပုံကြီးတွေ အတွက် လုံးဝ အသုံးမဝင်ပါဘူး။

---

ချုံ့နည်းများ (Compression Techniques)

• Lossy Compression: ပုံရဲ့ Data အချို့ကို အပြီးတိုင် ဖယ်ရှားပြီး ဖိုင်အရွယ်အစားကို လျှော့ချတဲ့ နည်းလမ်းပါ။ ပြင်းပြင်းထန်ထန် ချုံ့လေ ဖိုင်အရွယ်အစား ပိုသေးလေ ဖြစ်ပေမဲ့၊ မျက်စိနဲ့ ကြည့်ရင် သိသာလောက်အောင် Quality ကျဆင်းသွားနိုင်ပါတယ်။ (ဥပမာ - JPEG, WebP (Lossy), AVIF (Lossy))။
• Lossless Compression: Quality လုံးဝ မကျဆင်းစေဘဲ ဖိုင်အရွယ်အစားကို လျှော့ချတဲ့ နည်းလမ်းပါ။ သိပ်မလိုအပ်တဲ့ အချက်အလက် (Metadata) တွေကို ဖယ်ရှားတာမျိုး၊ Data တွေကို ပိုမို သိပ်သည်းအောင် စီစဉ်တာမျိုး ပြုလုပ်ပါတယ်။ (ဥပမာ - PNG, WebP (Lossless), AVIF (Lossless), SVG များကို Optimize လုပ်ခြင်း)။

Compression အတွက် အသုံးဝင်သော Tools များ

• Online ဝန်ဆောင်မှုများ: TinyPNG / TinyJPG, Squoosh.app, iLoveIMG
• Desktop Apps များ: ImageOptim (Mac), RIOT (Windows)
• Build Tools / Plugins များ: imagemin (Node.js Projects များအတွက်), Vite/Webpack Image Plugins များ

---

Screen အရွယ်အစား မျိုးစုံအတွက် ပုံများ ပြင်ဆင်ခြင်း (Responsive Images)

ဖုန်း Screen သေးသေးလေးပေါ်မှာ ကြီးမားတဲ့ Desktop Quality ပုံတစ်ပုံကို အတင်း ဆွဲချုံ့ပြီး ပြသတာဟာ၊ အင်တာနက် Data ကို အလကား ဖြုန်းတီးရာ ရောက်သလို Website ကိုလည်း သိသိသာသာ နှေးကွေးစေပါတယ်။ Responsive Images နည်းပညာတွေက ဒီပြဿနာကို အကောင်းဆုံး ဖြေရှင်းပေးပါတယ်။

srcset attribute (<img> အတွက်)

မတူညီတဲ့ အရွယ်အစား (Size) နဲ့ အရည်အသွေး (Quality) ရှိတဲ့ ပုံ Source အများကြီးကို ကြိုတင် ပေးထားနိုင်ပါတယ်။ ဒါဆိုရင် Browser က လက်ရှိ အသုံးပြုနေတဲ့ Device ရဲ့ Screen အရွယ်အစား၊ Pixel သိပ်သည်းဆ (Pixel Density) နဲ့ မျက်နှာပြင် အကျယ် (Viewport) အပေါ် မူတည်ပြီး အသင့်တော်ဆုံး ပုံတစ်ပုံကို သူ့ဘာသာ အလိုအလျောက် ရွေးချယ် အသုံးပြုသွားပါလိမ့်မယ်။

ဥပမာ -

HTML

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     alt="A descriptive alt text.">

(ဒီနေရာမှာ w ဆိုတာက ပုံရဲ့ အကျယ် (Width) ကို ကိုယ်စားပြုပါတယ်။)

sizes attribute (<img> အတွက်)

မတူညီတဲ့ Screen အရွယ်အစားတွေမှာ ပုံက မျက်နှာပြင်ရဲ့ ဘယ်လောက် နေရာကို ယူပြီး ပေါ်လာမလဲ (ဥပမာ - တစ်ဝက်လား၊ အပြည့်လား) ဆိုတာကို Browser ကို ကြိုတင် ပြောပြထားတာပါ။ ဒါဟာ srcset ထဲကနေ Browser က အသင့်တော်ဆုံး ပုံကို ရွေးချယ် တွက်ချက်တဲ့ နေရာမှာ အလွန် အကူအညီ ဖြစ်စေပါတယ်။

ဥပမာ (ဆက်လက်၍) -

HTML

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="A descriptive alt text.">

ဆိုလိုတာက: မျက်နှာပြင် (Viewport) အကျယ်က 600px နဲ့ အောက်ဆိုရင် ပုံက မျက်နှာပြင်ရဲ့ အကျယ်အပြည့် (100vw) နေရာယူမယ်၊ 600px ထက် ကြီးရင်တော့ မျက်နှာပြင်ရဲ့ တစ်ဝက် (50vw) သာ နေရာယူမယ်လို့ ဆိုလိုတာပါ။

💡 ရှင်းလင်းချက်

အပေါ်က ဥပမာမှာဆိုရင် srcset ထဲမှာ 1000w နဲ့ 2000w ပုံ နှစ်မျိုး ပေးထားပါတယ်။ ပြီးတော့ sizes ကို သုံးပြီး မျက်နှာပြင် အကျယ်ပေါ် မူတည်ပြီး ပုံက ဘယ်လောက် နေရာယူမလဲ (100vw လား၊ 50vw လား) ဆိုတာကို သတ်မှတ်ထားပါတယ်။

ဥပမာ - အကျယ် 430px သာရှိတဲ့ ဖုန်းတစ်လုံးနဲ့ ကြည့်မယ်ဆိုပါစို့။ Viewport က 600px အောက် ဖြစ်တဲ့အတွက် sizes စည်းမျဉ်းအရ ပုံဟာ မျက်နှာပြင်ရဲ့ 100% (430px အတိအကျ) နေရာယူပါမယ်။ အဲ့ဒီတော့ srcset ထဲမှာ ပေးထားတဲ့ ပုံတွေထဲကနေ 430px နဲ့ လုံလောက်မယ့် (အနီးစပ်ဆုံး ဖြစ်တဲ့) medium.jpg (1000w) ကိုပဲ Browser က အလိုအလျောက် ရွေးချယ် ပြသပေးပါလိမ့်မယ်။

အကျိုးကျေးဇူး: ဖုန်း Screen လေးပေါ်မှာ အလကားနေရင်း Size ကြီးတဲ့ large.jpg ကြီးကို Download ဆွဲစရာ မလိုတော့ပါဘူး။ အကိုက်ညီဆုံး ပုံကိုသာ ရွေးချယ် ဆွဲယူတဲ့အတွက် Download ပိုမြန်ပြီး ပုံပေါ်လာတာလည်း ပိုမြန်ဆန်သွားပါတယ်။

<picture> element

ဒီ Element ကတော့ ပုံတွေကို ပိုပြီး အသေးစိတ် ထိန်းချုပ် ပြသနိုင်ပါတယ်။ မတူညီတဲ့ Screen အခြေအနေတွေအတွက် မတူညီတဲ့ ပုံစံတွေ (Art Direction) ဒါမှမဟုတ် မတူညီတဲ့ ပုံ Formats (WebP, JPEG) တွေကို ရွေးချယ် သုံးစွဲခွင့် ပေးပါတယ်။

ဥပမာ - (Browser က WebP ကို Support ပေးရင် WebP ကို သုံးမယ်၊ မပေးရင် JPEG ကို သုံးမယ်)

HTML

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="A descriptive alt text.">
</picture>

---

ပုံများကို လိုအပ်မှ Load လုပ်ခြင်း (Lazy Loading Images)

• Website စတင် ပွင့်လာတဲ့အခါ မျက်နှာပြင် (Viewport) ထဲမှာ မမြင်ရသေးတဲ့ အောက်ဘက်က ပုံတွေကို ချက်ချင်း Load မလုပ်သေးဘဲ၊ သုံးစွဲသူက Scroll ဆွဲချသွားလို့ အဲ့ဒီပုံတွေနား ရောက်ခါနီးမှသာ (Just-in-time) Load လုပ်တဲ့ နည်းလမ်း ဖြစ်ပါတယ်။
• ဘာကြောင့် အရေးကြီးသလဲ: Website ရဲ့ အစပိုင်း ပွင့်လာတဲ့ အချိန် (Initial Load) ကို အလွန် မြန်ဆန်စေပါတယ် (အထူးသဖြင့် LCP ကို ကောင်းစေပါတယ်)။ အင်တာနက် Data ကို သိသိသာသာ ချွေတာပေးပြီး၊ Browser အနေနဲ့လည်း အစပိုင်းမှာ အလုပ်လုပ်ရတဲ့ ဝန် (Processing Load) ကို လျှော့ချပေးပါတယ်။

၁။ Native Lazy Loading (Browser မှ တိုက်ရိုက် ပံ့ပိုးပေးခြင်း)

• အလွန် ရိုးရှင်းပြီး ထိရောက်ပါတယ်။ <img> နဲ့ <iframe> Tags တွေမှာ loading="lazy" ဆိုတဲ့ Attribute လေး ထည့်ပေးလိုက်ရုံပါပဲ။
• ဥပမာ: <img src="my-image.jpg" loading="lazy" alt="...">
• ယခုအခါ Browser အားလုံးနီးပါးက အပြည့်အဝ Support လုပ်နေပါပြီ။

၂။ JavaScript-based Lazy Loading

• အလွန် ဟောင်းနွမ်းနေတဲ့ Browser တွေကို Support လုပ်ပေးဖို့ ဒါမှမဟုတ် ပိုရှုပ်ထွေးတဲ့ အခြေအနေတွေ (ဥပမာ - Background Images တွေကို Lazy Load လုပ်ချင်တာ၊ ပုံပေါ်လာရင် Fade-in Effects လေးတွေ ထည့်ချင်တာ) အတွက် သုံးပါတယ်။ lazysizes လို Libraries တွေက နာမည်ကြီးပါတယ်။

---

Image CDN များ နှင့် အလိုအလျောက် Optimize လုပ်ဆောင်ခြင်း

• ပုံတွေကို ဖြန့်ဝေပေးဖို့ သီးသန့် အထူးပြုလုပ်ထားတဲ့ Content Delivery Networks (Image CDNs) တွေဟာ အလွန် စွမ်းဆောင်ရည် မြင့်မားပါတယ်။ သူတို့က ပုံ Formats တွေကို အလိုအလျောက် ပြောင်းလဲပေးတာ (ဥပမာ - WebP လက်ခံတဲ့ Browser လာရင် WebP ပို့ပေးပြီး၊ Safari အဟောင်းဆိုရင် JPEG ပို့ပေးတာ)၊ URL Parameters တွေကနေတစ်ဆင့် လိုအပ်သလို အရွယ်အစား အကြီးအသေး (Resize, Crop) ပြောင်းလဲပေးတာနဲ့ သင့်လျော်သလို Compress လုပ်ပေးတာ စတဲ့ လုပ်ဆောင်ချက်တွေကို အလိုအလျောက် (On-the-fly) လုပ်ဆောင်ပေးပါတယ်။
• ဥပမာ ဝန်ဆောင်မှုများ: Cloudinary, Imgix, Akamai Image & Video Manager, Vercel Image Optimization.
• အကျိုးကျေးဇူး: ပုံတွေနဲ့ ပတ်သက်သမျှ ခေါင်းစားခံစရာ မလိုတော့ဘဲ ရိုးရိုးရှင်းရှင်းနဲ့ အကောင်းဆုံး Optimization တွေကို အလိုအလျောက် ရရှိနိုင်ပါတယ် ခင်ဗျာ။