Shopify Image Sizes ও ৫০০ KB লিমিট
Shopify প্রতি ইমেজে 20 MB পর্যন্ত অনুমতি দেয়। এটি সর্বোচ্চ সীমা, লক্ষ্য নয়। আপনার স্টোরফ্রন্টের জন্য আসলে কোন সাইজটি প্রয়োজন তা এখানে দেওয়া হলো।
আপনার Shopify মাস্টার ইমেজ হিসেবে 2048 by 2048 pixels ব্যবহার করুন এবং প্রতিটি ডেলিভার করা ফাইল 500 KB এর নিচে রাখুন। Shopify 20 MB এবং 4472 pixels স্কয়ার পর্যন্ত ইমেজের অনুমতি দেয়, তবে এই সংখ্যাগুলো প্ল্যাটফর্মটি কী সহ্য করতে পারে তা নির্দেশ করে, একটি দ্রুত স্টোরফ্রন্টের কী প্রয়োজন তা নয়।
20 MB সংখ্যাটি বেশিরভাগ গাইডে উল্লেখ করা হয়, এবং এটিকে ভিত্তি করে ডিজাইন করা ভুল। Shopify কিসের অনুমতি দেয় এবং Shopify কিসের জন্য পুরস্কৃত করে তা সম্পূর্ণ ভিন্ন বিষয়। একটি প্রোডাক্ট পেজে প্রতিটি 3 MB সাইজের 8টি ইমেজ থাকলে সেটি একটি 24 MB এর পেজ হয়ে দাঁড়ায়, এবং মোবাইল ক্রেতারা এটি লোড হওয়া শেষ হওয়ার আগেই পেজ ছেড়ে চলে যান।
প্লেসমেন্ট অনুযায়ী Shopify ইমেজের সাইজ
প্রোডাক্ট ইমেজগুলো 2048 pixels এ স্কয়ার হওয়া উচিত, যেখানে ব্যানার, কালেকশন টাইলস এবং লোগো প্রতিটির নিজস্ব ডাইমেনশন প্রয়োজন। সব জায়গায় একটি সাইজ ব্যবহার করলে ব্যানার প্রসারিত হয়ে যায় এবং কালেকশন ইমেজগুলো কেটে যায়।
| Placement | Recommended pixels | Target file size | Notes |
|---|---|---|---|
| Product photo | 2048 x 2048 | Under 300 KB | স্কয়ার সাইজ গ্রিডকে পরিপাটি রাখে |
| Collection tile | 1200 x 1200 | Under 200 KB | বেশিরভাগ থিম দ্বারা স্কয়ারে ক্রপ করা হয় |
| Homepage banner | 1920 x 1080 | Under 400 KB | সবচেয়ে বড় কন্টেন্টফুল পেইন্ট উপাদান |
| Slideshow image | 1920 x 800 | Under 350 KB | মোবাইলে পরীক্ষা করুন, চারপাশ কেটে যেতে পারে |
| Logo | 500 x 250 | Under 50 KB | স্বচ্ছতার প্রয়োজন হলে PNG ব্যবহার করুন |
| Favicon | 96 x 96 | Under 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 by 2048 pixels এর একটি স্কয়ার মাস্টার এক্সপোর্ট করুন।
- যেকোনো ব্যানার বা লাইফস্টাইল ইমেজের সাইজ তার আসল ডিসপ্লে উইডথ অনুযায়ী পরিবর্তন করুন, হাই-ডেনসিটি স্ক্রিনের জন্য এটি দ্বিগুণ করুন।
- ফটোগ্রাফগুলোকে WebP তে রূপান্তর করুন, অথবা আপনার কাজের সুবিধার জন্য JPG রাখতে পারেন, কারণ Shopify যেকোনোভাবেই রূপান্তর করে নেয়।
- একটি নির্দিষ্ট সাইজ লক্ষ্য করে কম্প্রেস করুন, প্রোডাক্ট ফটোর জন্য 300 KB এবং ব্যানারের জন্য 400 KB ব্যবহার করুন।
- প্রোডাক্ট কোড এবং ভিউ অনুযায়ী ফাইলের নাম দিন যাতে একটি বাল্ক CSV ইম্পোর্ট ইমেজগুলোকে সঠিক প্রোডাক্টের সাথে ম্যাপ করতে পারে।
- আপলোড করুন এবং শুধুমাত্র ডেস্কটপ প্রিভিউতে না দেখে ফোনে প্রোডাক্ট পেজটি পরীক্ষা করুন।
Shopify-এ WebP
Shopify বছরের পর বছর ধরে নেটিভভাবে WebP সরবরাহ করে আসছে এবং সমর্থনকারী ব্রাউজারগুলোর জন্য আপলোড করা JPG এবং PNG ফাইলগুলোকে স্বয়ংক্রিয়ভাবে রূপান্তর করে। সরাসরি WebP আপলোড করা গ্রহণযোগ্য এবং এটি প্ল্যাটফর্মের ওপর ছেড়ে দেওয়ার পরিবর্তে আপনাকে কম্প্রেশনের ওপর নিয়ন্ত্রণ দেয়।
WebP ফাইল JPG এর মতো একই ভিজ্যুয়াল কোয়ালিটি বজায় রেখে 25 থেকে 35 শতাংশ ছোট সাইজ প্রদান করে, যা 8টি ফটো বিশিষ্ট একটি পেজের জন্য অত্যন্ত মূল্যবান। একটি বিষয় এড়িয়ে চলতে হবে তা হলো এমন জায়গায় WebP আপলোড করা যেখানে ফাইলটি পরবর্তীতে কোনো সরবরাহকারী দ্বারা ডাউনলোড করা হবে বা প্রিন্ট শপে পাঠানো হবে, কারণ সেই জায়গাগুলোতে এখনও JPG প্রত্যাশা করা হয়।
একটি ধীরগতির প্রোডাক্ট পেজ ঠিক করা
পেজের সবচেয়ে বড় ইমেজটি দিয়ে শুরু করুন, কারণ সাধারণত একটি বড় ফাইলের কারণেই বেশিরভাগ বিলম্ব ঘটে। একটি Shopify স্টোরফ্রন্টে এটি সাধারণত হোমপেজ ব্যানার বা প্রথম প্রোডাক্ট ফটো হয়ে থাকে।
- কম্প্রেস করার আগে রিসাইজ করুন। একটি 1920 pixel স্লটে 4000 pixel এর ব্যানার ব্যবহার করলে এর 75 শতাংশ ডেটা অপচয় হয়।
- প্রথম স্ক্রিনে (above the fold) ইমেজের সংখ্যা কমিয়ে দিন। একসাথে 12টি ইমেজের গ্যালারি লোড হলে অন্য সবকিছু বিলম্বিত হয়।
- লেজি লোডিং (lazy loading) চালু আছে কিনা তা পরীক্ষা করুন স্ক্রিনের নিচের দিকের (below the fold) ইমেজগুলোর জন্য, যা বেশিরভাগ আধুনিক থিম ডিফল্টভাবেই পরিচালনা করে।
- অ্যানিমেটেড GIF ফাইলের পরিবর্তে ভিডিও ব্যবহার করুন, কারণ একটি ছোট GIF প্রায়শই পেজের বাকি অংশের চেয়ে বেশি ভারী হয়।
- অ্যাপগুলো অডিট করুন। রিভিউ উইজেট, পপআপ এবং ট্রাস্ট ব্যাজগুলো প্রায়শই তাদের নিজস্ব ইমেজ এবং স্ক্রিপ্ট লোড করে।
Alt টেক্সট এবং ইমেজ ফাইলের নাম
স্ক্রিন রিডার ব্যবহারকারী ক্রেতাদের জন্য প্রোডাক্টের বর্ণনা দিয়ে alt টেক্সট লিখুন, এবং ক্যামেরার নামের পরিবর্তে প্রোডাক্টের নাম অনুযায়ী ফাইলের নাম দিন। IMG_4821.jpg নামের একটি ফাইল সার্চ ইঞ্জিন এবং ক্রেতাদের কিছুই বোঝায় না।
navy-linen-shirt-front.jpg এর মতো একটি প্যাটার্ন ব্যবহার করুন, যা বাল্ক ইম্পোর্টে সহজে পড়া যায়, ফোল্ডারে সঠিকভাবে সাজানো থাকে এবং সার্চ রেজাল্টে ইমেজটিকে বর্ণনা করে। Alt টেক্সটে প্রোডাক্টের টাইটেল হুবহু পুনরাবৃত্তি না করে ফটোতে কী দেখা যাচ্ছে তা বলা উচিত, যার মধ্যে রঙ, উপাদান এবং ভিউ অন্তর্ভুক্ত থাকবে। উভয় ফিল্ডের জন্য প্রোডাক্ট প্রতি মাত্র কয়েক সেকেন্ড সময় লাগে এবং এটি ইমেজ সার্চে স্টোরের উপস্থিতি উন্নত করে।
পরিবর্তনগুলো কার্যকর করার আগে পরীক্ষা করা
প্রথমে 5টি প্রোডাক্ট প্রসেস করুন, সেগুলো পাবলিশ করুন এবং সম্পূর্ণ ক্যাটালগ চালানোর আগে একটি আসল ফোনে পেজগুলো পরীক্ষা করুন। 500টি প্রোডাক্টে একটি ভুল সেটিংস প্রয়োগ করার পর তা সংশোধন করতে যে সময় লাগে, তা প্রতিরোধ করা অনেক সহজ।
টেস্ট প্রোডাক্টগুলোতে 3টি জিনিস পরীক্ষা করুন। ফুল জুমে ইমেজগুলো শার্প দেখাচ্ছে কিনা তা নিশ্চিত করুন, কারণ ক্রেতারা পোশাক এবং জুয়েলারির ক্ষেত্রে জুম ফিচারটি প্রচুর ব্যবহার করেন। কালেকশন গ্রিডে সামঞ্জস্যপূর্ণ ক্রপ দেখাচ্ছে কিনা তা নিশ্চিত করুন। পেজটি অফিসের ব্রডব্যান্ডের পরিবর্তে মোবাইল ডেটাতে দ্রুত লোড হচ্ছে কিনা তা নিশ্চিত করুন। কেবল তখনই অন্য সব কিছুতে একই সেটিংস প্রয়োগ করুন।
ইমেজ অ্যাপস বনাম আপলোডের আগে নিজে করা
কম্প্রেশন অ্যাপগুলো এমন একটি সমস্যা সমাধানের জন্য মাসিক চার্জ নেয় যা আপনি আপলোড করার আগেই একবারেই সমাধান করতে পারেন। অ্যাপগুলো তখন দরকারী যখন একটি স্টোরে ক্রমাগত অনেক মানুষের কাছ থেকে নতুন ইমেজ আসে এবং কী আপলোড হচ্ছে তা নিয়ন্ত্রণ করার কেউ থাকে না।
একটি স্থিতিশীল ক্যাটালগ এবং ইমেজ পরিচালনার জন্য একজন নির্দিষ্ট ব্যক্তি থাকলে কোনো পুনরাবৃত্তিমূলক ফির প্রয়োজন নেই। লাইব্রেরিটি একবার কম্প্রেস করা এবং নতুন ফটো আসার সাথে সাথে কম্প্রেস করা একই ফলাফল দেয়। ক্যাটালগ যখন আপনার হাতে প্রসেস করার ক্ষমতার বাইরে চলে যায়, অথবা যখন একাধিক কর্মী কোনো স্পেসিফিকেশন না মেনে ইমেজ আপলোড করেন, তখন বিষয়টি পুনরায় বিবেচনা করুন।
সাধারণ Shopify ইমেজ ভুলসমূহ
সরাসরি ক্যামেরা থেকে আপলোড করা সবচেয়ে ব্যয়বহুল ভুল, কারণ একটি 24 megapixel ফটোতে একটি স্টোরফ্রন্ট যা প্রদর্শন করতে পারে তার চেয়ে 10 গুণ বেশি ডেটা থাকে। প্ল্যাটফর্মটি ফাইলটি গ্রহণ করে, এবং পেজটিকে এর মূল্য দিতে হয়।
অন্য দুটি ভুল নিয়মিত দেখা যায়। একটি কালেকশনে বিভিন্ন আকারের ইমেজের মিশ্রণ একটি অগোছালো গ্রিড তৈরি করে, কারণ থিমগুলো স্কয়ারে ক্রপ করে এবং একটি পোর্ট্রেট ফটোর ওপর ও নিচের অংশ কেটে যায়। প্রোডাক্ট ফটোর জন্য PNG ব্যবহার করলে কোনো দৃশ্যমান সুবিধা ছাড়াই ফাইলের সাইজ 3 থেকে 5 গুণ বেড়ে যায়, কারণ PNG প্রতিটি পিক্সেল হুবহু সংরক্ষণ করে এবং একটি ফটোতে ব্যবহার করার মতো কোনো ফ্ল্যাট এরিয়া থাকে can।
একটি সামঞ্জস্যপূর্ণ ক্যাটালগ বজায় রাখা
সম্পূর্ণ ক্যাটালগটি এক ব্যাচে প্রসেস করুন যাতে প্রতিটি প্রোডাক্ট ফটো একই ডাইমেনশন, কম্প্রেশন এবং ফ্রেমিং শেয়ার করে। ক্রেতারা যখন প্রোডাক্টগুলোর তুলনা করেন, তখন তারা অসঙ্গতিগুলো লক্ষ্য করেন, এমনকি তারা সেটি সুনির্দিষ্টভাবে বলতে না পারলেও।
সামঞ্জস্যতা কালেকশন গ্রিডকেও সাহায্য করে, যেখানে একই আকৃতি এবং উজ্জ্বলতার ইমেজগুলো একটি এলোমেলো সংগ্রহের পরিবর্তে একটি পরিকল্পিত পেজ হিসেবে প্রকাশ পায়। ডাইমেনশন এবং সাইজের লক্ষ্য একবার নির্ধারণ করুন, তারপর প্রতিটি প্রোডাক্ট আলাদাভাবে সামঞ্জস্য করার পরিবর্তে প্রতিটি ফাইলে সেগুলো প্রয়োগ করুন।
একবারে একটি ক্যাটালগ প্রসেস করা
একসাথে 500টি পর্যন্ত ইমেজ ড্রপ করুন, অথবা আপনার ফটোগ্রাফারের কাছ থেকে সরাসরি একটি ZIP আর্কাইভ ড্রাগ করুন, এবং প্রতিটি ফাইল একই স্পেসিফিকেশনে রিসাইজ এবং কম্প্রেস হয়ে ফিরে আসবে। ডেস্কটপ সফটওয়্যারে যে ক্যাটালগটি তৈরি করতে একটি বিকেল লেগে যেত, তা মাত্র কয়েক মিনিটে শেষ হয়ে যায়।
সবকিছু আপনার নিজস্ব প্রসেসরে আপনার ব্রাউজারের ভেতরে চলে, তাই অপ্রকাশিত প্রোডাক্ট, মৌসুমী ক্যাম্পেইনের শট এবং সরবরাহকারীর ফটোগ্রাফ কখনোই কোনো সার্ভারে পৌঁছায় না। কোনো স্টোর যদি গোপনীয়তার অধীনে লঞ্চের প্রস্তুতি নেয়, তবে ফাইলগুলো স্থানীয়ভাবে রাখা একটি নিয়ন্ত্রিত ঘোষণা এবং ফাঁসের মধ্যে পার্থক্য তৈরি করে, এবং এর জন্য অতিরিক্ত কোনো খরচ হয় না।