Shopify امیج سائز اور فائل سائز کی حدود
Shopify فی تصویر 20 MB کی اجازت دیتا ہے۔ یہ آخری حد ہے، ہدف نہیں۔ یہاں وہ سائز ہے جو آپ کا سٹور فرنٹ اصل میں چاہتا ہے۔
اپنے Shopify ماسٹر کے طور پر 2048 x 2048 پکسلز کا استعمال کریں اور فراہم کردہ ہر فائل کو 500 KB سے کم رکھیں۔ Shopify 20 MB اور 4472 پکسلز اسکوائر تک کی تصویروں کی اجازت دیتا ہے، لیکن وہ اعداد و شمار اس بات کی وضاحت کرتے ہیں جسے پلیٹ فارم برداشت کرتا ہے نہ کہ اس کی جس کی تیز رفتار سٹور فرنٹ کو ضرورت ہوتی ہے۔
20 MB کی رقم وہ عدد ہے جسے زیادہ تر گائیڈز نقل کرتی ہیں، اور ڈیزائن بنانے کے لیے یہ غلط عدد ہے۔ Shopify جس کی اجازت دیتا ہے اور Shopify جس پر انعام دیتا ہے وہ مختلف چیزیں ہیں۔ 3 MB فی تصویر کے حساب سے 8 تصاویر والا پروڈکٹ پیج ایک 24 MB کا پیج بن جاتا ہے، اور موبائل شاپرز اس کے لوڈ ہونے سے پہلے ہی چھوڑ کر چلے جاتے ہیں۔
مقام کے لحاظ سے Shopify امیج سائز
پروڈکٹ کی تصاویر 2048 پکسلز پر اسکوائر ہونی چاہئیں، جبکہ بینرز، کلیکشن ٹائلز اور لوگوز میں سے ہر ایک کو اپنے ابعاد کی ضرورت ہوتی ہے۔ ہر جگہ ایک ہی سائز کا استعمال کرنے سے بینرز کھنچ جاتے ہیں اور کلیکشن کی تصاویر کٹ جاتی ہیں۔
| مقام | تجویز کردہ پکسلز | ٹارگٹ فائل سائز | نوٹس |
|---|---|---|---|
| پروڈکٹ کی تصویر | 2048 x 2048 | 300 KB سے کم | اسکوائر گرڈ کو مرتب رکھتا ہے |
| کلیکشن ٹائل | 1200 x 1200 | 200 KB سے کم | زیادہ تر تھیمز کے ذریعے اسکوائر میں کراپ کیا جاتا ہے |
| ہوم پیج بینر | 1920 x 1080 | 400 KB سے کم | سب سے بڑا کنٹینٹ فل پینٹ (LCP) عنصر |
| سلائیڈ شو امیج | 1920 x 800 | 350 KB سے کم | موبائل پر ٹیسٹ کریں، کنارے کٹ جاتے ہیں |
| لوگو | 500 x 250 | 50 KB سے کم | اگر شفافیت کی ضرورت ہو تو PNG |
| Favicon | 96 x 96 | 10 KB سے کم | صرف PNG |
تھیمز تصاویر کو مختلف طریقے سے کراپ کرتی ہیں، اور ایک بینر جو ڈیسک ٹاپ کے پریویو پر صحیح نظر آتا ہے وہ فون پر اکثر درمیان سے کٹ جاتا ہے۔ بینر کے اہم حصے کو مرکزی 60 فیصد حصہ میں رکھیں تاکہ کوئی تھیم اسے کراپ نہ کر سکے۔
500 KB ہی اہم عدد کیوں ہے
پیج کا وزن یہ طے کرتا ہے کہ سٹور فرنٹ کتنی تیزی سے لوڈ ہوتا ہے، اور ایک عام پروڈکٹ پیج پر زیادہ تر وزن تصاویر کا ہوتا ہے۔ مجموعی طور پر 2 MB سے کم کا پیج موبائل ڈیٹا پر آسانی سے لوڈ ہو جاتا ہے، جبکہ 24 MB کا پیج ایسا نہیں کرتا۔
زیادہ تر سٹورز کے لیے فون پر آنے والے شاپرز ٹریفک کی اکثریت ہوتے ہیں، اور موبائل کنیکشنز میں دفتر کے براڈ بینڈ کے مقابلے میں بہت زیادہ فرق ہوتا ہے۔ لوڈنگ کا ہر ایک سیکنڈ کنورژنز کو متاثر کرتا ہے، جو تصویر کے وزن کو تکنیکی کے بجائے آمدنی کا سوال بناتا ہے۔ 8 پروڈکٹ تصاویر کو 3 MB سے 300 KB تک کم کرنے سے پیج سے 21 MB ہٹ جاتا ہے اور شاپرز کو دکھائی دینے والی کسی بھی چیز میں فرق نہیں آتا۔
کیا Shopify آپ کے لیے تصاویر کو کمپریس کرتا ہے
Shopify اپنے کنٹینٹ ڈیلیوری نیٹ ورک (CDN) کے ذریعے تبدیل شدہ سائز کی مختلف قسمیں فراہم کرتا ہے اور سپورٹ کرنے والے براؤزرز کے لیے خود بخود WebP میں تبدیل کر دیتا ہے۔ پلیٹ فارم ایک مناسب کام کرتا ہے، اور یہ آپ کے اپ لوڈ کردہ مواد پر کام کرتا ہے۔
آخری نقطہ محدود کرنے والا ہے۔ Shopify آپ کی اصل تصویر سے چھوٹے مختلف سائز تیار کرتا ہے، اس لیے ایک ناقص کمپریسڈ 5 MB کی اپ لوڈ ایک اچھی طرح تیار کردہ 400 KB کی اپ لوڈ کے مقابلے میں زیادہ بڑے سائز تیار کرے گی۔ اپ لوڈ کرنے سے پہلے کمپریس کرنے سے آپ کی اپنی اسٹوریج کا استعمال بھی کم ہوتا ہے اور بلک امپورٹس بہت تیز ہو جاتے ہیں، کیونکہ 500 پروڈکٹس کا امپورٹ 2.5 GB کے بجائے 200 MB منتقل کرتا ہے۔
Shopify کے لیے تصاویر کیسے تیار کریں
ایک تیز رفتار پروڈکٹ پیج بنانے کے لیے، ان 6 مراحل پر عمل کریں۔
- اپنے فوٹو ایڈیٹر سے 2048 x 2048 پکسلز پر ایک اسکوائر ماسٹر ایکسپورٹ کریں۔
- کسی بھی بینر یا لائف اسٹائل امیج کا سائز اس کی اصل ڈسپلے وڈتھ کے مطابق کریں، ہائی ڈینسٹی اسکرینز کے لیے اسے دگنا کریں۔
- تصاویر کو WebP میں تبدیل کریں، یا اگر آپ کا ورک فلو اس پر منحصر ہے تو JPG رکھیں، کیونکہ Shopify کسی بھی صورت میں تبدیل کرتا ہے۔
- پروڈکٹ کی تصاویر کے لیے 300 KB اور بینرز کے لیے 400 KB کا استعمال کرتے ہوئے، ایک ٹارگٹ سائز تک کمپریس کریں۔
- پروڈکٹ کوڈ اور ویو کے ذریعہ فائلوں کے نام رکھیں تاکہ بلک CSV امپورٹ تصاویر کو درست پروڈکٹس سے جوڑ سکے۔
- صرف ڈیسک ٹاپ پریویو کے بجائے فون پر اپ لوڈ کریں اور پروڈکٹ پیج چیک کریں۔
Shopify پر WebP
Shopify سالوں سے نیٹو طور پر WebP فراہم کر رہا ہے اور اپ لوڈ کردہ JPG اور PNG فائلوں کو خود بخود ان براؤزرز کے لیے تبدیل کر دیتا ہے جو اس کی حمایت کرتے ہیں۔ براہ راست WebP اپ لوڈ کرنا قبول کیا جاتا ہے اور یہ آپ کو پلیٹ فارم پر چھوڑنے کے بجائے کمپریشن پر کنٹرول دیتا ہے۔
WebP 25 سے 35 فیصد چھوٹے فائل سائز میں JPG جیسا بصری معیار حاصل کرتا ہے، جو 8 تصاویر والے پیج پر حاصل کرنا فائدے مند ہے۔ ایک صورت جس سے بچنا ہے وہ ہے WebP کو اپ لوڈ کرنا جہاں فائل کو بعد میں کسی سپلائر کے ذریعے ڈاؤن لوڈ کیا جائے گا یا پرنٹ شاپ میں بھیجا جائے گا، کیونکہ وہ منزلیں اب بھی JPG کی توقع رکھتی ہیں۔
سست پروڈکٹ پیج کو ٹھیک کرنا
پیج پر سب سے بڑی تصویر سے شروعات کریں، کیونکہ سب سے بڑی سنگل فائل عام طور پر تاخیر کی زیادہ تر وجہ ہوتی ہے۔ Shopify سٹور فرنٹ پر وہ عام طور پر ہوم پیج کا بینر یا پروڈکٹ کی پہلی تصویر ہوتی ہے۔
- کمپریس کرنے سے پہلے سائز بدلیں۔ 1920 پکسل سلوٹ میں 4000 پکسل کا بینر اپنے ڈیٹا کا 75 فیصد ضائع کرتا ہے۔
- ابو دی فولڈ تصاویر کی تعداد کم کریں۔ ایک بار میں لوڈ ہونے والی 12 تصاویر کی گیلری باقی تمام چیزوں کو مؤخر کر دیتی ہے۔
- چیک کریں کہ لیزی لوڈنگ آن ہے ان تصاویر کے لیے جو بلو دی فولڈ ہیں، جسے زیادہ تر جدید تھیمز بذریعہ ڈیفالٹ سنبھالتی ہیں۔
- اینیمیٹڈ GIF فائلوں کو ویڈیو سے بدلیں، کیونکہ ایک مختصر GIF اکثر پیج کے باقی تمام حصے سے زیادہ بھاری ہوتا ہے۔
- ایپس کا جائزہ لیں۔ ریویو ویجٹس، پاپ اپس اور ٹرسٹ بیجز اکثر اپنی تصاویر اور اسکرپٹس لوڈ کرتے ہیں۔
Alt متن اور امیج فائل کے نام
اسکرین ریڈرز کا استعمال کرنے والے شاپرز کے لیے پروڈکٹ کی وضاحت کرنے والا alt متن لکھیں، اور کیمرے کے بجائے پروڈکٹ کے نام پر فائلوں کے نام رکھیں۔ IMG_4821.jpg نامی فائل سرچ انجنز اور شاپرز کو کچھ نہیں بتاتی۔
navy-linen-shirt-front.jpg جیسا پیٹرن استعمال کریں، جو بلک امپورٹ میں پڑھنے کے قابل رہتا ہے، فولڈر میں متوقع طور پر ترتیب پاتا ہے اور سرچ نتائج میں تصویر کی وضاحت کرتا ہے۔ Alt متن کو بتانا چاہیے کہ تصویر کیا دکھاتی ہے، بشمول رنگ، مواد اور ویو، بغیر پروڈکٹ کا ٹائٹل لفظ بہ لفظ دہرائے۔ دونوں فیلڈز فی پروڈکٹ سیکنڈز لیتی ہیں اور اس میں سدھار لاتی ہیں کہ امیج سرچ میں سٹور کیسے نظر آتا ہے۔
تبدیلیوں کو لاگو کرنے سے پہلے ان کا ٹیسٹ کرنا
پہلے 5 پروڈکٹس کو پروسیس کریں، انہیں شائع کریں، اور پورا کیٹلاگ چلانے سے پہلے اصل فون پر پیجز چیک کریں۔ 500 پروڈکٹس پر لاگو سیٹنگز کی غلطی کو روکنے کے مقابلے میں واپس ٹھیک کرنے میں بہت زیادہ وقت لگتا ہے۔
ٹیسٹ پروڈکٹس پر 3 چیزیں چیک کریں۔ تصدیق کریں کہ فل زوم پر تصاویر واضح نظر آتی ہیں، کیونکہ شاپرز کپڑوں اور جیولری پر زوم کا زیادہ استعمال کرتے ہیں۔ تصدیق کریں کہ کلیکشن گرڈ ایک جیسے کراپس دکھاتا ہے۔ تصدیق کریں کہ پیج دفتر کے براؤڈ بینڈ کے بجائے موبائل ڈیٹا پر تیزی سے لوڈ ہوتا ہے۔ صرف اس کے بعد باقی تمام چیزوں پر وہی سیٹنگز لاگو کریں۔
امیج ایپس بمقابلہ اپ لوڈ سے پہلے پروسیس کرنا
کمپریشن ایپس اس مسئلے کو حل کرنے کے لیے ماہانہ چارج کرتی ہیں جسے آپ اپ لوڈ کرنے سے پہلے ایک بار میں حل کر سکتے ہیں۔ ایپس اس وقت مفید ہوتی ہیں جب ایک سٹور کو بہت سے لوگوں سے مسلسل نئی تصاویر موصول ہوتی ہیں اور کوئی بھی اس بات کو کنٹرول نہیں کرتا کہ کیا اپ لوڈ ہوتا ہے۔
مستحکم کیٹلاگ اور تصاویر کا انتظام کرنے والے ایک شخص کے ساتھ ایک سٹور کو بار بار ادا کی جانے والی فیس کی ضرورت نہیں ہے۔ لائبریری کو ایک بار کمپریس کرنا اور نئی تصاویر کے آتے ہی انہیں کمپریس کرنا ایک ہی نتیجہ حاصل کرتا ہے۔ اس وقت دوبارہ غور کریں جب کیٹلاگ اس حد سے آگے بڑھ جائے جسے آپ خود پروسیس کر سکتے ہیں، یا جب متعدد عملہ کسی تفصیلات پر عمل کیے بغیر تصاویر اپ لوڈ کرتا ہے۔
Shopify امیج کی عام غلطیاں
کیمرے سے براہ راست اپ لوڈ کرنا سب سے مہنگی غلطی ہے، کیونکہ 24 میگا پکسل کی تصویر 10 گنا زیادہ ڈیٹا رکھتی ہے جسے ایک سٹور فرنٹ دکھا سکتا ہے۔ پلیٹ فارم فائل قبول کرتا ہے، اور پیج اس کی قیمت چکاتا ہے۔
دو دیگر غلطیاں باقاعدگی سے ظاہر ہوتی ہیں۔ ایک کلیکشن میں تصویر کی شکلوں کو ملانے سے ایک ناہموار گرڈ بنتا ہے، کیونکہ تھیمز اسکوائر پر کراپ کرتی ہیں اور ایک پورٹریٹ تصویر اپنا اوپری اور نچلا حصہ کھو دیتی ہے۔ پروڈکٹ کی تصاویر کے لیے PNG کا استعمال فائل کے سائز کو 3 سے 5 گنا تک بغیر کسی باطنی فائدے کے بڑھا دیتا ہے، کیونکہ PNG ہر پکسل کو بالکل درست محفوظ کرتا ہے اور تصویر میں کوئی بھی چپٹا علاقہ نہیں ہوتا جس کا فائدہ اٹھایا جا سکے۔
ایک مستقل کیٹلاگ برقرار رکھنا
پورے کیٹلاگ کو ایک بیچ میں پروسیس کریں تاکہ ہر پروڈکٹ کی تصویر ایک ہی ابعاد، کمپریشن اور فریم شیئر کرے۔ پروڈکٹس کا موازنہ کرنے والے شاپرز عدم مطابقت کو محسوس کرتے ہیں چاہے وہ اس کا نام نہ لے سکیں۔
مستقل مزاجی کلیکشن گرڈ میں بھی مدد کرتی ہے، جہاں مماثل شکل اور چمک کی تصاویر جمع شدہ پیج کے بجائے ڈیزائن کیے گئے پیج کے طور پر پڑھی جاتی ہیں۔ ابعاد اور سائز کے ہدف کو ایک بار سیٹ کریں، پھر ہر پروڈکٹ کو انفرادی طور پر ایڈجسٹ کرنے کے بجائے انہیں ہر فائل پر لاگو کریں۔
ایک ساتھ کیٹلاگ پروسیس کرنا
ایک ساتھ 500 تک تصاویر ڈراپ کریں، یا اپنے فوٹوگرافر سے براہ راست ZIP آرکائیو ڈریگ کریں، اور ہر فائل اسی تفصیلات کے مطابق تبدیل شدہ سائز اور کمپریس ہو کر واپس آتی ہے۔ ڈیسک ٹاپ سافٹ ویئر میں جس کیٹلاگ کو ایک دوپہر لگتی تھی وہ چند منٹوں میں مکمل ہو جاتا ہے۔
سب کچھ آپ کے اپنے پروسیسر پر آپ کے براؤزر کے اندر چلتا ہے، اس لیے غیر ریلیز شدہ پروڈکٹس، سیزنل مہم کے شاٹس اور سپلائر فوٹوگرافی کبھی بھی سرور تک نہیں پہنچتی۔ پابندی کے تحت لانچ کی تیاری کرنے والے سٹور کے لیے، فائلوں کو مقامی رکھنا ایک کنٹرول شدہ اعلان اور لیک ہونے کے درمیان کا فرق ہے، اور اس کا کوئی اضافی خرچ نہیں آتا۔