Image Optimization

ရည်ရွယ်ချက်

သင့်လျော်တဲ့ ပုံ Format တွေကို ရွေးချယ်တတ်ဖို့၊ ထိရောက်တဲ့ compression (size ချုံ့နည်း) တွေကို အသုံးပြုတတ်ဖို့၊ ဖုန်း၊ ကွန်ပျူတာ အစရှိတဲ့ အရွယ်အစားမျိုးစုံနဲ့ ကိုက်ညီအောင် ပုံတွေကို ပြင်ဆင်တတ်ဖို့ (responsive images)၊ ပြီးတော့ ပုံတွေကြောင့် website နှေးတာကို သိသိသာသာ လျှော့ချနိုင်ဖို့အတွက် lazy loading ကို အသုံးပြုတတ်ဖို့ သင်ယူရပါမယ်။

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

Website ရဲ့ ဖိုင်အရွယ်အစား (byte size) အများစုက ပုံတွေကြောင့် ဖြစ်တတ်ပါတယ်။ ပုံတွေကို ကောင်းကောင်း မပြင်ဆင်ထားရင် website ကို သိသိသာသာ နှေးစေနိုင်ပြီး သုံးစွဲသူတွေရဲ့ data တွေကိုလည်း အလဟဿ ကုန်စေပါတယ်။

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

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

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

• အသင့်တော်ဆုံး။ ဓာတ်ပုံများ၊ အရောင်အသွေးများပြီး အရောင် gradient တွေ ပါတဲ့ ပုံတွေ။
• အားသာချက်။ ဓာတ်ပုံတွေအတွက် ကောင်းကောင်း compress လုပ်နိုင်တယ်။
• အားနည်းချက်။ compress လုပ်ရင် ပုံရဲ့ အရည်အသွေး နည်းနည်း ကျသွားနိုင်တယ်။ transparent background မရပါဘူး။

PNG (Portable Network Graphics):

• အသင့်တော်ဆုံး။ Transparent background လိုအပ်တဲ့ ပုံတွေ (logo များ၊ icon များ)၊ စာသားတွေ ဒါမှမဟုတ် အရည်အသွေး ကောင်းဖို့လိုတဲ့ ပုံတွေ (ဥပမာ- screenshot များ)။
• အားသာချက်။ compress လုပ်ရင် အရည်အသွေး မကျဘူး (PNG-24 အတွက်)။
• အားနည်းချက်။ JPEG ထက် ဖိုင်အရွယ်အစား ပိုကြီးနိုင်တယ်။

WebP:

• အသင့်တော်ဆုံး။ JPEG နဲ့ PNG နှစ်မျိုးလုံးကို အစားထိုးဖို့အတွက် ခေတ်မီတဲ့ Format ပါ။ အရည်အသွေး မကျဘဲ compress လုပ်နိုင်သလို၊ အရည်အသွေး နည်းနည်းလျှော့ပြီးလည်း compress လုပ်နိုင်တယ်။ transparent background နဲ့ animation ပုံတွေကိုလည်း support လုပ်ပါတယ်။
• အားသာချက်။ အရည်အသွေး မကျဘဲနဲ့ JPEG/PNG ထက် ဖိုင်အရွယ်အစား သိသိသာသာ သေးငယ်တယ်။
• အားနည်းချက်။ အရမ်းကြာပြီဖြစ်တဲ့ browser တွေကတော့ support မလုပ်နိုင်ပါဘူး။ ဒါပေမယ့် webp အမျိုးအစားသုံးလို့မရရင် အစားထိုး (fallback) ပုံတွေ ပေးထားလို့ရပါတယ်။

AVIF (AV1 Image File Format):

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

SVG (Scalable Vector Graphics):

• အသင့်တော်ဆုံး။ logo များ၊ icon များ၊ အရည်အသွေး မကျဘဲ ဘယ်အရွယ်အစားမဆို ချဲ့နိုင်ဖို့ လိုအပ်တဲ့ ပုံတွေ။ XML-based ဖြစ်ပါတယ်။
• အားသာချက်။ အရွယ်အစား ချဲ့လို့ရတယ်။ ဖိုင်အရွယ်အစား သေးငယ်လေ့ရှိတယ်။ CSS နဲ့ JavaScript နဲ့ ပြုပြင်လို့ရတယ်။
• အားနည်းချက်။ ရိုးရိုး ဓာတ်ပုံများ အတွက် မသင့်တော်ပါဘူး။

ချုံ့နည်းများ (Compression Techniques): အရွယ်အစားကို လျှော့ချခြင်း

• Lossy Compression: ပုံရဲ့ Data တချို့ကို ဖယ်ရှားပြီး ဖိုင်အရွယ်အစားကို လျှော့ချတာပါ။ ပြင်းပြင်းထန်ထန် ချုံ့ရင် ဖိုင်ကတော့ ပိုသေးသွားပေမဲ့ quality သိသိသာသာ ကျဆင်းနိုင်ပါတယ်။ (ဥပမာ- JPEG, WebP (lossy), AVIF (lossy)။)

• Lossless Compression: quality မကျဘဲ ဖိုင်အရွယ်အစားကို လျှော့ချတာပါ။ သိပ်မလိုအပ်တဲ့ အချက်အလက် (metadata) တွေကို ဖယ်ရှားခြင်း ဒါမှမဟုတ် အချက်အလက်တွေကို ပိုထိရောက်အောင် လုပ်ဆောင်ပါတယ်။ (ဥပမာ- PNG, WebP (lossless), AVIF (lossless), SVG တွေကို ကောင်းမွန်အောင် လုပ်ဆောင်ခြင်း။)

Tools for Compression:

• Online ကိရိယာများ။ TinyPNG/TinyJPG, Squoosh.app, iLoveIMG
• Desktop App များ။ ImageOptim (Mac), RIOT (Windows)
• Build tools/plugins များ။ imagemin (Node.js project များအတွက်)

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

ဖုန်း screen သေးသေးလေးမှာ size ကြီးတဲ့ Desktop quality ပုံတစ်ပုံကို ပြသတာဟာ data ကို ဖြုန်းတီးစေပြီး website ကို နှေးစေပါတယ်။ Responsive images တွေက ဒီပြဿနာကို ဖြေရှင်းပေးပါတယ်။

• srcset attribute (<img> အတွက်): မတူညီတဲ့ အရွယ်အစား/အရည်အသွေးရှိတဲ့ ပုံ 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 အရွယ်အစားတွေမှာ ပုံရဲ့ width ဘယ်လောက် ပေါ်မယ်ဆိုတာကို browser ကို ပြောပြပါတယ်။ ဒါက srcset ထဲကနေ browser က အသင့်တော်ဆုံး Source ကို ရွေးချယ်တဲ့နေရာမှာ ကူညီပေးပါတယ်။

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

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 နဲ့ အောက်ဆိုရင် Image က viewport ရဲ့ 100% ၊ မဟုတ်ရင်တော့ 50% ရှိမယ်။

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

ဒီ ဥပမာ မှာဆိုရင် srcset နဲ့ Image size နှစ်မျိုးပေးထားတယ်၊ ပြီးတော့ sizes ကိုသုံးပြီး viewport ပေါ်မူတည်ပြီး ပုံရဲ့ width ဘယ်လောက်ရှိရမလဲပြောတယ်။

ဥပမာ - 430px ရှိတဲ့ ဖုန်းဆိုရင် viewport width က 600px အောက်ဆိုတော့ ပုံကို 100% သုံးမယ်။ viewport ရဲ့ 100% ဆိုတော့ 430px ၊ srcset ထဲမှာ 430px နဲ့ အနီးစပ်ဆုံးက medium.jpg ဆိုတော့ browser က အဲဒီပုံကိုပဲ ရွေးချယ်ပြပေးပါလိမ့်မယ်။

အကျိုးကျေးဇူး - ဖုန်း screen မှာ sizeကြီးတဲ့ large.jpg ပုံကို download လုပ်စရာမလိုတော့ပါဘူး။ ကိုက်ညီတဲ့ပုံကိုပဲ ပိုပြီးတော့ မြန်မြန် download လုပ်နိုင်ပြီး မြန်မြန်ပြပေးနိုင်ပါတယ်။

• <picture> element: ပုံကို ပုံစံအမျိုးမျိုးနဲ့ ပိုပြီး ထိန်းချုပ်ပြသနိုင်ပါတယ်။ မတူညီတဲ့ အခြေအနေတွေအတွက် မတူညီတဲ့ ပုံတွေ ဒါမှမဟုတ် မတူညီတဲ့ ပုံ Format တွေကိုတောင် သုံးနိုင်ပါတယ်။

ဥပမာ -

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 ဆွဲရင်း အဲဒီပုံတွေနားရောက်မှ load လုပ်တဲ့ နည်းလမ်းပါ။

• ဘာကြောင့်လဲ။ website တက်တဲ့ အချိန် မြန်တယ် (အထူးသဖြင့် LCP ကောင်းတယ်)၊ data ကို ချွေတာတယ်၊ ပြီးတော့ browser က intial load ( အစပိုင်းမှာ လုပ်ဆောင်ရတဲ့ အလုပ်) ကို လျှော့ချပေးပါတယ်။

• Native Lazy Loading (ပုံမှန် Lazy Loading):

  • ရိုးရှင်းပြီး ထိရောက်တယ်။ <img> နဲ့ <iframe> tags တွေမှာ loading=“lazy” attribute ကို ထည့်ရုံပါပဲ။
  • ဥပမာ။ <img src="my-image.jpg" loading="lazy" alt="...">
  • Browser အများစုက support လုပ်ပါတယ်။

• JavaScript-based Lazy Loading:

  • old browser တွေကို support လုပ်ဖို့ ဒါမှမဟုတ် ပိုရှုပ်ထွေးတဲ့ အခြေအနေတွေ (ဥပမာ- နောက်ခံပုံများ၊ custom effect များ) အတွက် သုံးပါတယ်။ Lazysizes လို library တွေက နာမည်ကြီးပါတယ်။

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

• ပုံတွေကို ပို့ဆောင်ရာမှာ အထူးပြုတဲ့ Content Delivery Networks (CDN) တွေဟာ Format တွေကို အလိုအလျောက် ပြောင်းလဲပေးတာ (ဥပမာ- support လုပ်တဲ့ browser တွေကို WebP ပို့ပေးတာ)၊ လိုအပ်သလို အရွယ်အစား ပြောင်းပေးတာနဲ့ compress လုပ်ပေးတာ စတဲ့ လုပ်ဆောင်ချက်တွေကို ပေးပါတယ်။
• ဥပမာများ။ Cloudinary, Imgix, Akamai Image & Video Manager.
• အကျိုးကျေးဇူး။ ပုံတွေကို ရိုးရိုးရှင်းရှင်းနဲ့ အကောင်းဆုံး Optimize လုပ်ပေးနိုင်ပါတယ်။