شاپیفائی پروڈکٹ تصاویر: سائز جو واقعی بہتر نظر آئے

شاپیفائی پروڈکٹ تصاویر عام طور پر دو طرح سے ناکام ہوتی ہیں۔ یا تو وہ اتنی چھوٹی ہوتی ہیں کہ جب کوئی گاہک سیون یا پتھر کی سیٹنگ کو زوم کر کے دیکھے تو تصویر دھندلی ہو جاتی ہے۔ یا پھر وہ کیمرے سے سیدھی اتنی بڑی سائز میں آتی ہیں کہ صفحہ موبائل پر سست ہو جاتا ہے، جہاں سے آپ کا زیادہ تر ٹریفک آتا ہے۔ ایڈمن دونوں صورتوں کو بغیر کسی وارننگ کے قبول کر لیتا ہے۔

شاپیفائی زیادہ تر اسٹور مالکان کے اندازے سے کہیں زیادہ کام خود کر دیتا ہے: یہ آپ کے اسٹور کی مختلف جگہوں کے لیے ہر تصویر کے مختلف سائز بنا دیتا ہے، اور اس کا CDN جہاں براؤزر سپورٹ کرے وہاں WebP یا AVIF جیسا جدید فارمیٹ خود منتخب کر لیتا ہے۔ لیکن یہ غیر یکساں پہلو تناسب (aspect ratio) خود ٹھیک نہیں کرے گا، یہ اندازہ نہیں لگائے گا کہ کون سی تصویر کس ویریئنٹ کی ہے، اور نہ ہی کسی خراب کٹ آؤٹ کو بچائے گا۔ یہ وہ حصہ ہے جو آپ کے ہاتھ میں ہے۔

2048 x 2048 سے شروع کریں اور وہیں رک جائیں

شاپیفائی کی اپنی ہدایت یہ ہے: اسکوائر پروڈکٹ تصاویر کے لیے عام طور پر 2048 x 2048 px بہترین نتیجہ دیتا ہے۔ سخت حد اس سے کہیں زیادہ ہے — پروڈکٹ یا کلیکشن کی تصویر 20 MB سے کم ہونی چاہیے، اور یہ 5000 x 5000 px، یعنی 25 میگاپکسل تک جا سکتی ہے۔

یہ زیادہ سے زیادہ حدیں کوئی ہدف نہیں ہیں۔ Dawn تھیم میں، ان لائن پروڈکٹ گیلری CDN سے کبھی 1946 px سے زیادہ چوڑی تصویر نہیں مانگتی، اور زوم لائٹ باکس بھی 4096 px سے اوپر کوئی سائز طلب نہیں کرتا۔ 5000 px والی ماسٹر فائل زیادہ تر صرف سست اپ لوڈ اور درمیان میں سست ایڈیٹنگ ہی دیتی ہے۔ مین گیلری کے لیے 2048 px اسکوائر پر قائم رہیں۔ اپ لوڈ کے لیے سپورٹڈ فارمیٹس میں PNG، JPEG اور WebP شامل ہیں، اس لیے شاپیفائی کو 6 MB کی TIFF فائل کے بجائے کمپریسڈ فائل دیں۔

اسکوائر یا لمبا: ایک تناسب چنیں اور اسی پر قائم رہیں

کلیکشن گرڈز وہ جگہ ہیں جہاں مختلف پہلو تناسب واضح طور پر نظر آنے لگتے ہیں، یہی وجہ ہے کہ شاپیفائی فیچرڈ تصاویر میں یکساں تناسب رکھنے کی سفارش کرتا ہے۔ Dawn جیسی تھیمز آپ کو فریم کو ہر تصویر کے مطابق ایڈجسٹ کرنے یا سب کچھ ایک مقررہ تناسب میں لاک کرنے کا اختیار دیتی ہیں، اور غیر یکسانیت دونوں صورتوں میں نقصان دیتی ہے: ایڈجسٹ کرنے سے گرڈ بے ترتیب ہو جاتا ہے، جبکہ لاک کرنے سے بوتل کا اوپری حصہ کٹ جاتا ہے یا انگوٹھی کے ارد گرد خالی جگہ رہ جاتی ہے۔

اس لیے فیصلہ ایک ہی بار کریں۔ اسکوائر (1:1) سب سے محفوظ ڈیفالٹ ہے اور تنگ اسکرینز پر بھی اچھی طرح ری فلو ہوتا ہے۔ پورٹریٹ تناسب جیسے 4:5 یا 2:3 ملبوسات اور لمبی بوتلوں کے لیے موزوں ہیں، کیونکہ یہ موبائل پر زیادہ عمودی جگہ بھرتے ہیں۔ جو چیز آپ نہیں کر سکتے وہ یہ ہے کہ ایک ہی کلیکشن میں دونوں تناسب ایک ساتھ چلائیں۔

اسے پروڈکٹ کو کٹ آؤٹ کر کے اور فریم خود دوبارہ بنا کر نافذ کریں۔ remover.bg پر تصویر اپ لوڈ کریں، بیک گراؤنڈ ہٹائیں، اور اسے باقی ہر لسٹنگ جیسے ہی ٹھوس سفید یا برانڈ رنگ سے بدل دیں۔ اس کے بعد نتیجے کو اپنے منتخب کردہ فریم کے مطابق اُسی ایکسپورٹ ٹول میں دوبارہ سائز کریں جو آپ پہلے ہی استعمال کرتے ہیں، تاکہ ہاتھ میں پکڑا ہوا مگ اور فُل لینتھ کوٹ دونوں ایک جیسی ڈائمینشنز میں آئیں۔ یہی کٹ آؤٹ ایمازون کی سفید بیک گراؤنڈ گائیڈ کے سخت مارکیٹ پلیس اصولوں کے لیے بھی کام آتا ہے، یا آپ اسے شفاف رکھ کر بعد میں کمپوزٹ کر سکتے ہیں — دیکھیں شفاف PNG کب صحیح آؤٹ پٹ ہے۔

شاپیفائی کا CDN سائز تو بدل دیتا ہے، لیکن آپ کا سورس ٹھیک نہیں کر سکتا

تھیمز Liquid کے image_url اور image_tag فلٹرز کے ذریعے تصاویر منگواتی ہیں، جو ایک srcset بناتے ہیں تاکہ CDN ہر ڈیوائس کے لیے صحیح سائز اور صحیح فارمیٹ کی فائل فراہم کر سکے۔ یہی وجہ ہے کہ ایک اچھی طرح بنی ہوئی تھیم آپ کی 2048 px فائل کبھی 390 px والے فون کو نہیں بھیجتی۔

دو چیزیں ایسی ہیں جو یہ کور نہیں کرتا۔ اپ لوڈ کے وقت فارمیٹ کا انتخاب اب بھی اہم ہے: WebP میں ایکسپورٹ کرنے سے فائلیں CDN تک پہنچنے سے پہلے ہی چھوٹی رہتی ہیں، اور شاپیفائی WebP کو بغیر کسی تبدیلی کے قبول کر لیتا ہے، بالکل اسی طرح جیسے remover.bg شروع سے آخر تک WebP کو سنبھالتا ہے۔ اور سینکڑوں SKUs کے لیے کوئی فولڈر گھسیٹ کر ڈالنے کا شارٹ کٹ موجود نہیں؛ یہ کام بیک گراؤنڈ ریموول API کے خلاف چلنے والی اسکرپٹ کا ہے، جو آپ کے CSV امپورٹ کے ساتھ ساتھ چلائی جائے۔

زوم تبھی مدد دیتا ہے جب پکسلز موجود ہوں

شاپیفائی کے مطابق زوم کے صحیح طریقے سے کام کرنے کے لیے تصویر 800 x 800 px سے زیادہ ہونی چاہیے۔ Dawn میں، پروڈکٹ ٹیمپلیٹ کی زوم سیٹنگ کلک اینڈ ہوور، اوپن لائٹ باکس، یا بالکل زوم نہ ہونے کا آپشن دیتی ہے۔

زوم اُس وقت آن کریں جب ساخت (texture) ہی فروخت کی وجہ ہو: نِٹ وئیر، چمڑے کی بناوٹ، انگریوِنگ، جیم اسٹون کے فیسٹس، لکڑی۔ فلیٹ گرافکس اور چھوٹے آئیکنز کے لیے اسے بند رکھیں، کیونکہ وہاں زوم صرف کمپریشن کی خامیاں ہی نمایاں کرتا ہے۔ زوم کناروں کے معاملے میں بھی معاف نہیں کرتا — فر ٹرم، بکھرے بال اور باریک پٹے ہر غلطی ظاہر کر دیتے ہیں، اور یہیں ایک صاف ستھرا کٹ آؤٹ اپنی اہمیت ثابت کرتا ہے۔

ویریئنٹ تصاویر اور میڈیا ترتیب

ہر ویریئنٹ کے ساتھ بالکل ایک ہی مختص تصویر لگائی جا سکتی ہے — صرف تصویر، ویڈیو یا 3D ماڈل نہیں — اور جب گاہک وہ آپشن منتخب کرتا ہے تو یہی تصویر پیش نظارہ بن جاتی ہے۔

چونکہ فی ویریئنٹ ایک تصویر شاذ و نادر ہی کافی ہوتی ہے، اس کے ارد گرد گیلری کا استعمال کریں۔ ہر شاٹ کو پروڈکٹ میڈیا میں شامل کریں، اسے اس طرح ترتیب دیں کہ متعلقہ شاٹس ساتھ ساتھ رہیں، اور سب سے مضبوط تصویر کو سب سے پہلے رکھیں: پہلا میڈیا آئٹم ہی پروڈکٹ کارڈ اور ڈیفالٹ ویو کا تعین کرتا ہے۔

Alt text: 512 حروف کی اجازت ہے، مگر 125 کافی ہیں

شاپیفائی alt text کو زیادہ سے زیادہ 512 حروف تک محدود رکھتا ہے اور 125 یا اس سے کم کی سفارش کرتا ہے۔ یہ ایک پڑھنے کی سہولت سے متعلق ہدایت ہے، اسکرین ریڈر کی کوئی حد نہیں: لمبا alt text سننے میں تھکا دینے والا ہوتا ہے، کیونکہ سننے والا اسے سرسری طور پر نہیں دیکھ سکتا۔ فریم کو بیان کریں، ویریئنٹ سمیت۔ "نیوی لینن شرٹ، سامنے کا منظر، بٹن بند" کہنا صرف "شرٹ" سے کہیں بہتر ہے۔ "image of" جیسے الفاظ اور کی ورڈز کی فہرستیں شامل کرنے سے گریز کریں۔ Alt text کو پروڈکٹ بہ پروڈکٹ کرنے کے بجائے CSV اپ لوڈ کے ذریعے بلک میں بھی ایڈٹ کیا جا سکتا ہے۔

اپ لوڈ سے پہلے کی مختصر چیک لسٹ

شاپیفائی میں کوئی بیچ اپ لوڈ کرنے سے پہلے: پورٹریٹ منتخب نہ کیا ہو تو 2048 px پر اسکوائر ایکسپورٹ کریں، 20 MB کی حد سے کافی نیچے رہیں، پوری کلیکشن میں ایک ہی بیک گراؤنڈ ٹریٹمنٹ استعمال کریں، ہر ویریئنٹ کے لیے ایک تصویر مختص کریں اور اس کے ارد گرد گیلری ترتیب دیں، اور alt text کو 125 حروف سے کم رکھیں۔ ان میں سے کوئی بھی کام دلکش نہیں، لیکن جیسے ہی کوئی غلطی ہو، وہ کلیکشن پیج پر فوراً نظر آ جاتی ہے۔