Skip to content
GitHub

Images

Webpage ထဲသို့ ပုံများ ထည့်သွင်းခြင်း

Section titled “Webpage ထဲသို့ ပုံများ ထည့်သွင်းခြင်း”

ပုံတွေက သင့် webpage ကို ကြည့်လို့လှသွားအောင်လုပ်တဲ့ အကောင်းဆုံးနည်းလမ်းတစ်ခုပါ။ Website ကို ပုံတွေထည့်ဖို့ <img> tag ကို သုံးပါတယ်။

အခြေခံ Image Tag :

<img src="image.jpg" alt="Description of image">
  • <img>: ပုံထည့်သွင်းဖို့သုံးတဲ့ tag ပါ။

  • src: Source attribute က browser ကို ပုံကဘယ်မှာရှိလဲဆိုတာ (URL) ပြောပြပါတယ်။

  • alt: Alt text attribute က accessibility (လူတိုင်းအသုံးပြုနိုင်မှု) အတွက် ပုံအကြောင်း ရှင်းပြတဲ့စာသားပါ (ပုံက မပေါ်လာခဲ့ရင် ဒီစာသားကိုပြပေးပြီး၊ အမြင်အာရုံမသန်စွမ်းသူတွေအတွက် screen reader တွေက ဖတ်ပြပါတယ်)။

alt Text ကို ဘာကြောင့်သုံးသင့်သလဲ?

Section titled “alt Text ကို ဘာကြောင့်သုံးသင့်သလဲ?”
  • Accessibility: Screen reader တွေက alt text ကို သုံးပါတယ်။

  • SEO: Search engine တွေက ပုံရဲ့အကြောင်းအရာကို နားလည်ဖို့ alt text ကို သုံးပါတယ်။

HTML မှာသုံးနိုင်တဲ့ ပုံ format အမျိုးမျိုးရှိပါတယ်။ တစ်ခုချင်းစီမှာ သူ့အားသာချက်နဲ့သူရှိလို့ ဘယ်အချိန် ဘာကိုသုံးရမလဲဆိုတာ သိထားဖို့ အရေးကြီးပါတယ်။

  • JPEG (.jpg):
    ဓာတ်ပုံတွေအတွက် အသင့်တော်ဆုံးပါ။ ပုံကို compress လုပ်ရာမှာ ကောင်းပေမယ့်၊ အသေးစိတ်အချက်အလက်တချို့တော့ ပျောက်သွားနိုင်ပါတယ်။

  • PNG (.png):
    Logo တွေနဲ့ နောက်ခံမပါတဲ့ပုံတွေအတွက် အကောင်းဆုံးပါ။ အရည်အသွေး (quality) လုံးဝမကျသွားတဲ့ format ဖြစ်ပါတယ်။

  • GIF (.gif):
    ရိုးရှင်းတဲ့ animation လေးတွေအတွက် အကောင်းဆုံးပါ။

  • *SVG (.svg):**
    ချဲ့ချင်တိုင်းချဲ့လို့ရတဲ့ icon တွေ logo တွေအတွက် သုံးပါတယ်။ ဘယ်လောက်ပဲအရွယ်အစားပြောင်းပြောင်း ပုံက လုံးဝဝါးမသွားပါဘူး။

  • WebP (.webp):
    ခေတ်မီ format ဖြစ်ပြီး ပုံရော animation အတွက်ပါ သုံးနိုင်ပါတယ်။ JPEG/PNG ထက် file size ပိုသေးပြီး quality လည်းကောင်းပါတယ်။ ခေတ်ပေါ် browser အများစုမှာ support လုပ်ပါတယ်။

  • AVIF (.avif):
    နောက်ဆုံးပေါ် image format ဖြစ်ပြီး compress အလွန်ကောင်းပါတယ်။ Quality များများမကျဘဲ file size ကို အများကြီးသေးအောင် လုပ်နိုင်ပါတယ်။ Browser အဟောင်းတွေမှာတော့ support မလုပ်ပါဘူး။