သင်လည်း ဒီလိုဖြစ်ဖူးမှာပါ။ Shopify မှာ ထုတ်ကုန်စာမျက်နှာတစ်ခုဟာ ချောမွတ်နေပြီး၊ editor မှာ ဓာတ်ပုံတွေက ကြည်လင်ပြတ်သားနေကာ၊ မိုဘိုင်းလာရောက်ကြည့်ရှုသူတွေက ခုန်တက်လာပြီး သင့်ရဲ့ PageSpeed ရမှတ်က ခြောက်ဆယ်ခုနှစ်တွေမှာ ခေါင်းမာနေတတ်ပါတယ်။ ပြဿနာက “ဒီဇိုင်းညံ့ဖျင်း” တာမဟုတ်ပါဘူး။ ပုံဖိုင်အရွယ်အစားတွေက အပြင်အဆင်အတွက် လေးလံလွန်းပြီး ဈေးဝယ်သူက ထုတ်ကုန်၊ ဈေးနှုန်း ဒါမှမဟုတ် add-to-cart ခလုတ်ကို မမြင်ခင် အပို byte တိုင်း ရွေ့လျားနေရပါတယ်။

ဒါကြောင့် ဆိုင်မျက်နှာစာမှာ ရုပ်ပုံဆုံးဖြတ်ချက်တွေဟာ ဒီဇိုင်းဆုံးဖြတ်ချက်တွေချည်းပဲ မဟုတ်ပါဘူး။ စာမျက်နှာအမြန်နှုန်း ၊ အမြင်အာရုံအရည်အသွေး နဲ့ Google က စာမျက်နှာရဲ့ ဘယ်လောက်မြန်မြန် crawl လုပ်ပြီး render လုပ်နိုင်မလဲဆိုတဲ့အပေါ်မှာ သက်ရောက်မှုရှိပါတယ်။ ခန့်မှန်းစရာမလိုဘဲ အရွယ်အစားပြောင်းလဲဖို့အတွက် လက်တွေ့ကျတဲ့ shortcut တစ်ခုကို လိုချင်ရင် Yassine Malti ရဲ့ ရုပ်ပုံအရွယ်အစားပြောင်းလဲခြင်းလမ်းညွှန် ဟာ အသုံးဝင်တဲ့ အဖော်တစ်ယောက်ပါ၊ ဘာလို့လဲဆိုတော့ နောက်အသုတ်ကို upload မလုပ်ခင်မှာ ယန္တရားတွေကို နားလည်ဖို့ ကူညီပေးလို့ပါ။

မာတိကာ

Shopify စတိုးမှာ ပုံဖိုင်အရွယ်အစားတွေ ဘာကြောင့် အရေးကြီးတာလဲ။

ကုန်သည်တစ်ဦးသည် Shopify admin တွင် ချောမွေ့သော ထုတ်ကုန်စာမျက်နှာကို ကြည့်ရှုသော်လည်း အရင်းခံပြဿနာကို လွတ်သွားနိုင်သည်။ စာမျက်နှာသည် Wi-Fi မှတစ်ဆင့် လက်ပ်တော့တွင် ကောင်းမွန်သည်ဟု ခံစားရပြီးနောက် မိုဘိုင်းတွင် ရပ်တန့်သွားခြင်း၊ သူရဲကောင်းရုပ်ပုံသည် နောက်ကျမှပေါ်လာခြင်းနှင့် စာမျက်နှာအဆင်သင့်ဖြစ်သည်ဟု မခံစားရမီ ဈေးဝယ်သူသည် ခေါက်ကိုကျော်သွားခြင်းတို့ ပြုလုပ်နိုင်သည်။ ကောင်းမွန်ပုံပေါ်သော စာမျက်နှာနှင့် မြန်ဆန်စွာ load လုပ်သော စာမျက်နှာကြားရှိ ကွာဟချက်သည် ပုံဖိုင်အရွယ်အစားများက လာရောက်လည်ပတ်မှုသည် ဝင်ငွေ သို့မဟုတ် ပွတ်တိုက်မှုဖြစ်လာသည်ကို ဆုံးဖြတ်ပေးသည့်နေရာဖြစ်သည်။

စာမျက်နှာတိုင်းမှာ ဖုံးကွယ်ထားတဲ့ ယှဉ်ပြိုင်မှု

ဆိုင်မျက်နှာစာပေါ်ရှိ ရုပ်ပုံတိုင်းသည် မိတ္တူ၊ script များ၊ schema နှင့် ဖောက်သည်၏ စိတ်ရှည်မှုတို့နှင့် ယှဉ်ပြိုင်ကြသည်။ hero ဓာတ်ပုံသည် အရွယ်အစားကြီးပါက bandwidth ကို စားရုံသာမက လာရောက်ကြည့်ရှုသူမှ ကမ်းလှမ်းချက်ကို ဆုံးဖြတ်နိုင်သည့်အချိန်ကို နှေးကွေးစေသည်။ ရုပ်ပုံအလေးချိန်သည် conversion မေးခွန်းတစ်ခု ဖြစ်ပြီး Core Web Vitals မေးခွန်းတစ်ခုလည်း ဖြစ်သည်။

Shopify ကုန်သည်များသည် ထုတ်ကုန်စာမျက်နှာများနှင့် collection စာမျက်နှာများတွင် ဤအရာကို ဦးစွာခံစားရလေ့ရှိသည်။ ဓာတ်ပုံကြီးအနည်းငယ်သည် အထူးသဖြင့် မိုဘိုင်းကွန်ရက်များတွင် အပြင်အဆင်တစ်ခုလုံးကို လေးလံသည်ဟု ခံစားရစေပြီး အလေးချိန်သည် အရေးကြီးဆုံးနေရာများဖြစ်သည့် hero၊ collection grid၊ product zoom နှင့် thumbnail များတွင် ပေါ်လာသည်။ hero image သည် thumbnail နှင့် အလုပ်ကွဲပြားသောကြောင့် ၎င်းသည် ဖိုင်အရွယ်အစားဝန်ထုပ်ဝန်ပိုးတူညီစွာ မထားသင့်ပါ။ ထပ်ခါတလဲလဲပုံများသည် မြန်မြန်စုပုံပြီး scroll တိုင်းကို အပြစ်ပေးသည့် collection grids များအတွက်လည်း အတူတူပင်ဖြစ်သည်။

ပုံဖိုင်အရွယ်အစားသည် စာမျက်နှာကို မည်မျှမြန်မြန်အသုံးပြုနိုင်သည်ကိုလည်း သက်ရောက်မှုရှိပြီး၊ ထို့ကြောင့် ၎င်းသည် layout planning နှင့် အတူတူပင် ဆွေးနွေးသင့်သည်။ raw image dimension များသည် အရေးကြီးသော်လည်း၊ deliverable file size သည် browser မှ fetch နှင့် decode လုပ်ရမည့်အရာဖြစ်သည်။ Yassine Malti ၏ image resizing guide တွင် ရှင်းပြထားသည့်အတိုင်း၊ export နည်းခြင်းသည် မလိုအပ်သော အလေးချိန်ကို ဖယ်ရှားပေးခြင်းဖြင့် image ၏ visual role ကို ထိန်းသိမ်းနိုင်သည်။

လက်တွေ့ကျတဲ့ အကျိုးအမြတ်

ဒီအရေးကြီးတဲ့ အကြောင်းရင်းက ရိုးရှင်းပါတယ်။ အခြေခံ pixel အရေအတွက်က အခြေခံကို သတ်မှတ်ပေးပြီး compression နဲ့ format က နောက်ဆုံးဖိုင်အရွယ်အစားကို ဆုံးဖြတ်ပေးပါတယ်။ 24-bit RGB မှာရှိတဲ့ 24-megapixel ရုပ်ပုံမှာ raw pixel data 72 million bytes ခန့်ပါဝင်ပြီး export ရွေးချယ်မှုပေါ်မူတည်ပြီး တူညီတဲ့ရုပ်ပုံက 100% quality မှာ JPEG အနေနဲ့ 423.41 KB ခန့် ဒါမှမဟုတ် JPEG 90% quality မှာ 211.7 KB ခန့် ရှိနိုင်ပါတယ် ( Scantips )။ အဲဒီကွာဟချက်ကြောင့်ပဲ နှစ်ခုစလုံးက ဆင်တူနီးပါးပုံပေါက်ပေမယ့် မြန်နှုန်းရလဒ်တွေ အရမ်းကွာခြားတဲ့ ရုပ်ပုံတွေကို အသုံးပြုနိုင်ပါတယ်။

လက်တွေ့ကျတဲ့ စည်းမျဉ်း- ပုံတစ်ပုံဟာ အလှဆင်တာထက် ရောင်းအားအတွက် ပိုအရေးကြီးရင် အပ်လုဒ်မလုပ်ခင် ဖိုင်အရွယ်အစား ပစ်မှတ်ထားပါ။

အဲဒါက ကုန်သည်တွေ အသုံးပြုသင့်တဲ့ စံသတ်မှတ်ချက်ပါ။ ဆိုင်မျက်နှာစာ slot တစ်ခုစီအတွက် ဘတ်ဂျက်တစ်ခု သတ်မှတ်ပြီးရင် ဖိုင်ကို အလုပ်နဲ့ ကိုက်ညီအောင်လုပ်ပါ။ hero banner က thumbnail ထက် အလေးချိန်ပိုပေးနိုင်တယ်လို့ ယူဆနိုင်ပေမယ့် ဘယ်ဟာမှ စာမျက်နှာရဲ့ ကျန်တဲ့အပိုင်းကို အပိုဝန်ထုပ်ဝန်ပိုးတွေ သယ်လာဖို့ မတွန်းအားပေးသင့်ပါဘူး။ အဲဒီအကျင့်တစ်ခု ရှိလာတာနဲ့ ထုတ်ကုန်စာမျက်နှာတွေကို စီမံခန့်ခွဲရတာ ပိုလွယ်ကူလာပြီး အပ်လုဒ်အသစ်တိုင်းဟာ နောက်ထပ် ဝှက်ထားတဲ့ drag တစ်ခု မဖြစ်တော့ဘဲ နေရာတစ်ခု ရလာပါတယ်။

ရုပ်ပုံအရွယ်အစားနှင့် ဖိုင်အရွယ်အစားနှင့် နှစ်ခုစလုံး အဘယ်ကြောင့် အရေးကြီးသနည်း

ကုန်သည်များသည် ဤဝေါဟာရများကို အဓိပ္ပာယ်တူသယောင် မကြာခဏအသုံးပြုလေ့ရှိပြီး admin တွင် ပုံတစ်ပုံသည် ကောင်းမွန်နေသော်လည်း အဘယ်ကြောင့် ဆိုင်ရှေ့မျက်နှာစာကို နှေးကွေးစေသည်ကို တွေးမိကြသည်။ ရုပ်ပုံအရွယ်အစား သည် pixel အတိုင်းအတာ၊ အနံအလိုက် အမြင့်ဖြစ်သည်။ ဖိုင်အရွယ်အစား သည် disk ပေါ်ရှိ bytes ဖြင့် ထုတ်ယူထားသောဖိုင်၏ အလေးချိန်၊ ပုံမှန်အားဖြင့် KB သို့မဟုတ် MB ဖြစ်ပြီး ၎င်းသည် compression၊ format နှင့် bit depth တို့နှင့်အတူ ပြောင်းလဲသွားပါသည်။ ရုပ်ပုံနှစ်ပုံသည် တူညီသောအတိုင်းအတာကို မျှဝေနိုင်ပြီး loading ကုန်ကျစရိတ်များကို အလွန်ကွဲပြားစေနိုင်သည်။

ဒစ်ဂျစ်တယ် ဓာတ်ပုံနှင့် ဂရပ်ဖစ်များအတွက် ပစ်ဇယ်ဖြင့် ရုပ်ပုံအရွယ်အစားနှင့် ဘိုက်ဖြင့် ဖိုင်အရွယ်အစားကို နှိုင်းယှဉ်ထားသော ပုံ။

Pixel တွေက အမြင့်ဆုံးအဆင့်ကို သတ်မှတ်ပေးလိုက်ပါပြီ

Pixel များသည် ဖိုင်တစ်ခုတွင် မည်မျှသော အမြင်အာရုံအသေးစိတ်အချက်အလက်များကို သိမ်းဆည်းထားနိုင်သည်ကို သတ်မှတ်ပေးသည်။ 24-bit RGB ရှိ 24-megapixel ရုပ်ပုံတွင် raw pixel data 72 million bytes ခန့်ပါဝင်သည်၊ အဘယ်ကြောင့်ဆိုသော် pixel ၂၄ သန်း × pixel တစ်ခုလျှင် 3 bytes = 72,000,000 bytes ဖြစ်သည် ။ ထို raw နံပါတ်သည် export အတွက် အစပြုမှတ်ဖြစ်ပြီး browser မှ ရရှိသော နောက်ဆုံးအလေးချိန်မဟုတ်ပါ။

တင်ပို့မှုရွေးချယ်မှုများသည် ရလဒ်ကို လျင်မြန်စွာပြောင်းလဲစေသည်။ တူညီသောရင်းမြစ်ဓာတ်ပုံသည် JPEG အနေဖြင့် 100% အရည်အသွေးတွင် 423.41 KB ခန့်နှင့် JPEG 90% အရည်အသွေးတွင် 211.7 KB ခန့်ထွက်လာနိုင်သည်။ တင်ပို့မှုသည် မူရင်းအသေးစိတ်အချက်အလက်များကို အများစု သို့မဟုတ် လျော့နည်းစွာထိန်းသိမ်းထားသော်လည်း pixels များသည် အတူတူပင်ဖြစ်သည်။

ချုံ့ခြင်းနှင့် ဖော်မတ်သည် ရလဒ်ကို ဆုံးဖြတ်ပေးသည်

Shopify စစ်ဆေးမှုအများစုဟာ ဒီနေရာမှာ ဘေးတိုက်သွားလေ့ရှိပါတယ်။ ကုန်သည်တွေက ပုံတစ်ပုံကြီးတစ်ပုံဟာ ဝဘ်အတွက် လေးလွန်းရမယ်လို့ ယူဆကြပေမယ့် အတိုင်းအတာနဲ့ ဖိုင်အလေးချိန်ဟာ သီးခြားဆုံးဖြတ်ချက်တွေပါ။ အတိုင်းအတာကြီးတဲ့ပုံတစ်ပုံကို ကောင်းကောင်းထုတ်ယူမယ်ဆိုရင် ကျိုးကြောင်းဆီလျော်တဲ့ဖိုင်တစ်ခု ဖြစ်နိုင်ပါတယ်။ ရိုးရှင်းတဲ့ပုံပေါက်တဲ့ ဂရပ်ဖစ်တစ်ခုဟာ မှားယွင်းတဲ့ဖော်မတ် ဒါမှမဟုတ် မှားယွင်းတဲ့အရည်အသွေးနဲ့ သိမ်းဆည်းမယ်ဆိုရင် ဖောင်းပွလာနိုင်ပါတယ်။

အဲဒီကွာခြားချက်က ဆိုင်မျက်နှာစာအခန်းကဏ္ဍအလိုက် အရေးကြီးပါတယ်။ hero banner ဟာ thumbnail ထက် visual weight ပိုပေးနိုင်ပေမယ့် collection grid image ကတော့ စာမျက်နှာကို သန့်ရှင်းစွာ load လုပ်နိုင်ဖို့ လုံလောက်တဲ့ light ဖြစ်နေဖို့ လိုအပ်ပါတယ်။ Product zoom shot တွေက အနီးကပ်ကြည့်ဖို့ pixel detail လုံလောက်ဖို့ လိုအပ်ပြီး thumbnail slot တွေကတော့ layout မှာ ပြသနိုင်တာထက် အသေးစိတ်အချက်အလက်တွေ အများကြီးပိုယူထားရင် bandwidth ကို ဖြုန်းတီးလေ့ရှိပါတယ်။

လက်မ၏စည်းမျဉ်း- ပစ်ဇယ်များသည် ရုပ်ပုံတွင် မည်မျှမြင်သာသောအသေးစိတ်အချက်အလက်များကို ပြသနိုင်သည်ကို သတ်မှတ်ပေးသည်။ ဖိုင်အရွယ်အစားသည် သင့်စျေးဝယ်သူ မည်မျှဒေါင်းလုဒ်လုပ်ရမည်ကို သတ်မှတ်ပေးသည်။

အဲဒီနံပါတ်နှစ်ခုကို သီးခြားစီထားပါက ရုပ်ပုံစီစဉ်ခြင်းသည် ပိုမိုလွယ်ကူလာမည်ဖြစ်သည်။ thumbnail slot ကျဉ်းမြောင်းခြင်းသည် အရွယ်အစားကြီးသော အတိုင်းအတာများမှ အကျိုးကျေးဇူးမရရှိပါ။ ထုတ်ကုန်စာမျက်နှာ zoom ရုပ်ပုံသည် ကြည်လင်ပြတ်သားစေရန် pixel လုံလောက်စွာ လိုအပ်သော်လည်း ထုတ်ယူထားသောဖိုင်သည် Core Web Vitals နှင့် ၎င်းပတ်လည်တွင် load လုပ်ရမည့် စာမျက်နှာ၏ ကျန်အပိုင်းအတွက် သင့်တင့်လျောက်ပတ်နေရန် လိုအပ်ပါသည်။

JPEG၊ PNG၊ WebP နှင့် AVIF နှိုင်းယှဉ်ချက်

Shopify စတိုးဆိုင်တွင် ရုပ်ပုံဖော်မတ်တစ်ခုစီသည် ရည်ရွယ်ချက်အမျိုးမျိုးကို ဆောင်ရွက်ပေးပါသည်။ ထုတ်ကုန်ဓာတ်ပုံ၊ လိုဂိုနှင့် ဖန်သားပြင်ဓာတ်ပုံတို့သည် တူညီသော အပြင်အဆင်တွင် ရှိနေသော်လည်း ကွဲပြားသော ကိုင်တွယ်မှု လိုအပ်ပါသည်။ အလေ့အကျင့်ပေါ်တွင် မဟုတ်ဘဲ စာမျက်နှာပေါ်တွင် ရုပ်ပုံလုပ်ဆောင်ရမည့် အလုပ်ပေါ်မူတည်၍ ဖော်မတ်ကို ရွေးချယ်ပါ။

JPEG၊ PNG၊ WebP နှင့် AVIF ရုပ်ပုံဖော်မတ်များကို ၎င်းတို့၏ အင်္ဂါရပ်များနှင့် အသုံးပြုမှုကိစ္စရပ်များအကြောင်း ရှင်းလင်းချက်များနှင့်အတူ နှိုင်းယှဉ်ထားသော infographic တစ်ခု။

JPEG နှင့် PNG တို့သည် ၎င်းတို့နေရာယူထားဆဲဖြစ်သည်

JPEG သည် ဓာတ်ပုံများအတွက် စံရွေးချယ်မှုအဖြစ် ရှိနေဆဲဖြစ်သည်။ ၎င်းသည် ကောင်းစွာ ချုံ့ပေးပြီး နေရာတိုင်းလိုလိုတွင် အလုပ်လုပ်ပြီး ဝဘ်အတွက် ထုတ်ကုန်ပုံရိပ်များကို လုံလောက်စွာ ပေါ့ပါးနေစေပါသည်။ PNG သည် ထက်မြက်သောအနားသတ်များ၊ ပြားချပ်ချပ်အရောင်၊ ပွင့်လင်းမြင်သာမှု သို့မဟုတ် စာသားများ လိုအပ်သော ပုံများကို ကိုက်ညီစေသောကြောင့် လိုဂိုများနှင့် UI ဂရပ်ဖစ်များသည် ဖိုင်များသည် ပုံမှန်အားဖြင့် ပိုလေးသော်လည်း မကြာခဏ ထိုနေရာတွင် ရှိလေ့ရှိသည်။

Shopify မှာ အဲဒီခွဲဝေမှုက အရေးပါပါတယ်၊ ဘာလို့လဲဆိုတော့ စတိုးဆိုင်တွေက ပိုင်ဆိုင်မှုနှစ်မျိုးလုံးကို ရောနှောထားလေ့ရှိလို့ပါ။ PNG အဖြစ် သိမ်းဆည်းထားတဲ့ လူနေမှုပုံစံဓာတ်ပုံတစ်ပုံဟာ စတိုးဆိုင်က သယ်ဆောင်ရမယ့် အလေးချိန်ထက် ပိုလေးလေ့ရှိပါတယ်။ JPEG အဖြစ် သိမ်းဆည်းထားတဲ့ လိုဂိုဟာ ကြမ်းတမ်းတဲ့ပုံပေါက်နိုင်သလို ပွင့်လင်းမြင်သာမှု ဆုံးရှုံးသွားနိုင်ပြီး နောက်ပိုင်းမှာ ရှောင်ရှားနိုင်တဲ့ ရှင်းလင်းမှုတွေကို ဖြစ်ပေါ်စေပါတယ်။ ဖော်မတ်ဟာ အလေ့အကျင့်မဟုတ်ဘဲ အလုပ်နဲ့ ကိုက်ညီသင့်ပါတယ်။

စုဆောင်းမှုကတ်သည် ကောင်းမွန်သော ဥပမာတစ်ခုဖြစ်သည်။ ပုံသည် သန့်ရှင်းသော ထုတ်ကုန်ရိုက်ကူးမှုဖြစ်ပါက JPEG သည် များသောအားဖြင့် ဈေးဝယ်သူများ ရရှိသော မြင်ကွင်းကို မထိခိုက်စေဘဲ အလေးချိန်ကို လျှော့ချပေးလေ့ရှိသည်။ ပိုင်ဆိုင်မှုသည် အရောင်နောက်ခံပေါ်တွင် တံဆိပ်၊ အိုင်ကွန် သို့မဟုတ် လိုဂိုဖြစ်ပါက PNG သည် အနားသတ်များကို ပိုမိုကောင်းမွန်စွာ ကာကွယ်ပေးပြီး ရုပ်ဆိုးသော ရောင်ခြည်များကို ရှောင်ရှားသည်။

WebP နှင့် AVIF push ဖိုင်အရွယ်အစားများ လျှော့ချထားသည်

ခေတ်သစ်ဖော်မတ်များသည် ဖိုင်အရွယ်အစားကို ပိုမိုလျှော့ချလေ့ရှိသည်။ နှိုင်းယှဉ်နိုင်သော အရည်အသွေးရှိသော ဥပမာပုံတစ်ပုံအတွက်၊ 75% တွင် JPEG သည် 1.25–1.53 MB ခန့်၊ WebP lossy သည် 0.72–0.88 MB ခန့်၊ AVIF သည် 0.57–0.69 MB ခန့်နှင့် JPEG XL သည် 0.55–0.67 MB ခန့် ( W3Techs )။ ၎င်းသည် ပို့ကုန်အလေ့အထဟောင်းများမှ အဓိပ္ပာယ်ရှိသော ကျဆင်းမှုတစ်ခုဖြစ်ပြီး စတိုးဆိုင်များစွာသည် ဓာတ်ပုံများကို နူးညံ့သောပုံမပေါက်စေဘဲ အလေးချိန်လျှော့ချနိုင်သည့်အကြောင်းရင်းကို ရှင်းပြသည်။

အားနည်းချက်ကတော့ format ရွေးချယ်မှုက အကြောင်းအရာပေါ်မှာပဲ မူတည်နေဆဲပါ။ WebP နဲ့ AVIF တို့ဟာ ထုတ်ကုန်ဓာတ်ပုံရိုက်ကူးမှုအတွက် အလွန်ကောင်းမွန်စွာ အလုပ်လုပ်နိုင်ပေမယ့် transparency ပါတဲ့ ဂရပ်ဖစ်တွေက ကွဲပြားစွာ လုပ်ဆောင်နိုင်ပါတယ်။ ဖိုင်တစ်ခုက အများအားဖြင့် ဓာတ်ပုံတစ်ပုံဆိုရင် အဲဒီလို image အမျိုးအစားကို ထိရောက်စွာ ချုံ့ပေးတဲ့ format ကိုသုံးပါ။ transparency ပါတဲ့ logo ဒါမှမဟုတ် ဂရပ်ဖစ်ဆိုရင် အနားသတ်တွေကို သန့်ရှင်းအောင်ထားပေးတဲ့ format ကိုသုံးပါ။

Shopify စတိုးဆိုင်တစ်ခုမှာဆိုရင် hero banner အတွက် format တစ်ခု၊ logo အတွက် format တစ်ခုနဲ့ close-up product ရိုက်ချက်တွေအတွက် format တစ်ခုလို့ ဆိုလိုလေ့ရှိပါတယ်။ မှန်ကန်တဲ့ရွေးချယ်မှုကတော့ ခေတ်မီတဲ့ပုံစံထက် စာမျက်နှာကို မြန်ဆန်နေစေပြီး ပုံကို တကယ့်နေရာမှာ ရှင်းရှင်းလင်းလင်းပြသနေစေဖို့ပါပဲ။

ဆုံးဖြတ်ချက်စည်းမျဉ်း- လူများ၊ ထုတ်ကုန်များ သို့မဟုတ် texture များဖြင့် ဓာတ်ပုံရိုက်ပါ၊ JPEG သို့မဟုတ် WebP ကို ရွေးချယ်ပါ။ flat graphics၊ logo များ သို့မဟုတ် screenshot များရှိပါက PNG ကို ရွေးချယ်ပါ။ သင်၏ workflow သည် fallback ကို ပံ့ပိုးပေးနိုင်ပါက AVIF သို့မဟုတ် WebP သည် ပိုမိုသန့်ရှင်းသော live-store ရွေးချယ်မှုဖြစ်သည်။

Resolution နဲ့ Compression က ဂဏန်းတွေကို ဘယ်လိုပြောင်းလဲစေသလဲ

ဖိုင်တစ်ခုဟာ သင့်ဖန်သားပြင်ပေါ်မှာ ကောင်းမွန်စွာပေါ်လွင်နေနိုင်ပေမယ့် လိုအပ်တာထက် အများကြီးပိုလေးနေနိုင်ပါတယ်။ Shopify မှာ ကုန်သည်တွေက အဲဒါကို ဦးစားပေးခံစားရတဲ့ အပိုင်းပါ၊ ဘာလို့လဲဆိုတော့ hero banner၊ collection grid tile၊ product zoom shot ဒါမှမဟုတ် thumbnail အသေးစားတစ်ခုအနေနဲ့ တူညီတဲ့ image တစ်ခုဟာ အလွန်ကွဲပြားစွာ ပြုမူနိုင်လို့ပါ။ Resolution က browser ကို သင်ဘယ်နှစ် pixels သယ်ဆောင်ဖို့ တောင်းဆိုနေတယ်ဆိုတာကို ထိန်းချုပ်ပေးပြီး compression က စာမျက်နှာမတင်ခင် အဲဒီအလေးချိန်ရဲ့ ဘယ်လောက်လျှော့ချမလဲဆိုတာကို ထိန်းချုပ်ပေးပါတယ်။

pixel ပိုများလေ data ပိုများလေပါပဲ

ပိုကြီးတဲ့ပုံတစ်ပုံဟာ ပိုကြီးတဲ့ ပတ္တူတစ်ခုတင်မကဘူး၊ browser အတွက် လုပ်ဆောင်ရမယ့် raw data ပိုများပါတယ်။ အစောပိုင်းမှာပြထားတဲ့အတိုင်း 24MP ပုံတစ်ပုံမှာ compression မစတင်ခင် raw data 72 million bytes လောက်ပါဝင်ပါတယ် ။ storefront လိုအပ်တာထက် pixel အရေအတွက်ပိုများတဲ့ scene ကို export လုပ်မယ်ဆိုရင် ဓာတ်ပုံကိုပြသပြီးတာနဲ့ တစ်ပုံစံတည်းနီးပါးဖြစ်နေရင်တောင် ဖိုင်က ပိုလေးလာပါတယ်။

ဒါကြောင့်ပဲ အရွယ်အစားကြီးတဲ့ ပို့ကုန်တွေက သိုလှောင်မှု ရှုပ်ပွတာထက် ပိုပြီး ဖြစ်စေတာပါ။ သူတို့က transfer weight ကို တိုးစေပြီး browser ကို ပိုပင်ပန်းစေပြီး ဈေးဝယ်သူတွေက စာမျက်နှာကို မြန်မြန်ဆန်ဆန် ခံစားရမယ်လို့ မျှော်လင့်ထားတဲ့ နေရာမှာ image ကို နှေးကွေးစေနိုင်ပါတယ်။ collection grid tile ဟာ zoom လုပ်နိုင်တဲ့ product image နဲ့ တူညီတဲ့ payload မလိုအပ်ပါဘူး။ ပြီးတော့ thumbnail ကလည်း သူတို့ထဲက ဘယ်ဟာထက်မဆို အများကြီး ပိုနည်းတဲ့ payload လိုအပ်ပါတယ်။

ဖိသိပ်ခြင်းက သင့်အား ကယ်တင်ပေးသော်လည်း အပို pixel များကို လွတ်သွားစေမည်မဟုတ်ပါ။

ချုံ့ခြင်းက source file ကြီးတစ်ခုကို Shopify ထိရောက်စွာ ဝန်ဆောင်မှုပေးနိုင်တဲ့ အနေအထားအထိ လျှော့ချပေးနိုင်ပေမယ့် နေရာချထားမှု လိုအပ်တာထက် pixel တွေ ပိုသုံးရတဲ့ ကုန်ကျစရိတ်ကို လျှော့ချပေးမှာ မဟုတ်ပါဘူး။ ထုတ်ကုန်ဓာတ်ပုံတစ်ပုံဟာ zoom-enabled gallery ထဲကို ဝင်သွားမယ်ဆိုရင် ကောင်းမွန်တဲ့ screen မှာ ပြတ်သားနေစေဖို့ လုံလောက်တဲ့ အသေးစိတ်အချက်အလက်တွေ လိုအပ်ပါတယ်။ တူညီတဲ့ပုံတစ်ပုံကို collection card ထဲကိုပဲ ဝင်သွားမယ်ဆိုရင် full size version ကို တင်ပို့တာက အလဟဿဖြစ်စေပါတယ်။

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

Shopify အသုံးပြုမှုကိစ္စရပ်များနှင့် ချိတ်ဆက်ထားသော ပုံအရွယ်အစားလမ်းညွှန်ချက်အတွက်၊ ဤ Shopify ပုံ SEO လမ်းညွှန် သည် အသုံးဝင်သော အဖော်တစ်ခုဖြစ်သည်။ ၎င်းသည် စတိုးဆိုင်ပုံတိုင်းကို အလုပ်တစ်ခုတည်းကို ဆောင်ရွက်ပေးသကဲ့သို့ မသတ်မှတ်ဘဲ တင်ပို့မှုဆုံးဖြတ်ချက်ကို တကယ့်နေရာချထားမှုနှင့် ချိတ်ဆက်ရန် ကူညီပေးသည်။

hero image၊ collection tile နှင့် thumbnail အားလုံးသည် အသေးစိတ်အဆင့်အမျိုးမျိုးကို တောင်းဆိုသည်။ ၎င်းသည် merchant များ မကြာခဏ လွတ်သွားလေ့ရှိသော အပိုင်းဖြစ်ပြီး ထို့ကြောင့် editor တွင် resolution အနည်းငယ်ပြောင်းလဲမှုသည် browser တွင် ပိုမိုလေးလံသော store ကို ဖန်တီးနေစဉ်တွင် အန္တရာယ်မရှိဟု ခံစားရနိုင်သည်။

Core Web Vitals နှင့် လေးလံသောပုံများ၏ SEO ကုန်ကျစရိတ်

ပုံတွေ လေးလံတာက SEO ကို တိုက်ရိုက်ထိခိုက်စေပါတယ်၊ ဘာလို့လဲဆိုတော့ Google က upload လုပ်တဲ့ ရည်ရွယ်ချက်ကို မဟုတ်ဘဲ အတွေ့အကြုံကို တိုင်းတာလို့ပါ။ Shopify စာမျက်နှာအများစုမှာ မြင်သာတဲ့ အကြီးဆုံးပုံက loading အတွေ့အကြုံကို ထိန်းချုပ်နိုင်ဆုံးအရာပါ။ အဲဒီပုံက လေးလံလွန်းရင် Largest Contentful Paint က နှေးကွေးသွားပြီး စာမျက်နှာက အသုံးပြုလို့ရပြီလို့ ခံစားရတဲ့အထိ visitor က ပိုကြာကြာစောင့်ရပါတယ်။

ရုပ်ပုံဖိုင်အရွယ်အစားများ တိုးမြှင့်ခြင်းသည် Largest Contentful Paint စာမျက်နှာတင်ချိန်များကို မည်သို့ဆိုးကျိုးသက်ရောက်စေသည်ကို ပြသသည့် ဘားဇယား။

LCP သည် များသောအားဖြင့် မှားယွင်းသောအရာအပေါ် အပြစ်တင်ခံရလေ့ရှိသည်။

ကုန်သည်များသည် အက်ပ်များ၊ script များ သို့မဟုတ် theme code များကို ဦးစွာအပြစ်တင်လေ့ရှိပြီး တစ်ခါတစ်ရံတွင် ၎င်းတို့မှန်ကန်ပါသည်။ သို့သော် hero image သည် အလွယ်ကူဆုံး single win ဖြစ်လေ့ရှိသည်။ hero photo ကြီးတစ်ခုသည် စာမျက်နှာသည် အဓိပ္ပာယ်ရှိလာသည့်အချိန်ကို နှောင့်နှေးစေနိုင်သည်၊ အထူးသဖြင့် မိုဘိုင်းတွင် ချိတ်ဆက်မှုအရည်အသွေးကွဲပြားပြီး viewport သည် သေးငယ်သောကြောင့် အလွန်အကျွံကြီးမားသော asset များကို အလွယ်တကူမြင်တွေ့နိုင်သည့်အချိန်ဖြစ်သည်။

image weight က သက်ရောက်မှုရှိတဲ့ နောက်ထပ် metric ကတော့ Cumulative Layout Shift ပါ။ သင့်ရဲ့ theme က image တွေအတွက် နေရာကောင်းကောင်း မချန်ထားဘူးဆိုရင် assets load လုပ်တဲ့အခါ layout က ခုန်သွားပါတယ်။ အဲဒါက shopper တွေအတွက် ပေါ့ပေါ့ပါးပါး ခံစားရစေပြီး page ကို အသုံးပြုဖို့ ပိုခက်ခဲစေပါတယ်။ Shopify themes တွေက ဒီအလုပ်တွေထဲက အချို့ကို လုပ်ဆောင်ပေးပြီးသား ဖြစ်ပေမယ့် merchant ကို image workflow ညံ့ဖျင်းမှုကနေ ကယ်တင်ဖို့ အမြဲတမ်း လုံလောက်မှု မရှိပါဘူး။

အရွယ်အစားပစ်မှတ်များသည် ကျပန်းမဟုတ်ပါ

ဝဘ်ပေးပို့မှုအတွက် နည်းပညာဆိုင်ရာ လမ်းညွှန်ချက်များတွင် ထုတ်ကုန်ဓာတ်ပုံများသည် 800 မှ 1000 px နှင့် 80 မှ 150 KB ဝန်းကျင်၊ hero ပုံများသည် 200 KB အောက် နှင့် စာမျက်နှာပုံဘတ်ဂျက် စုစုပေါင်း 500 KB အောက် ရှိရန် မကြာခဏ တောင်းဆိုလေ့ရှိသည်။ တူညီသော လမ်းညွှန်ချက်တွင် JPEG များကို မကြာခဏ 200 မှ 600 KB ဝန်းကျင်၊ WebP ကို 150 မှ 450 KB ၊ AVIF ကို 80 မှ 300 KB နှင့် PNG ကို 500 KB မှ 3 MB အထိ ထားရှိ လေ့ရှိသည် ( Vizua )။ ပုံအလေးချိန်နှင့် စာမျက်နှာစွမ်းဆောင်ရည်တို့သည် အတူတကွ ဆက်စပ်နေသောကြောင့် ထိုအပိုင်းအခြားများ တည်ရှိနေခြင်းဖြစ်သည်။

စာမျက်နှာတစ်ခုဟာ မြန်ဆန်ဖို့အတွက် အတုအယောင်အရွယ်အစားသေးငယ်ဖို့ မလိုအပ်ပါဘူး။ စည်းကမ်းရှိဖို့တော့ လိုအပ်ပါတယ်။ သင့်ရဲ့ image load က ဖောင်းပွနေရင် browser ကို ဈေးဝယ်သူရဲ့ အတွေ့အကြုံကို မတိုးတက်စေတဲ့ အလုပ်လုပ်ခိုင်းနေတာပါ။ အဲဒါက တိုက်ရိုက် SEO ကုန်ကျစရိတ်ပါ၊ သီအိုရီအရ မဟုတ်ပါဘူး။

ပိုမိုကျယ်ပြန့်သော စာရင်းစစ်လုပ်ငန်းစဉ်အပေါ် Shopify ကိုအာရုံစိုက်သည့်ရှုထောင့်အတွက်၊ Shopify အတွက် ဤပုံ SEO လမ်းညွှန်သည် အသုံးဝင်သော ကိုးကားချက်တစ်ခုဖြစ်သည်။

Shopify နေရာချထားမှုမှ ပစ်မှတ်ပုံဖိုင်အရွယ်အစားများ

ခန့်မှန်းခြင်းကို ရပ်တန့်ရန် အလွယ်ကူဆုံးနည်းလမ်းမှာ စတိုးဆိုင်မျက်နှာစာရှိ visual role တစ်ခုချင်းစီအတွက် ဖိုင်အရွယ်အစားဘတ်ဂျက် သတ်မှတ်ခြင်းဖြစ်သည်။ hero banner သည် thumbnail နှင့် မတူညီသောအလုပ်ကို လုပ်ဆောင်ပြီး collection grid ကို zoom လုပ်နိုင်သော ထုတ်ကုန်ပုံနှင့် အလေးချိန်တူညီစွာ မထုတ်ယူသင့်ပါ။ ကုန်သည်များသည် ပုံဖိုင်အရွယ်အစားများကို တကယ့်နေရာချထားမှုများသို့ သတ်မှတ်ပြီးသည်နှင့် စတိုးဆိုင်ကို ပိုမိုမြန်ဆန်စွာ ထိန်းသိမ်းရန် ပိုမိုလွယ်ကူပြီး audit လုပ်ရန်လည်း ပိုမိုလွယ်ကူပါသည်။

စတိုးဆိုင်အပြင်အဆင်က သင့်ရဲ့ ထုတ်ယူမှုရွေးချယ်မှုတွေကို ဆုံးဖြတ်ပါစေ

အကျယ်အပြည့်ပုံများသည် layout block ငယ်များထက် နေရာပိုလိုအပ်လေ့ရှိသည်။ တုံ့ပြန်မှုရှိသော ပုံလမ်းညွှန်ချက်သည် 1600 px နှင့် 200 မှ 300 KB ဝန်းကျင်ရှိ အကျယ်အပြည့်ပုံများ၊ 800 px နှင့် 70 မှ 350 KB အနီးရှိ 25% မှ 50% ရှိသော layout ပုံငယ်များနှင့် မျက်နှာပြင်သိပ်သည်းဆမြင့်မားသော မျက်နှာပြင်များတွင် ကြည်လင်ပြတ်သားစွာ ရှိနေစေရန် ပြသရန်နေရာ၏ 2x ခန့်ရှိသော ပုံများကို ညွှန်ပြလေ့ရှိသည်။ လက်တွေ့တွင်၊ ဆိုလိုသည်မှာ တူညီသောရင်းမြစ်ဓာတ်ပုံသည် မကြာခဏ မတူညီသော export များ လိုအပ်လေ့ရှိပြီး တစ်ခုမှာ ၎င်းဖြည့်သွင်းသည့် slot အတွက်ဖြစ်ပြီး တစ်ခုမှာ မျက်နှာပြင်သိပ်သည်းဆမြင့်မားစွာ မျှော်လင့်ထားသည့် ကြည်လင်ပြတ်သားသော rendering အတွက်ဖြစ်သည်။

Shopify နေရာချထားမှုမှ ပုံဖိုင်အရွယ်အစားပစ်မှတ်များ နေရာချထားမှု ပစ်မှတ်အကျယ် ပစ်မှတ်ဖိုင်အရွယ်အစား အကြံပြုထားသော ဖော်မတ်
သူရဲကောင်း အလံ စာမျက်နှာ၏ ထိပ်ဆုံးရှိ သူရဲကောင်း ၁၆၀၀ ပစ်ဇယ်ခန့် ၂၀၀ မှ ၃၀၀ ကီလိုဘိုက် JPEG သို့မဟုတ် WebP
စုစည်းမှုဇယားကွက် ပုံသေး စုစည်းမှု ကြွေပြားများ ၄၀၀ မှ ၆၀၀ px ခန့် ၄၀ မှ ၈၀ ကီလိုဘိုက် JPEG သို့မဟုတ် WebP
ထုတ်ကုန်စာမျက်နှာ ဓာတ်ပုံ အဓိကထုတ်ကုန်ပြခန်း ၈၀၀ မှ ၁၂၀၀ px ခန့် ၁၀၀ မှ ၂၀၀ ကီလိုဘိုက် JPEG၊ WebP သို့မဟုတ် AVIF
ပုံသေး သို့မဟုတ် နမူနာပုံ ထောက်ပံ့ရေးအပေါက်ငယ် ၂၀၀ မှ ၄၀၀ px ခန့် တတ်နိုင်သမျှ ပေါ့ပါးအောင်ထားပါ အကြောင်းအရာပေါ် မူတည်၍ JPEG သို့မဟုတ် PNG

hero image တစ်ခုဟာ viewport ကို ပိုဖြည့်ပေးတဲ့အတွက် အလေးချိန်ပိုရှိနိုင်ပါတယ်။ collection tile ကတော့ အလေးချိန်ပိုမထည့်နိုင်ပါဘူး။ Shopify အပိုင်းတွေအတွက် image တွေ export လုပ်တဲ့အခါ merchandist တွေ သတိပြုရမယ့် ကွာခြားချက်ကတော့ ဖိုင်အရွယ်အစားဟာ စာမျက်နှာပေါ်မှာ image နေရာယူထားတဲ့နေရာနဲ့ ကိုက်ညီသင့်လို့ပါ။

ပုံတစ်ပုံတည်းကို တစ်ခုထက်ပိုသော ထုတ်ယူမှုများ လိုအပ်ရသည့် အကြောင်းရင်း

ထုတ်ကုန်စာမျက်နှာတစ်ခုသည် responsive markup မှတစ်ဆင့် တူညီသောဖိုင်၏ ဗားရှင်းများစွာကို မကြာခဏ ဖော်ပြပေးလေ့ရှိသည်။ ၎င်းသည် ပုံမှန်ဖြစ်သည်။ browser သည် မျက်နှာပြင်ငယ်များအတွက် ဖိုင်ငယ်တစ်ခုကို ရယူပြီး layout လိုအပ်သည့်နေရာတွင်သာ ဖိုင်ကြီးတစ်ခုကို ရယူသင့်သည်။ ထို setup သည် zoom အရည်အသွေးကို ထိန်းသိမ်းထားကာ visitor တိုင်းထံ မလိုအပ်သော အစုအဝေးများကို မပို့ပါ။

ထုတ်ကုန်ပြခန်းထက်ကျော်လွန်၍ အလားတူယုတ္တိဗေဒသည် အကျုံးဝင်ပါသည်။ စတိုးဆိုင်တစ်ခုသည် အဓိကသူရဲကောင်းအတွက် ကုသမှုတစ်ခု၊ စုဆောင်းမှုကတ်များအတွက် နောက်တစ်ခုနှင့် အနီးကပ်အသေးစိတ်ပုံများအတွက် နောက်တစ်ခု လိုအပ်လေ့ရှိသည်။ လူမှုရေးနှင့် မျှဝေခြင်းပိုင်ဆိုင်မှုများကို စတိုးဆိုင်ရုပ်ပုံများနှင့် ချိန်ညှိထားလိုပါက ဤ Shopify လူမှုရေးပုံရိပ်လမ်းညွှန်သည် ထုတ်ကုန်စာမျက်နှာပြင်ပရှိ လိုအပ်ချက်များကို တူညီသောပုံရိပ်လုပ်ငန်းစဉ်နှင့် ချိတ်ဆက်ရန် ကူညီပေးသည်။

Shopify ရဲ့ လက်တွေ့စည်းမျဉ်းကတော့ - slot က export ကို ဆုံးဖြတ်ပါစေ။ hero က ရက်ရောနိုင်ပါတယ်။ grid thumbnail က မလုပ်နိုင်ပါဘူး။

အဲဒီစည်းမျဉ်းက ပုံတစ်ပုံကြီးတစ်ပုံတင်ပြီး theme က ဖြေရှင်းပေးလိမ့်မယ်လို့ မျှော်လင့်တဲ့ အဖြစ်များတဲ့အမှားကို ကာကွယ်ပေးပါတယ်။ themes တွေက ကူညီပေးနိုင်ပေမယ့် export မှားယွင်းတဲ့ဆုံးဖြတ်ချက်ကို ပြန်ပြင်လို့မရပါဘူး။

ဆိုင်များနှေးကွေးစေသော အဖြစ်များသော အထင်အမြင်လွဲမှားမှုများ

Shopify ဆိုင်အများစုဟာ နှေးကွေးနေရတာဟာ တစ်စုံတစ်ယောက်က တစ်ဝက်တစ်ပျက် စည်းမျဉ်းတစ်ခုကို ယုံကြည်ပြီး ထပ်ခါတလဲလဲ လုပ်ဆောင်နေလို့ပါ။ အဲဒီအကျင့်တွေဟာ စစ်ဆေးမှုတွေမှာ ထပ်ခါတလဲလဲ ပေါ်လာတတ်ပါတယ်၊ များသောအားဖြင့် အကြံဉာဏ်ဟာ အစပိုင်းမှာ ကျိုးကြောင်းဆီလျော်တယ်လို့ ထင်ရပြီး ဆိုင်ရဲ့ load နဲ့ ဘယ်တုန်းကမှ မကိုက်ညီလို့ပါ။ အကျင့်နဲ့ performance ကို ခွဲခြားပြီးတာနဲ့ ပြင်ဆင်ချက်တွေက ရိုးရှင်းပါတယ်။

ရှောင်ရှားနိုင်သော ဝမ်းဗိုက်ဖောင်းပွမှုကို ဖြစ်စေသော ယုံကြည်ချက်ငါးခု

  • ရုပ်ထွက်အရည်အသွေး မြင့်မားခြင်းက အမြဲတမ်း အရည်အသွေး ပိုကောင်းတယ်လို့ ဆိုလိုပါတယ်။ ပုံတစ်ပုံဟာ ၎င်းဖြည့်ထားတဲ့ နေရာထက် ပိုကြီးနေပြီဆိုရင် အဲဒါ မှန်ကန်တော့မှာ မဟုတ်ပါဘူး။ အပို pixel တွေက ဝယ်ယူသူရဲ့ မြင်ကွင်းအတွက် ဘာမှ မလုပ်ပေးဘဲ အလေးချိန်ကိုပဲ တိုးစေပါတယ်။
  • PNG ဟာ JPEG ထက် အမြဲတမ်း ပိုပြတ်သားပါတယ်။ PNG ဟာ မာကျောတဲ့ အနားသတ်တွေပါတဲ့ လိုဂိုတွေနဲ့ ဂရပ်ဖစ်တွေအတွက် မှန်ကန်တဲ့ ရွေးချယ်မှုပါ၊ ဒါပေမယ့် ထုတ်ကုန်ဓာတ်ပုံတွေမှာ အဲဒီ lossless overhead မလိုအပ်ပါဘူး။
  • Shopify က အရာအားလုံးကို အလိုအလျောက် အကောင်းဆုံးဖြစ်အောင် လုပ်ဆောင်ပေးပါတယ်။ Shopify က တချို့ကိစ္စတွေမှာ ကူညီပေးပေမယ့် မူရင်းအပ်လုဒ်က ပိုင်ဆိုင်မှုရဲ့ အလေးချိန်ကို ကန့်သတ်ထားဆဲပါ။
  • WebP က Google က မဖတ်နိုင်လို့ SEO ကို ထိခိုက်စေပါတယ်။ အဲဒီယုံကြည်ချက်က ခေတ်နောက်ကျနေပါပြီ။ ရှာဖွေရေးစနစ်တွေက ပုံမှန်ပုံတွေလို ခေတ်မီဖော်မတ်တွေကို ပုံဖော်ပေးနိုင်ပါတယ်။
  • ပုံအရွယ်အစားက ဒက်စ်တော့ပေါ်မှာပဲ အရေးကြီးပါတယ်။ မိုဘိုင်းဖုန်းကနေ ဝယ်ယူသူတွေဟာ ဖိုင်အလေးချိန်ကို ဦးစားပေးခံစားရပါတယ်။ ဘာလို့လဲဆိုတော့ သူတို့ရဲ့ စက်ပစ္စည်းတွေနဲ့ ချိတ်ဆက်မှုတွေမှာ အမှားအယွင်းတွေ နည်းပါးသွားလို့ပါ။

ပြင်ဆင်ချက်ကုန်သည်များသည် ချက်ချင်းအသုံးပြုနိုင်သည်

ပြင်ဆင်ချက်က အကျင့်မဟုတ်ဘဲ အခန်းကဏ္ဍကနေ စတင်ပါတယ်။ သူရဲကောင်းပုံတစ်ပုံဟာ စာမျက်နှာရဲ့ထိပ်ဆုံးကို ထိန်းထားနိုင်ဖို့ အရည်အသွေးလုံလောက်ဖို့ လိုအပ်ပါတယ်။ grid က သန့်ရှင်းစွာ load လုပ်နိုင်အောင် collection tile က ပေါ့ပါးနေဖို့ လိုအပ်ပါတယ်။ zoom ပုံတစ်ပုံက တခြားအလုပ်ကို ဆောင်ရွက်ပေးတဲ့အတွက် အသေးစိတ်အချက်အလက်တွေ ပိုပါဝင်နိုင်ပြီး thumbnail ဒါမှမဟုတ် swatch ကတော့ layout က ခွင့်ပြုသလောက် သေးငယ်နေသင့်ပါတယ်။

ဒါကြောင့် ပုံတစ်ပုံချင်းစီအတွက် export rule တစ်ခုသာ ပေးတာက ပြဿနာဖြစ်စေတာပါ။ ပိုင်ဆိုင်မှုက ဓာတ်ပုံတစ်ပုံဆိုရင် မြန်ဆန်ပြီး ယုံကြည်ရတဲ့အရောင်ရအောင် export လုပ်ပါ။ စာသား ဒါမှမဟုတ် transparency ပါတဲ့ ဂရပ်ဖစ်ဆိုရင် အနားသတ်တွေကို ကာကွယ်ပြီး ဖိုင်က ပိုကြီးနိုင်တယ်ဆိုတာ လက်ခံပါ။ ကျဉ်းမြောင်းတဲ့ slot မှာ ရှိရင် full-width display အတွက် ရည်ရွယ်ထားတဲ့ ဖိုင်ကို upload မလုပ်ပါနဲ့။

resolution အပိုင်းမှာ ဖော်ပြထားတဲ့အတိုင်း 24MP ပုံတစ်ပုံဟာ compression လုပ်ပြီးနောက် 2 MB မှ 8 MB အထိ အရွယ်အစားရှိနိုင်ပါတယ်။ pixel အရေအတွက်တစ်ခုတည်းနဲ့ ပုံတစ်ပုံဟာ web-ready ဖြစ်မဖြစ် မပြောပြနိုင်တာကို ပြသဖို့ လုံလောက်ပါတယ်။ အဓိကမေးခွန်းကတော့ ဖိုင်ဟာ ၎င်းဝန်ဆောင်မှုပေးတဲ့ Shopify နေရာနဲ့ ကိုက်ညီမှုရှိမရှိပါပဲ။ hero တစ်ခုက grid card ထက်ပိုပြီး ခံနိုင်ရည်ရှိပြီး zoom ပုံတစ်ပုံကတော့ thumbnail ထက်ပိုပြီး ခံနိုင်ရည်ရှိပါတယ်။ export ဟာ role နဲ့ ကိုက်ညီရပါမယ်။

ဆက်စပ်အမှားတစ်ခုမှာ ပိုင်ဆိုင်မှုတိုင်းသည် တူညီသော metadata သန့်ရှင်းရေးလုပ်သင့်သည်ဟု ယူဆခြင်းဖြစ်သည်။ ရုပ်ပုံသည် ဖော်ပြရန် အရေးကြီးပါက ဦးစွာ audit လုပ်ရန် အရေးကြီးပါသည်။ Shopify ပုံများအတွက် alt text generator ကို အသုံးပြု၍ workflow ၏ ထိုအပိုင်းကို တသမတ်တည်းထားရှိပြီးနောက် ဖိုင်အရွယ်အစားကို ၎င်းဖြည့်မည့် slot နှင့် နှိုင်းယှဉ်ဆုံးဖြတ်ပါ။

အဲဒါက စတိုးဆိုင်အများစု လွတ်သွားတဲ့ အပိုင်းပါ။ ဖိုင်က သေးငယ်ဖို့ မလိုအပ်ပါဘူး။ သင့်တော်ဖို့လည်း လိုပါတယ်။

သင့်ရဲ့ နောက်ထပ် ရုပ်ပုံအသုတ်အတွက် ထပ်ခါတလဲလဲ စစ်ဆေးရမယ့်စာရင်း

အသန့်ရှင်းဆုံး image workflow က သင့်အဖွဲ့ ခန့်မှန်းစရာမလိုဘဲ ထပ်ခါတလဲလဲ လုပ်ဆောင်နိုင်တဲ့ workflow ပါ။ တူညီတဲ့ check တွေကို အစီအစဉ်အတိုင်း လုပ်ဆောင်တိုင်း oversized upload တွေ နည်းသွားသလို layout surprise တွေလည်း နည်းသွားသလို catalog ထဲမှာ ဝှက်ထားတဲ့ နှေးကွေးတဲ့ product page တွေလည်း နည်းသွားပါလိမ့်မယ်။ product အသစ် drop တစ်ခု ပြင်ဆင်နေတယ်ဆိုရင် ဒါမှမဟုတ် theme တစ်ခုကို refresh လုပ်နေရင် ဘာမှ အသက်မဝင်ခင် ဒီ routine ကို batch လုပ်ပြီး လုပ်ဆောင်ပါ။

Shopify နဲ့ ကိုက်ညီတဲ့ ရိုးရှင်းတဲ့ export လုပ်ရိုးလုပ်စဉ်တစ်ခု

  1. နေရာချထားမှုအတွက် ပစ်မှတ်အကျယ်တွင် ထုတ်ယူပါ။ ဟီးရိုး၊ စုဆောင်းမှုကတ်၊ ထုတ်ကုန်ချဲ့ကြည့်သည့်ပုံနှင့် thumbnail တို့သည် တစ်ခုစီတွင် မတူညီသောအလုပ်များရှိသောကြောင့် မူရင်းပုံက ခွင့်ပြုသည်ဟူသောအချက်ဖြင့် ပိုကြီးသောဖိုင်ကို မအပ်လုဒ်လုပ်ပါ။
  2. အခန်းကဏ္ဍအလိုက် ဖော်မတ်ကို ရွေးချယ်ပါ။ ဓာတ်ပုံများသည် JPEG၊ WebP သို့မဟုတ် AVIF နှင့် ကိုက်ညီလေ့ရှိသည်။ လိုဂိုများနှင့် စာသားများသော ဂရပ်ဖစ်များသည် ပွင့်လင်းမြင်သာမှု သို့မဟုတ် ထက်မြက်သော အနားသတ်များ အရေးကြီးသည့်အခါ PNG နှင့် ပိုမိုကိုက်ညီပါသည်။
  3. လိုအပ်ပါက live-store ဗားရှင်းနှင့် zoom ဗားရှင်းကို သိမ်းဆည်းပါ။ zoom ဖိုင်သည် အသေးစိတ်အချက်အလက်များကို ပိုမိုသိမ်းဆည်းနိုင်သော်လည်း layout မှ အမှန်တကယ်လိုအပ်မှသာ မြင်နိုင်သော စာမျက်နှာတွင် ထိုအလေးချိန်ကို သယ်ဆောင်သင့်ပါသည်။
  4. ဖြစ်နိုင်ရင် ပိုပေါ့ပါးတဲ့ ခေတ်မီဖော်မတ်ကို အသုံးပြုပါ။ တိုက်ရိုက်ပုံအတွက် WebP သို့မဟုတ် AVIF ကိုသုံးပါ၊ လိုက်ဖက်ညီမှုက အရေးကြီးတဲ့အခါ JPEG ကို fallback အဖြစ်ထားပါ။
  5. ထုတ်ဝေခြင်းမပြုမီ image metadata နှင့် alt text ကိုစစ်ဆေးပါ။ asset သည် feature ပြုလုပ်ရန် အရေးကြီးပါက audit ပြုလုပ်ရန် အရေးကြီးပါသည်။ workflow ၏ ထိုအပိုင်းကို တသမတ်တည်းထားရှိရန် RankEngine ၏ alt text generator ကို အသုံးပြုပါ။

https://rankengine.app မှ ဖန်သားပြင်ဓာတ်ပုံ

ဘယ်လို တသမတ်တည်းရှိမှုက သင့်ကို ဝယ်ယူနိုင်စေသလဲ

ကတ်တလောက်တစ်ခုလုံးမှာ တိုးတက်မှုအသေးစားလေးတွေ စုပုံနေပါတယ်။ ပိုပေါ့ပါးတဲ့ သူရဲကောင်းပုံတစ်ပုံက ဆိုင်တစ်ဆိုင်ကို သူ့အလိုလို ပြောင်းလဲသွားစေမှာ မဟုတ်ပေမယ့် အရွယ်အစားကောင်းမွန်တဲ့ ထုတ်ကုန်ဓာတ်ပုံတွေ၊ စုဆောင်းမှုပုံတွေနဲ့ ပုံသေးသေးလေးတွေက ဆိုင်ရှေ့မျက်နှာစာကို ပိုသန့်ရှင်း၊ ပိုမြန်ဆန်ပြီး ဈေးဝယ်ရလွယ်ကူစေမှာပါ။ ဖောက်သည်တွေက ဖိုင်အရွယ်အစားတွေအကြောင်း ဘယ်တော့မှ မပြောရင်တောင် ဒါကို သတိထားမိကြပါတယ်။

သင့်အဖွဲ့သည် ရုပ်ပုံ metadata ကို အတိုင်းအတာတစ်ခုအထိ ကိုင်တွယ်ပါက RankEngine ၏ alt text generator သည် အပ်လုဒ်တိုင်းကို လူကိုယ်တိုင်လုပ်ရသော အလုပ်အဖြစ် မပြောင်းလဲဘဲ workflow ၏ ထိုအပိုင်းကို ဆက်လက်လည်ပတ်နေစေနိုင်သည်။

ဤလုပ်ရိုးလုပ်စဉ်ကို သင်၏နောက်အသုတ်တွင် အသုံးချပါ၊ သင်၏စတိုးဆိုင်သည် ချက်ချင်းပိုမိုမြန်ဆန်စွာ တင်ပါလိမ့်မည်။