WebP Image Optimization: Online Shop-এর ছবি হালকা ও দ্রুত করার গাইড

আপনার online shop-এ হয়তো শত শত product ছবি আছে, আর প্রতিটা ছবি mobile camera বা supplier-এর কাছ থেকে সরাসরি upload করা। ফলাফল: একটা category page খুলতেই কয়েক MB ডেটা লাগে, আর গ্রামের বা জেলা শহরের customer ধীর mobile data-তে অপেক্ষা করতে করতে page বন্ধ করে দেন। এই গাইডে দেখবেন WebP কী, কেন e-commerce-এর জন্য এটা সবচেয়ে সহজ speed জয়, আর WordPress/WooCommerce ও custom (Laravel) site-এ কীভাবে ধাপে ধাপে চালু করবেন।

WebP কী, আর JPG/PNG থেকে কীভাবে আলাদা

WebP হলো Google-এর তৈরি একটা image format, যা একই রকম দেখতে ছবিকে সাধারণত JPG বা PNG-এর চেয়ে ছোট file size-এ রাখতে পারে। এটা lossy (JPG-এর মতো, কিছু detail বাদ দিয়ে ছোট করা) এবং lossless (PNG-এর মতো, কোনো detail না হারিয়ে) — দুই ধরনের compression-ই সাপোর্ট করে, সাথে transparent background-ও।

বর্তমানে Chrome, Edge, Firefox, Safari (iPhone সহ) — সব আধুনিক browser WebP দেখাতে পারে। তাই আজকের দিনে বেশিরভাগ shop-এর জন্য WebP ব্যবহার করা নিরাপদ। খুব পুরনো device-এর কথা ভাবলে নিচে দেখানো <picture> পদ্ধতিতে JPG fallback রাখতে পারেন।

কোন format কখন

কেন online shop-এর জন্য image optimization এত জরুরি

একটা সাধারণ product page-এ text-এর চেয়ে ছবির ডেটা অনেক বেশি। Home page-এর বড় banner বা product page-এর main ছবিটা প্রায়ই page-এর সবচেয়ে বড় element — যেটা Google-এর LCP (Largest Contentful Paint) মাপে। ছবি ভারী হলে LCP দেরিতে হয়, আর সেটা সরাসরি Core Web Vitals-এর ফলাফলে প্রভাব ফেলে।

SEO-র বাইরেও এর ব্যবসায়িক দিক আছে। Facebook Ads থেকে আসা visitor সাধারণত mobile-এ, এবং তাঁরা ধৈর্য কম রাখেন। ছবি লোড হতে দেরি হলে আপনি click-এর টাকা দিলেন, কিন্তু customer product-টাই ঠিকমতো দেখলেন না। আবার customer-এর mobile data খরচও কমে — যেটা ঢাকার বাইরের customer-এর কাছে বাস্তব বিষয়।

শুধু WebP নয়: সঠিক মাপ (dimension) আরও বড় ব্যাপার

অনেকে 4000×3000 pixel-এর ছবি WebP করে upload করেন, আর ভাবেন কাজ শেষ। কিন্তু mobile screen-এ ছবিটা হয়তো 400–800 pixel চওড়া দেখায়। সঠিক dimension-এ resize না করলে WebP-ও অপ্রয়োজনীয় রকম ভারী থাকে। নিয়ম হলো: আগে resize, তারপর compress, তারপর format পরিবর্তন।

কত size, কত quality — ব্যবহারিক মানদণ্ড

• Product main ছবি: সাধারণত 1000–1500px চওড়া যথেষ্ট, যাতে zoom করলেও ভালো দেখায়।
• Category/listing thumbnail: 300–600px চওড়া, theme কোন মাপে দেখায় সেটা দেখে ঠিক করুন।
• Home page banner: desktop-এর জন্য বড়, mobile-এর জন্য আলাদা ছোট version রাখা ভালো।
• WebP quality: lossy-তে ৭৫–৮৫ সাধারণত ভালো ভারসাম্য দেয়। ছবি zoom করে দেখুন — কাপড়ের texture বা লেখা ঝাপসা হলে quality একটু বাড়ান।
• Square ratio: product ছবি একই ratio-তে (যেমন 1:1) রাখলে grid সুন্দর দেখায় এবং layout shift কমে।

এগুলো কঠিন নিয়ম নয় — আপনার theme যে মাপে ছবি দেখায়, সেটাই আসল মানদণ্ড। Browser-এ right click করে "Inspect" দিয়ে দেখে নিতে পারেন ছবি আসলে কত pixel-এ render হচ্ছে।

WordPress/WooCommerce-এ WebP চালু করার ধাপ

WordPress 5.8 থেকে সরাসরি WebP ফাইল upload করা যায়। তবে পুরনো সব JPG/PNG হাতে হাতে বদলানো বাস্তবসম্মত নয়, তাই সাধারণত একটা image optimization plugin ব্যবহার করা হয় (যেমন Converter for Media, EWWW Image Optimizer, ShortPixel, Imagify — প্রত্যেকের free/paid সীমা আলাদা, বর্তমান শর্ত দেখে নিন)। অনেক hosting-এর নিজস্ব cache/optimization plugin-ও (যেমন LiteSpeed Cache) WebP তৈরি করতে পারে।

1. 1
   পুরো site-এর backup নিন (database + wp-content/uploads)।
2. 2
   একটা image optimization plugin install করুন — একসাথে একাধিক image plugin চালাবেন না।
3. 3
   Settings-এ WebP conversion চালু করুন এবং quality ৭৫–৮৫-এর মধ্যে রাখুন।
4. 4
   "Resize large images" বা max width অপশন থাকলে সেটা 1500–2000px-এ সেট করুন, যাতে ভবিষ্যতে বিশাল ছবি upload না হয়।
5. 5
   Bulk optimize দিয়ে পুরনো সব ছবি convert করুন; বড় library হলে কয়েক ধাপে করুন।
6. 6
   Cache plugin বা CDN থাকলে cache clear করুন।
7. 7
   Chrome-এ product page খুলে Inspect → Network → Img filter দিয়ে দেখুন ছবি webp type হিসেবে আসছে কিনা।
8. 8
   PageSpeed Insights দিয়ে আগে-পরে test করে ফলাফল লিখে রাখুন।

Custom site (Laravel) -এ WebP

Custom site-এ সবচেয়ে ভালো পদ্ধতি হলো upload-এর সময়ই ছবি resize করে WebP তৈরি করা, যাতে পরে আলাদা কাজ করতে না হয়। Laravel-এ সাধারণত Intervention Image package ব্যবহার হয়; server-এ GD বা Imagick extension-এ WebP support আছে কিনা আগে নিশ্চিত করুন। Upload handler-এ মূল ছবি থেকে 2–3টা size (যেমন thumbnail, medium, large) WebP-তে save করুন, আর database-এ path রাখুন।

পুরনো ছবি একবারে convert করতে command line tool cwebp (Google-এর libwebp-এর অংশ) কাজে লাগে:

cwebp -q 80 -resize 1200 0 kurti-red.jpg -o kurti-red.webp

এখানে -q 80 মানে quality ৮০, আর -resize 1200 0 মানে চওড়া 1200px, উচ্চতা ratio অনুযায়ী।

<picture> দিয়ে WebP + fallback

খুব পুরনো browser-এর জন্য JPG রেখে দিতে চাইলে Blade template-এ এভাবে লিখতে পারেন:

<picture>
  <source type="image/webp"
          srcset="/img/kurti-red-600.webp 600w, /img/kurti-red-1200.webp 1200w"
          sizes="(max-width: 768px) 100vw, 600px">
  <img src="/img/kurti-red-1200.jpg"
       alt="লাল সুতি kurti, হাতের কাজ করা গলা"
       width="1200" height="1200">
</picture>

Browser WebP বুঝলে source থেকে উপযুক্ত size নেবে, না বুঝলে img-এর JPG দেখাবে। width ও height দেওয়া জরুরি — এতে ছবি লোড হওয়ার আগেই browser জায়গা রেখে দেয়, ফলে layout লাফায় না (CLS কমে)। আর alt লেখার নিয়ম জানতে দেখুন image ALT text SEO গাইড।

ছবি ছোট হলো, এবার লোড কখন হবে?

Format ঠিক করার পরের ধাপ হলো ঠিক করা কোন ছবি সাথে সাথে লোড হবে আর কোনটা scroll করার পরে। নিচের দিকের ছবি পরে লোড করা (lazy loading) ভালো, কিন্তু উপরের main ছবি বা banner lazy করলে উল্টো ক্ষতি হয়। বিস্তারিত পাবেন lazy loading: কখন করবেন, কখন করবেন না লেখায়।

সাধারণ ভুলগুলো

ছবি তোলার সময়ই অর্ধেক কাজ

Optimization plugin খারাপ ছবিকে ভালো বানাতে পারে না। পরিষ্কার আলো, সাধারণ background, একই ratio — এগুলো ঠিক থাকলে compression-এর পরও ছবি সুন্দর থাকে। Mobile দিয়ে ভালো product ছবি তোলার ব্যবহারিক নিয়ম পাবেন দুর্বল product ছবি: mobile দিয়ে ভালো ছবি তোলার গাইড-এ।

এখন কী করবেন

আজই আপনার সবচেয়ে বেশি visit হওয়া ৩টা page (home, একটা category, একটা best-selling product) PageSpeed Insights-এ test করুন এবং ছবি নিয়ে পরামর্শ আছে কিনা দেখুন — PageSpeed Insights-এর version ভেদে এগুলো "Improve image delivery" অথবা পুরনো নামে "Serve images in next-gen formats" / "Properly size images" হিসেবে দেখায়। তারপর backup নিয়ে উপরের ধাপে WebP চালু করুন, আবার test করুন। ভবিষ্যতে নতুন product upload-এর নিয়ম বানিয়ে দিন: নির্দিষ্ট ratio, নির্দিষ্ট max width, বর্ণনামূলক file name। Custom site হলে developer-কে upload-এর সময়ই WebP তৈরির ব্যবস্থা করতে বলুন — এটা একবার করলে সারাজীবনের কাজ।