Shopify প্রোডাক্ট ইমেজের সাইজ যা সত্যিই ভালো দেখায়

Shopify প্রোডাক্ট ইমেজ সাধারণত দুই দিক থেকে ব্যর্থ হয়। হয় সেগুলো এতটাই ছোট যে কাস্টমার যখন কোনো সেলাই বা পাথর বসানো খুঁটিয়ে দেখতে জুম করেন, তখন ছবি ঘোলা হয়ে যায়। নয়তো ক্যামেরা থেকে সরাসরি এত বড় সাইজে আসে যে ফোনে পেজ ধীরে লোড হয় — অথচ আপনার বেশিরভাগ ট্র্যাফিক ফোন থেকেই আসে। অ্যাডমিন প্যানেল কোনো সতর্কতা ছাড়াই দুটোই গ্রহণ করে।

বেশিরভাগ স্টোর মালিক যতটা ভাবেন, Shopify তার চেয়ে বেশি কাজ করে দেয় — এটি স্টোরের বিভিন্ন জায়গার জন্য প্রতিটি ইমেজের একাধিক সাইজ তৈরি করে, আর এর CDN ব্রাউজার সাপোর্ট করলে WebP বা AVIF-এর মতো আধুনিক ফরম্যাট বেছে নেয়। কিন্তু এটি অসামঞ্জস্যপূর্ণ অ্যাসপেক্ট রেশিও ঠিক করবে না, কোন ছবি কোন ভ্যারিয়েন্টের তা অনুমান করবে না, বা এলোমেলো কাটআউট সারিয়ে দেবে না। এখানেই আপনার নিয়ন্ত্রণের জায়গা।

শুরু করুন 2048 x 2048-এ, এখানেই থামুন

Shopify-র নিজস্ব নির্দেশনা অনুযায়ী, স্কয়ার প্রোডাক্ট ইমেজের জন্য সাধারণত 2048 x 2048 px সবচেয়ে ভালো দেখায়। কঠোর সীমা এর চেয়ে অনেক বেশি — একটি প্রোডাক্ট বা কালেকশন ইমেজ 20 MB-এর নিচে হতে হবে, এবং সর্বোচ্চ 5000 x 5000 px বা 25 মেগাপিক্সেল পর্যন্ত যেতে পারে।

এই ঊর্ধ্বসীমাগুলো লক্ষ্য নয়। Dawn থিমে, ইনলাইন প্রোডাক্ট গ্যালারি CDN-এর কাছে কখনোই 1946 px-এর বেশি চওড়া কিছু চায় না, এমনকি জুম লাইটবক্সও 4096 px-এর ওপরে কোনো সাইজের নাম নেয় না। 5000 px মাস্টার ফাইল রাখলে মূলত ধীরগতির আপলোড আর মাঝখানে ধীরগতির এডিট ছাড়া তেমন কিছুই পাবেন না। মূল গ্যালারির জন্য 2048 px স্কয়ারেই আটকে থাকুন। সাপোর্টেড আপলোড ফরম্যাটের মধ্যে আছে PNG, JPEG আর WebP, তাই Shopify-কে 6 MB-র TIFF না দিয়ে একটি কম্প্রেসড ফাইল দিন।

স্কয়ার নাকি লম্বা: একটা রেশিও বেছে নিয়ে সেটাতেই থাকুন

কালেকশন গ্রিডেই মিশ্র অ্যাসপেক্ট রেশিও সবচেয়ে চোখে পড়ে, তাই Shopify ফিচার্ড ইমেজজুড়ে একই রেশিও ব্যবহারের পরামর্শ দেয়। Dawn-এর মতো থিমে আপনি প্রতিটি ইমেজের জন্য ফ্রেম অ্যাডাপ্ট করতে পারেন, অথবা সবকিছু একটা নির্দিষ্ট রেশিওতে লক করে দিতে পারেন — আর দুটোই অসামঞ্জস্যতাকে শাস্তি দেয়: অ্যাডাপ্ট করলে গ্রিড এলোমেলো দেখায়, লক করলে বোতলের উপরের অংশ কেটে যায় বা আংটির চারপাশে ফাঁকা জায়গা থেকে যায়।

তাই একবারই সিদ্ধান্ত নিন। স্কয়ার (1:1) সবচেয়ে নিরাপদ ডিফল্ট, আর সরু স্ক্রিনেও ভালোভাবে রিফ্লো করে। 4:5 বা 2:3-এর মতো পোর্ট্রেট রেশিও পোশাক আর লম্বা বোতলের জন্য উপযুক্ত, কারণ এগুলো মোবাইলে বেশি ভার্টিক্যাল জায়গা পূরণ করে। যা করা যাবে না তা হলো — একই কালেকশনে দুটো একসাথে চালানো।

এটা নিশ্চিত করতে প্রোডাক্টের কাটআউট বানিয়ে নিজেই ফ্রেম নতুন করে তৈরি করুন। remover.bg-এ একটা ছবি আপলোড করুন, ব্যাকগ্রাউন্ড সরান, আর বাকি সব লিস্টিংয়ের মতোই একই সলিড সাদা বা ব্র্যান্ড কালার দিয়ে সেটা প্রতিস্থাপন করুন। এরপর আপনি যে এক্সপোর্ট টুল ব্যবহার করেন তা দিয়ে ফলাফলকে আপনার বেছে নেওয়া ফ্রেমে রিসাইজ করুন, যাতে হাতে ধরা একটা মগ আর একটা ফুল-লেংথ কোট একই মাত্রায় আসে। একই কাটআউট Amazon-এর সাদা ব্যাকগ্রাউন্ড গাইডে থাকা কড়া মার্কেটপ্লেস নিয়মেও কাজে লাগে, অথবা আপনি সেটা স্বচ্ছ রেখে পরে কম্পোজিট করতে পারেন — দেখুন কখন স্বচ্ছ PNG সঠিক আউটপুট।

Shopify-র CDN রিসাইজ করে, কিন্তু আপনার সোর্স ঠিক করতে পারে না

থিমগুলো Liquid-এর image_url আর image_tag ফিল্টারের মাধ্যমে ইমেজ রিকোয়েস্ট করে, যা একটা srcset তৈরি করে, যাতে CDN প্রতিটি ডিভাইসের জন্য সঠিক সাইজ ও সঠিক ফরম্যাটের ফাইল সার্ভ করতে পারে। এই কারণেই ভালোভাবে বানানো থিম কখনোই আপনার 2048 px ফাইল 390 px ফোনে পাঠায় না।

দুটো জিনিস এটি কভার করে না। আপলোডের সময় ফরম্যাট বাছাই তখনও গুরুত্বপূর্ণ: WebP এক্সপোর্ট করলে CDN-এ পৌঁছানোর আগেই ফাইল ছোট থাকে, আর Shopify কোনো রূপান্তর ছাড়াই WebP গ্রহণ করে — ঠিক যেভাবে remover.bg শুরু থেকে শেষ পর্যন্ত WebP হ্যান্ডেল করে। আর কয়েকশো SKU-এর জন্য কোনো ড্র্যাগ-আ-ফোল্ডার শর্টকাট নেই; সেই কাজ একটা স্ক্রিপ্টের — ব্যাকগ্রাউন্ড রিমুভাল API ব্যবহার করে, আপনার CSV ইমপোর্টের পাশাপাশি চালানো।

জুম তখনই কাজে লাগে যখন পিক্সেল যথেষ্ট থাকে

Shopify বলে, জুম ঠিকমতো কাজ করার জন্য ইমেজ 800 x 800 px-এর বেশি হতে হবে। Dawn-এ, প্রোডাক্ট টেমপ্লেটের জুম সেটিংয়ে ক্লিক অ্যান্ড হোভার, ওপেন লাইটবক্স, অথবা একেবারেই কোনো জুম না রাখার অপশন থাকে।

যেখানে টেক্সচারই মূল বিক্রয়-বিন্দু, সেখানে জুম চালু রাখুন: নিটওয়্যার, লেদারের দানা, খোদাই, রত্নপাথরের কাটা তল, কাঠ। ফ্ল্যাট গ্রাফিক্স আর ছোট আইকনের ক্ষেত্রে এটা বন্ধ রাখুন, কারণ সেখানে জুম শুধু কম্প্রেশন আর্টিফ্যাক্টই সামনে নিয়ে আসে। কিনারার ব্যাপারেও জুম নির্মম — ফার ট্রিম, আলগা চুল আর সরু স্ট্র্যাপ প্রতিটা ভুল দেখিয়ে দেয়, আর ঠিক এখানেই একটা পরিষ্কার কাটআউট নিজের মূল্য প্রমাণ করে।

ভ্যারিয়েন্ট ইমেজ ও মিডিয়ার ক্রম

প্রতিটি ভ্যারিয়েন্টে ঠিক একটাই ইমেজ অ্যাসাইন করা যায় — শুধু ইমেজ, ভিডিও বা 3D মডেল নয় — আর কাস্টমার সেই অপশন বেছে নিলে এটাই প্রিভিউ হিসেবে দেখা যায়।

প্রতি ভ্যারিয়েন্টে একটা ইমেজ খুব কমই যথেষ্ট হয়, তাই এর চারপাশে গ্যালারি ব্যবহার করুন। প্রোডাক্ট মিডিয়ায় প্রতিটা শট যোগ করুন, সম্পর্কিত শটগুলো একসাথে থাকে এমনভাবে ক্রম সাজান, আর সবচেয়ে শক্তিশালী ইমেজটা প্রথমে রাখুন: প্রথম মিডিয়া আইটেমই প্রোডাক্ট কার্ড আর ডিফল্ট ভিউ নির্ধারণ করে।

অল্ট টেক্সট: 512 ক্যারেক্টার পর্যন্ত অনুমোদিত, 125-ই যথেষ্ট

Shopify অল্ট টেক্সটে সর্বোচ্চ 512 ক্যারেক্টারের সীমা রাখে আর 125 বা তার কম রাখার পরামর্শ দেয়। এটা পাঠযোগ্যতার নির্দেশনা, স্ক্রিন-রিডারের সীমা নয়: লম্বা অল্ট টেক্সট শুনতে ক্লান্তিকর, কারণ শ্রোতা সেটা চোখ বুলিয়ে দ্রুত পড়ে নিতে পারেন না। ফ্রেমটা বর্ণনা করুন, ভ্যারিয়েন্টসহ। "নেভি লিনেন শার্ট, সামনের দিক থেকে, বোতাম লাগানো" এটা "শার্ট"-এর চেয়ে ভালো। "ছবি হলো" জাতীয় কথা আর কিওয়ার্ড তালিকা এড়িয়ে চলুন। প্রোডাক্ট ধরে ধরে না করে, CSV আপলোডের মাধ্যমে অল্ট টেক্সট বাল্কে এডিট করা যায়।

আপলোডের আগে সংক্ষিপ্ত চেকলিস্ট

Shopify-তে একটা ব্যাচ আপলোড করার আগে: পোর্ট্রেট বেছে না নিলে 2048 px স্কয়ারে এক্সপোর্ট করুন, 20 MB সীমার অনেক নিচে থাকুন, পুরো কালেকশনজুড়ে একই ব্যাকগ্রাউন্ড ট্রিটমেন্ট ব্যবহার করুন, প্রতি ভ্যারিয়েন্টে একটা করে ইমেজ অ্যাসাইন করে তার চারপাশে গ্যালারি সাজান, আর অল্ট টেক্সট 125 ক্যারেক্টারের নিচে রাখুন। এর কোনোটাই চটকদার নয়, কিন্তু ভুল করা মাত্র পুরো কালেকশন পেজেই তা ধরা পড়ে।