WinningSeller
মার্কেটিং ও ল্যান্ডিং পেজ১২ মিনিটে পড়া যায়

ব্যানার মোবাইলে কেটে যায়? ওয়েবসাইট ব্যানার সাইজ আর ছবির সঠিক মাপ

কম্পিউটারে ব্যানার সুন্দর, ফোনে খুললে দুই পাশ কাটা আর অফারের লেখা উধাও? কারণটা মাপে না, আকারে। ব্যানার কেন কাটে, কম্পিউটার আর ফোনের জন্য কোন মাপ দেবেন, লেখা কোথায় রাখবেন, প্রোডাক্টের ছবি কেন বর্গাকার, আর ছবি কত KB হলে পেজ দ্রুত খোলে, এক টেবিলে সব মাপসহ।

ব্যানার মোবাইলে কেটে যায়? ওয়েবসাইট ব্যানার সাইজ আর ছবির সঠিক মাপ
এই লেখায় যা আছে
  1. ব্যানার মোবাইলে কেটে যায় কেন
    1. কখন ব্যানার না বানানোই ভালো
  2. ওয়েবসাইট ব্যানার সাইজ কত, কম্পিউটার আর মোবাইলে আলাদা
  3. লেখা কোথায় রাখবেন, সেফ জোন
  4. প্রোডাক্ট ছবির সাইজ, আর বর্গাকার কেন
  5. ছবি কত KB, ভারী ব্যানারে কত ভিজিটর হারান (উদাহরণ)
  6. Canva-তে সঠিক মাপে ব্যানার বানানো
  7. এক নজরে সব মাপের টেবিল
  8. আজই করে ফেলুন

ওয়েবসাইট ব্যানার সাইজ কত হবে, তার এক উত্তর নেই, কারণ প্রতিটা থিম ব্যানারের জন্য আলাদা আকারের একটা বক্স রাখে, আর ছবি সেই বক্স ভরাতে গিয়ে বাড়তি অংশ কেটে ফেলে। কম্পিউটারের বক্স চওড়া, ফোনের বক্স সরু আর লম্বা। এজন্য ১৯২০ × ৬০০ পিক্সেলের চওড়া ব্যানার কম্পিউটারে সুন্দর দেখায়, কিন্তু ফোনে তার দুই পাশ কেটে মাঝখানের এক টুকরো থাকে। সমাধান তিনটা। আপনার থিমের বক্স যে আকারের, ঠিক সেই আকারে ছবি বানান। দাম আর অফারের লেখা ছবির ভেতরে না দিয়ে পেজের আসল লেখা হিসেবে দিন। আর প্রোডাক্টের ছবি দিন বর্গাকার, ১২০০ থেকে ১৪৪০ পিক্সেল চওড়া, ২০০ KB-র নিচে।

শুক্রবার রাতে বসে Canva-তে একটা ঈদের ব্যানার বানালেন। বাঁ কোণায় বড় করে "ঈদ অফার ২০% ছাড়", ডান দিকে তিনটা পাঞ্জাবি। ল্যাপটপে দোকান খুলে দেখলেন, দারুণ। পরদিন সকালে অ্যাড চালু করার আগে ফোনে খুলতেই বুক ধক করে উঠল। ব্যানারে শুধু মাঝখানের একটা পাঞ্জাবি, অফারের লেখার অর্ধেক নেই। অ্যাডের টাকা দিয়ে যে মানুষ আনবেন, তিনি এসে অফারটাই দেখবেন না। নিচের নিয়মগুলো এই সকালটা যেন আর না আসে, সেজন্য।

ব্যানার মোবাইলে কেটে যায় কেন

ব্যানারের ছবি পেজে যে জায়গায় বসে, সেটা একটা নির্দিষ্ট আকারের বক্স। প্রায় সব থিম ছবিকে বলে, "বক্সটা পুরো ভরে দাও, বাড়তি যা থাকে কেটে ফেলো।" এতে বক্সে কখনো ফাঁকা জায়গা থাকে না, দেখতে পরিষ্কার লাগে। কিন্তু কোন অংশ কাটা পড়বে, সেটা নির্ভর করে বক্সের আকার আর ছবির আকারের তফাতের ওপর।

একটা হিসাবে দেখুন, যাতে ব্যাপারটা চোখে বসে যায়। ধরুন ব্যানারের ছবি ১৯২০ × ৬০০ পিক্সেল, মানে চওড়া উচ্চতার তিন গুণের বেশি। ফোনে ব্যানারের বক্সটা ধরুন ৩৯০ পিক্সেল চওড়া আর ৪৪০ পিক্সেল উঁচু, মানে প্রায় চারকোনা। বক্সের উচ্চতা ভরাতে ছবিটাকে ৬০০ থেকে ৪৪০ পিক্সেলে নামাতে হয়, তাতে চওড়া হয় ১৯২০ × ৪৪০ ÷ ৬০০ = ১,৪০৮ পিক্সেল। বক্স চওড়ায় ৩৯০। মানে ১,৪০৮-এর মধ্যে মাঝখানের ৩৯০ পিক্সেল দেখা যায়, ছবির চার ভাগের এক ভাগের একটু বেশি। বাকি প্রায় তিন ভাগ দুই পাশ থেকে কাটা পড়ে, আর আপনার বাঁ কোণার অফারের লেখা থাকে সেই কাটা অংশেই।

একজন তরুণ সেলার টেবিলে বসে এক হাতে ল্যাপটপে আর অন্য হাতে ফোনে একই দোকান খুলে পাশাপাশি দেখছেন, ল্যাপটপে চওড়া ব্যানার পুরোটা দেখা যাচ্ছে, ফোনে শুধু মাঝখানের একটা অংশ
একই দোকান, একই ব্যানার। ল্যাপটপে পুরোটা, ফোনে শুধু মাঝখানটা

বাংলাদেশে বেশিরভাগ কাস্টমার দোকানে আসেন ফেসবুকের অ্যাড বা পোস্ট থেকে, ফোনে। তাই ব্যানার আগে ফোনের জন্য ঠিক করুন, কম্পিউটারের কথা পরে ভাবুন। উল্টোটা করলে, মানে ল্যাপটপে বানিয়ে ল্যাপটপেই দেখে সন্তুষ্ট হলে, আপনার বেশিরভাগ কাস্টমার যা দেখছেন সেটা আপনি কখনো দেখবেন না।

কখন ব্যানার না বানানোই ভালো

দোকানে যদি একটা বা দুইটা প্রোডাক্ট থাকে, আলাদা করে সাজানো ব্যানারের দরকার নেই। প্রোডাক্টের সবচেয়ে ভালো ছবিটাই প্রথম স্ক্রিনে বড় করে দিন, পাশে আসল লেখায় নাম, দাম আর অর্ডারের বাটন। কাস্টমার যে জিনিস কিনতে এসেছেন, সেটাই প্রথমে দেখেন। আর পাঁচটা ব্যানার ঘুরে ঘুরে দেখানোর চেয়ে একটা পরিষ্কার ব্যানার অনেক ভালো কাজ করে। ঘুরতে থাকা ব্যানারের দ্বিতীয়-তৃতীয়টা প্রায় কেউ দেখেন না, অথচ সবগুলোই পেজ ভারী করে।

ওয়েবসাইট ব্যানার সাইজ কত, কম্পিউটার আর মোবাইলে আলাদা

মাপ ঠিক করার আগে নিজের থিমে ব্যানারের বক্সটা কোন আকারের, সেটা জেনে নিন। থিমের নিজের নির্দেশনা থাকলে সেটা মানুন। না থাকলে নিচের সাধারণ নিয়ম কাজে লাগবে।

যেসব থিমে ব্যানার পুরো স্ক্রিন জুড়ে চওড়া স্ট্রিপের মতো, সেখানে কম্পিউটারের জন্য সাধারণত ১৯২০ পিক্সেল চওড়া আর ৬০০ থেকে ৮০০ পিক্সেল উঁচু ছবি চলে। এমন থিম প্রায় সবসময় ফোনের জন্য আলাদা ছবি নেওয়ার জায়গা রাখে। সেখানে খাড়া ছবি দিন, যেমন ১০৮০ × ১৩৫০ (৪:৫) বা চারকোনা ১০৮০ × ১০৮০। ফোনের ছবিটা আলাদা করে বানাবেন, কম্পিউটারেরটা কেটে না। লেখা আর প্রোডাক্ট নতুন করে খাড়া ফ্রেমে সাজাবেন।

এবার WinningSeller-এর কথা, ১২ অক্টোবর ২০২৬-এ দোকানের ডিজাইন যেমন আছে। হোম পেজের "বড় ব্যানার" সেকশনের ডিজাইন চার রকম। "ছবি ডানে", "ছবি বামে" আর "মাঝখানে লেখা" ডিজাইনে ছবি বসে একটা ৪:৩ বক্সে, আর বক্সটা কম্পিউটারে আর ফোনে একই আকারের থাকে। তাই এই তিন ডিজাইনে ১৪৪০ × ১০৮০ পিক্সেলের একটা ৪:৩ ছবি দিলে কোনো স্ক্রিনেই কাটে না। লেখা থাকে ছবির পাশে বা ওপরে, আসল লেখা হিসেবে। সেখানে "মোবাইলের জন্য আলাদা ছবি" নামে একটা ঘরও আছে, না দিলেও চলে। দিলে ফোনে সেই ছবিটা নিজের আকারেই দেখায়, কাটে না, তাই ফোনের জন্য একটা খাড়া ৪:৫ ছবি দিতে পারেন।

চতুর্থ ডিজাইন "ছবি পুরো ব্যাকগ্রাউন্ডে"। এখানে ছবিটা পুরো সেকশনের পেছনে বসে, ওপরে একটা হালকা কালো ছায়া আর তার ওপর আপনার লেখা ও বাটন। ফোনে এই সেকশন অন্তত ৪৪০ পিক্সেল উঁচু, তাই ওপরের হিসাবের মতোই চওড়া ছবির দুই পাশ কাটে। এই ডিজাইনে ১৪৪০ × ৮১০ ধরনের একটা ছবি দিন, যার আসল জিনিসটা একদম মাঝখানে, আর ছবির ভেতরে কোনো লেখা নেই। "অফার ব্যানার" সেকশনের ব্যাকগ্রাউন্ডের ছবিও একইভাবে কাজ করে।

একটা চওড়া ব্যানারের নকশা, পুরো ব্যানারের ওপর ফোনের পর্দার আকারের একটা লাল দাগের বক্স মাঝখানে বসানো, বক্সের বাইরের দুই পাশ ধূসর করে ঢাকা, বাঁ কোণার অফারের লেখা ধূসর অংশে পড়েছে
লাল বক্সের ভেতরেরটুকুই ফোনে দেখা যায়। বাঁ কোণার অফার সেখানে নেই

লেখা কোথায় রাখবেন, সেফ জোন

সেফ জোন মানে ছবির সেই অংশ, যেটা কোনো স্ক্রিনেই কাটা পড়ে না। জরুরি কিছু, যেমন প্রোডাক্টের মূল অংশ বা লোগো, থাকতে হবে এর ভেতরে।

সবচেয়ে ভালো নিয়মটা হলো ছবির ভেতরে দাম আর অফারের লেখা একদমই না দেওয়া। লেখা দিন পেজের আসল লেখা হিসেবে, ছবির পাশে বা ওপরে। এর কয়েকটা লাভ আছে। আসল লেখা যে কোনো স্ক্রিনে নিজে থেকে লাইন ভেঙে সাজিয়ে নেয়, তাই কখনো কাটে না। ফোনে সেটা পড়ার মতো বড় থাকে, অথচ ছবির ভেতরের লেখা ছবির সাথে ছোট হয়ে যায়। আর অফার বদলালে শুধু লেখাটা বদলালেই হয়, Canva খুলে নতুন ছবি বানাতে হয় না। পেজের লেখা ছবির চেয়ে অনেক আগে চোখে আসে, তাই প্রথম স্ক্রিনও তাড়াতাড়ি তৈরি হয়।

WinningSeller-এ ব্যানারের হেডিং, ছোট লেখা আর বাটনের লেখা আসল লেখা হিসেবেই বসে, আর প্রতিটা লেখা ও বাটনের রং আর সাইজ নিজে বদলানো যায়। তাই "ঈদ অফার ২০% ছাড়" কথাটা ছবিতে না লিখে হেডিংয়ে লিখুন, রংটা ব্র্যান্ডের সাথে মিলিয়ে দিন। ডিজাইনের বাকি সুবিধাগুলো ফিচারের পেজে এক জায়গায় আছে।

একটা চারকোনা ছবির নকশা, মাঝখানের অর্ধেক অংশ সবুজ রঙে ঘেরা আর তার ভেতরে একটা পাঞ্জাবির ছবি, বাইরের অংশ হালকা লাল রঙে দাগানো, পাশে ছবির বাইরে আলাদা করে লেখা হেডিং আর একটা বাটন
জিনিসটা সবুজ অংশে, লেখা ছবির বাইরে। তাহলে কোনো স্ক্রিনেই কিছু কাটে না

তবু কোনো কারণে লেখা ছবির ভেতরেই দিতে হলে, যেমন কোনো প্ল্যাটফর্ম আসল লেখার জায়গা না রাখলে, কয়েকটা নিয়ম মানুন। লেখা রাখুন ছবির মাঝখানে, দুই পাশের কিনারা থেকে দূরে। "ছবি পুরো ব্যাকগ্রাউন্ডে" ধরনের ডিজাইনে ১৪৪০ × ৮১০ ছবি দিলে ফোনে চওড়ার মাঝখানের মোটামুটি অর্ধেকটা দেখা যায়, ৩৯০ পিক্সেল চওড়া আর ৪৪০ পিক্সেল উঁচু বক্স ধরে। লেখা বেশি হলে বক্স আরও উঁচু হয়, তখন দেখা যায় আরও কম। তাই মাঝখানের অর্ধেকের বাইরে কিছু রাখবেন না। এক লাইনে চার-পাঁচটা শব্দের বেশি দেবেন না, আর অক্ষর এত বড় রাখুন যেন ছবিটা ফোনের চওড়ায় ছোট হয়ে এলেও পড়া যায়।

কোন ডিজাইনে আপনার ব্যানার ফোনে কেমন দেখায়, সেটা বোঝার সবচেয়ে সোজা উপায় হলো একবার বসিয়ে নিজের ফোনে খুলে দেখা।

প্রোডাক্ট ছবির সাইজ, আর বর্গাকার কেন

ব্যানারের চেয়ে প্রোডাক্টের ছবি অনেক বেশি জায়গায় বসে। দোকানের লিস্টে কার্ডে, প্রোডাক্টের পেজে, কার্টে আর অর্ডারে। বেশিরভাগ থিমে প্রোডাক্ট কার্ডের ছবির বক্স বর্গাকার, কারণ কার্ডগুলো সারি করে সাজালে বর্গাকার বক্সেই সারি সবচেয়ে সমান দেখায়। WinningSeller-এও প্রোডাক্ট কার্ডের ছবির বক্স বর্গাকার, একটা কার্ড ডিজাইনে শুধু ৪:৫। বেশিরভাগ প্রোডাক্ট ডিজাইনে পেজের বড় ছবির জায়গাটাও বর্গাকার।

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

তাই প্রোডাক্টের ছবি তুলুন বা কাটুন বর্গাকারে, ১২০০ × ১২০০ থেকে ১৪৪০ × ১৪৪০ পিক্সেলের মধ্যে। প্রোডাক্টটা যেন ছবির প্রায় আশি ভাগ জুড়ে থাকে, চারপাশে সামান্য জায়গা রেখে। ছোট জিনিস বড় ফ্রেমের মাঝে এক কোণে পড়ে থাকলে কার্ডে সেটা একটা দাগের মতো দেখায়। আর একটা দোকানের সব প্রোডাক্টের পেছনের রং এক রাখুন, যেমন সব সাদা বা সব হালকা ধূসর। লিস্টে পাশাপাশি এলে দোকানটা গোছানো দেখায়। ছবি কীভাবে তুলবেন, আলো আর পেছনের কাপড় কেমন হবে, সেটা মোবাইল দিয়ে প্রোডাক্ট ফটোগ্রাফির লেখায় আছে।

দুটো প্রোডাক্ট কার্ডের নকশা পাশাপাশি, বাঁয়েরটায় একটা বর্গাকার ছবিতে জুতা সুন্দরভাবে পুরো বক্স জুড়ে বসানো, ডানেরটায় একটা লম্বা ছবি বক্সে কেটে বসানো আর জুতার সামনের অংশ কাটা পড়েছে
বাঁয়ে বর্গাকার ছবি, ডানে লম্বা ছবি কেটে বসানো। কাস্টমার কোনটা দেখে কিনবেন?

ক্যাটাগরির ছোট টাইলগুলোর বেলাতেও একই কথা। WinningSeller-এর ক্যাটাগরির টাইলও বর্গাকার, তাই ৮০০ × ৮০০ পিক্সেলের একটা বর্গাকার ছবিই সেখানে যথেষ্ট।

ছবি কত KB, ভারী ব্যানারে কত ভিজিটর হারান (উদাহরণ)

মাপ ঠিক হলো, এবার ওজন। ছবির পিক্সেল আর ছবির ফাইলের ওজন আলাদা জিনিস। একই ১৪৪০ পিক্সেলের ছবি ১৫০ KB-ও হতে পারে, আবার ৫ MB-ও হতে পারে। কাস্টমারের ফোনকে পুরো ফাইলটা নামাতে হয়, তারপর দেখাতে হয়।

Google Search Central-এর ছবির গাইডটা শেষবার আপডেট হয়েছে ২ মার্চ ২০২৬-এ, আর ২০২৬ সালের অক্টোবরে সেখানে লেখা আছে, একটা পেজের মোট ওজনের সবচেয়ে বড় অংশ সাধারণত ছবি, আর এতে পেজ ধীর আর খরচের হয়। একই গাইডে JPEG, PNG আর WebP-সহ কোন কোন ফরম্যাট চলে, তার লিস্ট আছে। আমার নিজের মাপকাঠি হলো, ব্যানার ৩০০ KB-র নিচে আর প্রোডাক্টের ছবি ২০০ KB-র নিচে রাখার চেষ্টা করুন। এটা Google-এর বা কারও বাঁধা নিয়ম না, ফোনের ডাটায় পেজ তাড়াতাড়ি খোলার একটা কাজের হিসাব।

এবার টাকায় দেখুন। নিচের সব সংখ্যা উদাহরণ, ধরে নেওয়া, কোনো মাপা ফল না। নিজের অ্যাডের হিসাব বসিয়ে মিলিয়ে নিন।

উদাহরণ। ধরুন কাস্টমারের মোবাইল ডাটায় গতি সেকেন্ডে ৫ মেগাবিট। ক্যামেরা থেকে সোজা আসা ৬ MB-র একটা ব্যানার মানে ৬ × ৮ = ৪৮ মেগাবিট, নামতে লাগে ৪৮ ÷ ৫ = প্রায় ১০ সেকেন্ড। একই ব্যানার ২৫০ KB-তে ছোট করলে হয় প্রায় ২ মেগাবিট, নামতে লাগে আধা সেকেন্ডেরও কম। এবার ধরুন অ্যাডে ১,০০০টা লিংক ক্লিক কিনেছেন, প্রতিটা ৬ টাকায়, মোট ৬,০০০ টাকা। দশ সেকেন্ড ফাঁকা স্ক্রিন দেখে যদি দশজনে তিনজন ফিরে যান, তাহলে ৩০০ ক্লিক, মানে ৩০০ × ৬ = ১,৮০০ টাকা কোনো কাজে লাগল না। দশজনে কতজন ফেরেন সেটা দোকান ভেদে আলাদা, কিন্তু দিকটা সবসময় এক। ভারী ছবি মানে কেনা ক্লিকের একটা অংশ দরজা থেকেই ফেরত।

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

অ্যাডে লিংক ক্লিক আর পেজ ভিউয়ের মধ্যে বড় ফাঁক থাকলে তার একটা বড় কারণ এই ধীর প্রথম স্ক্রিন। কীভাবে ফাঁকটা মাপবেন আর স্পিড টেস্ট করবেন, সেটা লিংক ক্লিক বনাম ল্যান্ডিং পেজ ভিউয়ের লেখায় আছে।

WinningSeller-এ একটা কাজ নিজে থেকে হয়, সেটা সৎভাবে বলি। ছবি আপলোড করলে দোকান ৩২০, ৬৪০, ৯৬০ আর ১৪৪০ পিক্সেল চওড়ার কয়েকটা হালকা WebP কপি বানিয়ে রাখে, আর কাস্টমারের ফোন নিজের পর্দার মাপের কপিটা নামায়। মানে ১৪৪০ পিক্সেলের চেয়ে চওড়া ছবি দিলেও কাস্টমার তার চেয়ে বড় কিছু দেখেন না, আর আপনার ৬ MB-র আসল ফাইলটা সোজা কাস্টমারের ফোনে যায় না। আপলোডের সীমা ১০ MB। তবু ছবি নিজে ছোট করে দেওয়া ভালো অভ্যাস। ফেসবুক, অন্য প্ল্যাটফর্ম বা ইমেইলে একই ছবি গেলে সেখানে কেউ আপনার হয়ে ছোট করে দেবে না।

Canva-তে সঠিক মাপে ব্যানার বানানো

ব্যানার বানানোর সবচেয়ে সহজ ফ্রি জায়গা Canva। কাজটা চার ধাপের।

প্রথমে নতুন ডিজাইন খোলার সময় Custom size বাছুন, একক px রাখুন, আর থিমের বক্স অনুযায়ী মাপ লিখুন। WinningSeller-এর ছবি পাশে রাখা ব্যানারের জন্য ১৪৪০ আর ১০৮০। Canva মাঝে মাঝে মেনু এদিক-ওদিক করে, অপশনটা না পেলে সার্চে "custom" লিখে খুঁজুন। পোস্টারের সাইজ আর টেমপ্লেট বাছার পুরো নিয়ম অফার পোস্টার ডিজাইনের লেখায় আছে।

তারপর ছবিটা বসান, আর জিনিসটা মাঝখানে রাখুন। Canva-তে একটা ছবি টেনে মাঝে আনলে একটা রঙিন সোজা দাগ ভেসে ওঠে, সেটাই মাঝখান। লেখা যদি ছবির ভেতরে দিতেই হয়, ওপরের সেফ জোনের নিয়ম মেনে মাঝখানে রাখুন।

ফোনের জন্য আলাদা ছবি লাগলে সেটা আলাদা একটা ডিজাইনে বানান, ১০৮০ × ১৩৫০ মাপে। ফ্রি অ্যাকাউন্টে এক মাপের ডিজাইন আরেক মাপে এক চাপে বদলানোর সুবিধা না-ও পেতে পারেন। তাই প্রথম ডিজাইন থেকে ছবি আর লেখা কপি করে নতুন ডিজাইনে পেস্ট করুন, তারপর খাড়া ফ্রেমে সাজান। শুধু ছোট করে বসালে চলবে না, খাড়া ফ্রেমে জিনিস ওপর-নিচে সাজাতে হয়।

শেষে JPG হিসেবে নামান, PNG না। ফটোর মতো ছবিতে PNG প্রায়ই অনেক ভারী হয়। নামানোর পর ফাইলটা কত KB, দেখে নিন। বেশি হলে Google-এর ফ্রি টুল Squoosh (squoosh.app) ব্রাউজারেই খুলে ছবিটা দিন, কোয়ালিটি ৭৫ থেকে ৮০-এর মধ্যে রেখে নামান। চোখে প্রায় কোনো তফাত দেখবেন না, ওজন কমবে অনেক।

একজন তরুণ ডিজাইনার সোফায় বসে ট্যাবলেটে Canva খুলে একটা চারকোনা ব্যানারের মাঝখানে পাঞ্জাবির ছবি টেনে বসাচ্ছেন, পাশে টেবিলে রাখা ফোনে একই ব্যানারের খাড়া সংস্করণ খোলা
একই ব্যানার, দুই ডিজাইন। ট্যাবলেটে কম্পিউটারের জন্য, ফোনে ফোনের জন্য

এক নজরে সব মাপের টেবিল

ওপরের সব মাপ এক জায়গায় রাখলাম। WinningSeller-এর সারিগুলো ১২ অক্টোবর ২০২৬-এর ডিজাইন ধরে লেখা। অন্য থিমে থাকলে থিমের নিজের নির্দেশনাই আগে।

কোথায় বসবে আকার পিক্সেলে খেয়াল রাখুন
বড় ব্যানার, ছবি পাশে বা মাঝখানে (WinningSeller) ৪:৩ ১৪৪০ × ১০৮০ কোনো স্ক্রিনে কাটে না, লেখা ছবির বাইরে
বড় ব্যানারে ফোনের আলাদা ছবি (WinningSeller) ৪:৫ ১০৮০ × ১৩৫০ না দিলেও চলে, দিলে নিজের আকারে দেখায়
ছবি পুরো ব্যাকগ্রাউন্ডে বা অফার ব্যানার চওড়া ১৪৪০ × ৮১০ জিনিস মাঝখানে, ছবিতে লেখা না
চওড়া স্ট্রিপ ব্যানার (অন্য অনেক থিম) প্রায় ৩:১ ১৯২০ × ৬০০ থেকে ৮০০ ফোনের জন্য আলাদা খাড়া ছবি লাগবেই
প্রোডাক্টের ছবি ১:১ ১২০০ × ১২০০ থেকে ১৪৪০ × ১৪৪০ জিনিস প্রায় আশি ভাগ জুড়ে, ২০০ KB-র নিচে
ক্যাটাগরির টাইল (WinningSeller) ১:১ ৮০০ × ৮০০ একই পেছনের রং

লোগো, দোকানের আইকন আর ফেসবুকে লিংক শেয়ারের ১২০০ × ৬৩০ ছবির মাপ এই টেবিলে রাখিনি। সেগুলো আছে ওয়েবসাইটের লোগো সাইজের লেখায়।

আজই করে ফেলুন

একটা ফোন, Canva আর এক ঘণ্টা সময়, এর বেশি কিছু লাগবে না।

  1. নিজের ফোনে, মোবাইল ডাটায়, দোকানের হোম পেজ খুলুন। প্রথম স্ক্রিনে ব্যানারের কোন অংশ দেখা যাচ্ছে আর কোনটা কাটা, একটা স্ক্রিনশট নিয়ে রাখুন।
  2. থিমে ব্যানারের বক্স কোন আকারের, দেখে নিন। WinningSeller-এ ছবি পাশে রাখা ডিজাইন হলে ৪:৩।
  3. ব্যানারের ছবিতে লেখা থাকলে সেই লেখাটা ছবি থেকে সরিয়ে পেজের হেডিং আর বাটনে লিখুন।
  4. Canva-তে সঠিক মাপে ব্যানারটা নতুন করে বানান, জিনিসটা মাঝখানে রেখে, JPG হিসেবে নামান।
  5. ব্যানার আর প্রথম দশটা প্রোডাক্টের ছবির ফাইল কত KB, দেখুন। ৩০০ KB-র বেশি ব্যানার আর ২০০ KB-র বেশি প্রোডাক্টের ছবি Squoosh-এ ছোট করুন।
  6. যে প্রোডাক্টের ছবি লম্বা বা চওড়া, সেগুলো বর্গাকারে কেটে আবার আপলোড করুন।
  7. আবার ফোনে দোকান খুলে প্রথম স্ক্রিনটা দেখুন, আর আগের স্ক্রিনশটের সাথে মিলিয়ে নিন।

পরের অফারের আগে আর শুক্রবার রাতের ভয় থাকবে না। ব্যানার বানাবেন একবার, ফোনে আর ল্যাপটপে একই রকম দেখবে, আর অ্যাডের টাকায় আসা কাস্টমার প্রথম স্ক্রিনেই অফারটা পড়বেন।

সাধারণ প্রশ্ন

ওয়েবসাইট ব্যানার সাইজ কত পিক্সেল হবে?

সবার জন্য এক মাপ নেই, কারণ প্রতিটা থিম ব্যানারের জন্য আলাদা আকারের বক্স রাখে। আগে দেখুন আপনার থিমে ব্যানারের বক্সটা কোন আকারের, তারপর সেই আকারে বানান। WinningSeller-এর "বড় ব্যানার"-এ ছবি পাশে বা মাঝখানে থাকলে বক্সটা সব স্ক্রিনে ৪:৩, তাই ১৪৪০ × ১০৮০ পিক্সেলের ছবি কোথাও কাটে না।

মোবাইলের জন্য আলাদা ব্যানার লাগে কেন?

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

প্রোডাক্টের ছবি কোন সাইজে দেব?

বর্গাকার দিন, ১২০০ × ১২০০ থেকে ১৪৪০ × ১৪৪০ পিক্সেলের মধ্যে। বেশিরভাগ দোকানের প্রোডাক্ট কার্ড বর্গাকার, তাই লম্বা বা চওড়া ছবি দিলে হয় কেটে যায়, নয়তো চারপাশে ফাঁকা জায়গা থাকে। প্রোডাক্ট যেন ছবির প্রায় আশি ভাগ জুড়ে থাকে।

ব্যানারের ছবি কত KB হওয়া উচিত?

ব্যানার ৩০০ KB-র নিচে আর প্রোডাক্টের ছবি ২০০ KB-র নিচে রাখার চেষ্টা করুন। ক্যামেরার আসল ছবি কয়েক MB হয়, সেটা ফোনের ডাটায় নামতে সময় নেয়। আপলোডের আগে ছবিটা ছোট করে নিলে কাস্টমার প্রথম স্ক্রিনটা অনেক তাড়াতাড়ি দেখেন।

ব্যানারে দাম আর অফার লিখব না ছবির বাইরে?

সম্ভব হলে ছবির বাইরে, পেজের আসল লেখা হিসেবে। ছবির ভেতরের লেখা ফোনে কেটে যেতে পারে, ছোট হয়ে পড়া যায় না, আর দাম বদলালে পুরো ছবি নতুন করে বানাতে হয়। আসল লেখা যে কোনো স্ক্রিনে নিজে থেকেই সাজিয়ে নেয়।

Canva-তে ওয়েবসাইট ব্যানার বানানো যায়?

যায়। নতুন ডিজাইন খোলার সময় Custom size বেছে একক px রেখে নিজের মাপ লিখুন, যেমন ১৪৪০ আর ১০৮০। কাজ শেষে JPG হিসেবে নামান, তারপর আপলোডের আগে ছবিটা হালকা করে নিন।

#ওয়েবসাইট ব্যানার সাইজ#প্রোডাক্ট ছবির সাইজ#মোবাইল ব্যানার#Canva#ছবির KB#অনলাইন দোকান

আরও পড়ুন

ওয়েবসাইটের মেনু আর ফুটারে কী রাখবেন? অনলাইন দোকানের জরুরি পেজসহ

ওয়েবসাইটের মেনুতে কয়টা লিংক রাখবেন, হেডারে কল আর WhatsApp বাটন কেন, ফুটারে ঠিকানা আর ট্রেড লাইসেন্স নম্বর কোথায় বসবে, আর About, যোগাযোগ, ডেলিভারি ও রিটার্নের পেজে কী লিখবেন। ফোনে দোকান খুলে এক ঘণ্টায় গুছিয়ে নেওয়ার পুরো নিয়ম।

·১২ মিনিটে পড়া যায়

গুগল সার্চ কনসোল কি? দোকানের ওয়েবসাইট গুগলে তুলবেন যেভাবে

গুগল সার্চ কনসোল হলো Google-এর ফ্রি টুল, যেখানে দেখা যায় কোন সার্চে আপনার দোকান আসছে আর কোন পেজ গুগলের লিস্টে আছে। নিজের ডোমেইনে DNS দিয়ে মালিকানা প্রমাণ, sitemap.xml সাবমিট, URL Inspection, "Not indexed" দেখলে কী করবেন, আর কোন পথ দোকানে আসলে কাজ করে না।

·১২ মিনিটে পড়া যায়

বিজনেস ক্যাপশন, ফেসবুকে সেল পোস্টে কী লিখলে অর্ডার আসে

ছবি সুন্দর, তবু ইনবক্সে সবাই শুধু দাম জিজ্ঞেস করে? সেল পোস্টের প্রথম দুই লাইনে কী লিখবেন, ক্যাপশনে কোন পাঁচটা কথা থাকতেই হবে, দাম লিখবেন কি না, নতুন মাল, অফার, স্টকে ফেরা আর রিভিউর চারটা নমুনা, আর কোন কথায় পোস্ট রিপোর্ট খায়।

·১০ মিনিটে পড়া যায়