အားလုံးပဲ မဂၤလာပါခင္ဗ်။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ ေမာင္ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္ခင္ဗ်။
ဒီတစ္ပတ္မွာေတာ့ website မွာ image မ်ားကို responsive ျဖစ္ေစရန္ picture tag ႏွင့္ srcset attribute အသုံးျပဳပုံနဲ႔ ပတ္သက္ၿပီး ကြၽန္ေတာ္ ေလ့လာမိသေလာက္ မွ်ေဝေပးသြားမွာ ျဖစ္ပါတယ္။

ပထမဦးဆုံး developer တစ္ေယာက္အေနျဖင့္ img tag ႏွင့္ picture tag  အသုံးျပဳပုံနဲ႔ပတ္သက္ၿပီး  ရွင္းရွင္းလင္းလင္းသိထားဖို႔ လိုအပ္ပါတယ္။

What is a picture tag?
picture tag ဆိုသည္မွာ မိမိ website မွာရွိေသာ ပုံမ်ားကို screen width အေျပာင္းအလဲ အခ်ဳံ႕အခ်ဲ႕ေပၚမူတည္ၿပီး ျပသႏိုင္ရန္ အသုံးျပဳႏိုင္ေသာ HTML element အမ်ိဳးအစားတစ္ခုျဖစ္ပါတယ္။
Picture tag တစ္ခုမွာဆိုရင္ sources and img ဆိုၿပီး group တစ္ခုအေနျဖင့္ ပါဝင္ပါတယ္။
sources
screen width အေျပာင္းအလဲ အခ်ဳံ႕အခ်ဲ႕ေပၚမူတည္ၿပီး ပုံအမ်ိဳးမ်ိဳးကိုျပသေပးေသာ element တစ္ခုျဖစ္ပါတယ္။

Img
ေနာက္တစ္ခု picture ထဲမွာရွိေသာ img tag ကေတာ့ မိမိ အသုံးျပဳထားတဲ့ source မွပုံမ်ားကို browser မွာ support မလုပ္တဲ့အခါမွာဆိုရင္ default format အျဖစ္ျပသေပးတဲ့ element တစ္ခုျဖစ္ပါတယ္။

ေအာက္ပါ code မွာေတာ့ picture tag ကိုအသုံးျပဳႏိုင္ရန္ coding ျဖင့္ျပသထားျခင္း ျဖစ္ပါတယ္။

coding အလုပ္လုပ္ပုံ အဆင့္ဆင့္ကို ေအာက္ေဖာ္ျပပါ image load order မွာ ရွင္းျပထားပါတယ္။

Image Load Order
1. Image load ရဲ့ပထမဆုံး အဆင့္ကေတာ့ source ကို အေပၚဆုံးကေန read လုပ္ပါတယ္။
2. ဒုတိယအဆင့္ကေတာ့ screen width သတ္မွတ္ခ်က္ကို read လုပ္ပါတယ္။
3. ဒုတိယအဆင့္ screen width သတ္မွတ္ခ်က္ကို ေက်ာ္လြန္သြားသည္ျဖစ္ေစ၊ ေနာက္ screen width တစ္ခုကို ေရာက္သြားသည္ျဖစ္ေစ ေနာက္ source တစ္ခုကို read လုပ္ပါတယ္။
4. ေနာက္ဆုံးအဆင့္အေနျဖင့္ သတ္မွတ္ထားေသာ source အားလုံး မကိုက္ညီတဲ့အခါမွာ img tag ကိုဘဲ read လုပ္ပါတယ္။

Source Specification
Source tag အလုပ္လုပ္ေဆာင္ပုံသည္ အေပၚက ရွင္းျပခဲ့သလို screen width အခ်ဳံ႕အခ်ဲ႕ ေပၚမူတည္ၿပီး အလုပ္လုပ္ႏိုင္ရန္ type (3) မ်ိဳး ပါဝင္ပါတယ္။

1. Image URL (srcset)
2. Media Query
3. Image Format (type)

1. Image URL (srcset)
ပုံရွိရာလမ္းေၾကာင္းကို ခ်ိတ္ဆက္အသုံးျပဳႏိုင္ရန္ srcset မွာ သတ္မွတ္ေပးဖို႔ လိုအပ္ပါတယ္။ဥပမာ – srcset=”/img/oo.jpg”.

2. Media Query
မိမိ screen width ေပၚမူတည္ၿပီး ပုံမ်ားကို ေဖာ္ျပခ်င္တဲ့အခါမွာဆိုရင္ media query ကိုအသုံးျပဳဖို႔ လိုအပ္ပါတယ္။ မိမိ ေဖာ္ျပလိုေသာ device သည္ pc ႏွင့္ desktop ျဖစ္ပါက minimum width 769 အထက္ကို သတ္မွတ္ဖို႔ လိုအပ္ပါတယ္။

<source srcset="/img/img_01.jpg" media="(min-width: 980px)" />

အထက္ပါလုပ္ေဆာင္ခ်က္သည္ minimum width 980 ႏွင့္အထက္တြင္ img_01.jpg ကို ျပသမွာျဖစ္ပါတယ္။

မိမိ device သည္ tablet ျဖစ္ပါက maximum width 979 ေအာက္ကို သတ္မွတ္ဖို႔ လိုအပ္ပါတယ္။

<source srcset="/img/img_02.jpg" media="(max-width: 979px)" />

အထက္ပါလုပ္ေဆာင္ခ်က္သည္ maximum width 979 ႏွင့္ေအာက္တြင္ img_02.jpg ကို ျပသမွာျဖစ္ပါတယ္။

မိမိ device သည္ smartphone ျဖစ္ပါက maximum width 640 ေအာက္ကို သတ္မွတ္ဖို႔ လိုအပ္ပါတယ္။

<source srcset="/img/img_03.jpg" media="(max-width: 640px)" />

အထက္ပါလုပ္ေဆာင္ခ်က္သည္ maximum width 640 ႏွင့္ေအာက္တြင္ img_03.jpg ကို ျပသမွာျဖစ္ပါတယ္။

3. Image Format (type)
ေနာက္ဆုံးတစ္ခုကေတာ့ ပုံရဲ႕ format ကိုသတ္မွတ္ေပးဖို႔ရန္ image format ပါဝင္ပါတယ္။ JPG, JPEG, PNG ႏွင့္ GIF စတဲ့ ပုံမ်ားကို browser support ေပးေသာေၾကာင့္ format type ကို ထည့္သြင္းအသုံးမျပဳလည္း ပုံမ်ားကို ျပသႏိုင္မွာဘဲျဖစ္ပါတယ္။

Method for using picture and img

1. Switch to a different image
မိမိ website ရွိ မတူညီေသာပုံ သို႔မဟုတ္ အခ်ိဳးအစားမညီေသာ ပုံမ်ားကို screen width ေပၚမူတည္ၿပီး ျပသခ်င္တဲ့အခါ picture tag + source tag ကို ေအာက္ပါပုံအတိုင္း အသုံးျပဳႏိုင္ပါတယ္။

Coding အပိုင္းအေနျဖင့္ ေအာက္ပါအတိုင္း အသုံးျပဳၿပီး ေရးသားႏိုင္ပါတယ္။

2. Switch Resolution
မိမိ website ရွိ ပုံမ်ားကို အခ်ိဳးအစားတူညီၿပီး ပုံရဲ႕ resolution ကို high resolution ျဖင့္ ျပသခ်င္တဲ့အခါမွာဆိုရင္ img tag srcset attribute ကို ေအာက္ပါအတိုင္း အသုံးျပဳႏိုင္ပါတယ္။
Browser ကို refresh လုပ္လိုက္တဲ့အခါ ေကာင္းမြန္တဲ့ resolution တစ္ခုကို ျပသေပးမွာျဖစ္ပါတယ္။

Coding အပိုင္းအေနျဖင့္ ေအာက္ပါအတိုင္း အသုံးျပဳၿပီး ေရးသားႏိုင္ပါတယ္။

3. 1+2 Change Image and Resolution
Screen Width အခ်ဳံ႕အခ်ဲ႕ ေပၚမူတည္ၿပီး ပုံေျပာင္းျပခ်င္တဲ့အျပင္ ေနာက္ထပ္မိမိသုံးထားတဲ့ ပုံရဲ႕ resolution ကိုလည္း high resolution အေနျဖင့္ ျပသခ်င္တဲ့အခါမွာဆိုရင္ picture tag + source tag + srcset attribute ကို အသုံးျပဳႏိုင္ပါတယ္။

Coding အပိုင္းအေနျဖင့္ ေအာက္ပါအတိုင္း အသုံးျပဳၿပီး ေရးသားႏိုင္ပါတယ္။

Website နဲ႔ပတ္သက္ၿပီး ေလ့လာေနေသာ developer ေတြ အတြက္ picture tag ႏွင့္ srcset element အသုံးျပဳပုံ ကို သိရွိသြားလိမ့္မယ္လို႔ ေမွ်ာ္လင့္မိပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။