Mobile, tablet, desktop အရွယ်အစားမတူတဲ့ screen တွေမှာ image ကို smart ဖြစ်အောင်ပြချင်ရင် max-width: 100%, srcset, picture တို့ကိုသုံးနိုင်ပါတယ်။
ပုံကြီးတစ်ပုံကို mobile မှာ force load လုပ်ရင် user data နဲ့ speed နှစ်ခုလုံးကိုစားပါတယ်။ Website ကလှပေမယ့် loading ကလိပ်ပြာလေးလမ်းလျှောက်သလိုဖြစ်ရင် user ထွက်သွားနိုင်ပါတယ်။
html
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Responsive landscape photo"
style="max-width: 100%; height: auto;">You should see
Screen size အလိုက် သင့်တော်တဲ့ image file ကို browser ကရွေးပြီးပြပါမယ်။