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: Google လို Search engine တွေက ပုံရဲ့ အကြောင်းအရာကို နားလည်ဖို့ alt text ကို အသုံးပြုပါတယ်။
ပုံ Format များ
Section titled “ပုံ Format များ”HTML မှာ သုံးနိုင်တဲ့ ပုံ Format အမျိုးမျိုး ရှိပါတယ်။ တစ်ခုချင်းစီမှာ သူ့အားသာချက်နဲ့သူ ရှိလို့ ဘယ်အချိန်မှာ ဘာကို သုံးရမလဲဆိုတာ သိထားဖို့ အရမ်း အရေးကြီးပါတယ်။
-
JPEG (.jpg):
ဓာတ်ပုံတွေအတွက် အသင့်တော်ဆုံးပါ။ ပုံကို Compress လုပ်ရာမှာ ကောင်းပေမယ့်၊ အသေးစိတ် အချက်အလက် တချို့တော့ ပျောက်သွားနိုင်ပါတယ်။ -
PNG (.png):
Logo တွေနဲ့ နောက်ခံ မပါတဲ့ပုံ (Transparent Background) တွေအတွက် အကောင်းဆုံးပါ။ အရည်အသွေး (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 မလုပ်သေးပါဘူး။
<figure> နှင့် <figcaption>
Section titled “<figure> နှင့် <figcaption>”ပုံတွေကို <img> ထဲမှာချည်းပဲ မထည့်ဘဲ <figure> element ထဲမှာ ထည့်ပြီး <figcaption> နဲ့ ခေါင်းစဉ်တပ်ပေးလို့ ရပါတယ်။ ဒါက Accessibility ပိုကောင်းစေပြီး ပုံနဲ့ ရှင်းလင်းချက်ကို Semantic ဖြစ်ဖြစ် ချိတ်ဆက်ပေးပါတယ်။
ဥပမာ
<figure> <img src="mountain.jpg" alt="မြန်မာပြည် တောင်ကြီး မြင်ကွင်း"> <figcaption>ဒဂုံကျောင်းဆောင် မြင်ကွင်း — Myanmar 2024</figcaption></figure><figure>— ပုံ၊ ဒိုင်ယာဂရမ် ဒါမှမဟုတ် Code Snippet လိုမျိုး ကိုယ့်ဘာသာ အပြည့်အစုံ ရပ်တည်နိုင်တဲ့ (Self-contained) Content ကို ပြဖို့ သုံးပါတယ်။<figcaption>—<figure>ထဲမှာပါတဲ့ Content ရဲ့ ရှင်းလင်းချက်ကို ထည့်ပေးပါတယ်။<figure>ထဲမှာ ပထမဆုံး ဒါမှမဟုတ် နောက်ဆုံး Child Element အဖြစ် ရှိရပါမယ်။