২০২৬ সালে কি WebP ব্যবহার করা উচিত?
ব্রাউজার সাপোর্ট এখন সর্বজনীন, তাই প্রশ্নটি এখন আর WebP ব্যবহার করা যাবে কিনা তা নিয়ে নয়, বরং AVIF এটিকে অপ্রয়োজনীয় করে তুলেছে কিনা তা নিয়ে।
হ্যাঁ, ২০২৬ সালেও WebP ব্যবহার করা পুরোপুরি যুক্তিযুক্ত এবং একটি ওয়েবসাইটের ইমেজের জন্য এটি এখনও সবচেয়ে নিরাপদ ডিফল্ট বিকল্প। ব্রাউজার সাপোর্ট এখন সর্বজনীন, সমমানের কোয়ালিটিতে ফাইলগুলো JPEG-এর চেয়ে ২৫ থেকে ৩৫ শতাংশ ছোট এবং AV1 Image File Format (AVIF) এখনও এটিকে প্রতিস্থাপন করতে পারেনি।
WebP-এর বিরুদ্ধে পুরোনো আপত্তিটি ছিল ব্রাউজার সাপোর্ট নিয়ে, এবং সেই বিতর্কের অবসান ঘটেছে। Chrome, Firefox, Safari এবং Edge সবই ডেস্কটপ ও মোবাইলে এই ফরম্যাটটি সাপোর্ট করে। এখন আসল প্রশ্নটি দাঁড়িয়েছে যে AVIF কি WebP-কে অপ্রয়োজনীয় করে তুলেছে কিনা, এবং এর উত্তর হলো: এখনও নয়, এবং সম্ভবত পুরোপুরি কখনোই নয়।
WebP আসলে কতটা ছোট
সমমানের ভিজ্যুয়াল কোয়ালিটিতে WebP সাধারণত JPEG-এর তুলনায় ২৫ থেকে ৩৫ শতাংশ এবং PNG-এর তুলনায় ২০ থেকে ৩০ শতাংশ সাইজ সাশ্রয় করে। মসৃণ অংশযুক্ত ছবি এবং ফ্ল্যাট কালারযুক্ত গ্রাফিক্সের ক্ষেত্রে এই সাশ্রয় সবচেয়ে বেশি হয়।
| ইমেজের ধরন | মূল ফরম্যাট | WebP হিসেবে | সাশ্রয় |
|---|---|---|---|
| পণ্যের ছবি | JPEG 420 KB | 290 KB | ৩১ শতাংশ |
| হিরো ব্যানার | JPEG 850 KB | 560 KB | ৩৪ শতাংশ |
| স্বচ্ছ ব্যাকগ্রাউন্ডসহ লোগো | PNG 84 KB | 31 KB | ৬৩ শতাংশ |
| টেক্সটসহ স্ক্রিনশট | PNG 210 KB | 148 KB | ৩০ শতাংশ |
| 5 KB-এর নিচের ছোট আইকন | PNG 3 KB | 3.4 KB | বড় |
শেষ সারিটি এমন একটি ক্ষেত্র দেখায় যেখানে WebP পিছিয়ে পড়ে। প্রায় 5 KB-এর নিচে ফরম্যাটের নিজস্ব ওভারহেড কম্প্রেশনের সুবিধার চেয়ে বেশি হয়ে যায়, যার কারণে ছোট আইকনগুলো প্রায়শই PNG হিসেবে রেখে দেওয়া বা ভেক্টর গ্রাফিক্স দিয়ে প্রতিস্থাপন করা ভালো।
WebP বনাম AVIF
বড় ছবির ক্ষেত্রে AVIF সাধারণত WebP-এর চেয়ে প্রায় ২০ থেকে ৩০ শতাংশ বেশি কম্প্রেস করে, তবে এটি এনকোড হতে অনেক বেশি সময় নেয় এবং প্রায়শই 10 KB-এর নিচের ফাইলের ক্ষেত্রে আকারে বড় হয়। এই ২টি ফরম্যাট একে অপরকে প্রতিস্থাপন করার চেয়ে ভিন্ন ভিন্ন ধরনের ইমেজের জন্য বেশি উপযোগী।
AVIF-এ কন্টেইনার ওভারহেড বেশি থাকে, তাই এটি বড় ছবির ক্ষেত্রে নিশ্চিতভাবে জয়ী হয় এবং ছোট গ্রাফিক্সের ক্ষেত্রে হেরে যায়। এনকোডিংয়ের সময়ও আরেকটি বিবেচ্য বিষয়, কারণ AVIF প্রতিটি ইমেজের জন্য কয়েক গুণ বেশি সময় নিতে পারে। ৫০০টি ফাইলের একটি ব্যাচের ক্ষেত্রে এই পার্থক্যটি সেকেন্ডের পরিবর্তে মিনিটে পরিমাপ করা হয়, যা একটি লাইব্রেরি বারবার কনভার্ট করার সময় বেশ গুরুত্বপূর্ণ হয়ে ওঠে।
কোন ফরম্যাট কোথায় ব্যবহার করবেন
- হিরো ইমেজ এবং বড় ছবি। AVIF ব্যবহার করুন, যেখানে কম্প্রেশনের সুবিধা সবচেয়ে বেশি পাওয়া যায়।
- সাধারণ সাইটের ইমেজ। WebP ব্যবহার করুন, যা দ্রুত এনকোড হয় এবং সর্বজনীনভাবে সমর্থিত।
- স্বচ্ছ ব্যাকগ্রাউন্ডসহ লোগো এবং গ্রাফিক্স। WebP ব্যবহার করুন, যা PNG-কে উল্লেখযোগ্যভাবে ছাড়িয়ে যায়।
- 5 KB-এর নিচের আইকন। PNG বা ভেক্টর গ্রাফিক্স ব্যবহার করুন, কারণ আধুনিক উভয় ফরম্যাটই অতিরিক্ত ওভারহেড যোগ করে।
- ডাউনলোডযোগ্য বা ইমেলে পাঠানো ফাইল। JPEG বা PNG ব্যবহার করুন, কারণ ব্রাউজারের বাইরে এগুলোর সাপোর্ট এখনও সীমিত।
WebP যা করতে পারে কিন্তু JPEG পারে না
WebP একই সাথে ট্রান্সপারেন্সি (স্বচ্ছতা) এবং লসি (lossy) কম্প্রেশন সাপোর্ট করে, যা JPEG বা PNG কোনোটিই দিতে পারে না। এই কম্বিনেশনটি অত্যন্ত দরকারী এবং সহজেই এড়িয়ে যাওয়া হতে পারে।
একটি স্বচ্ছ ব্যাকগ্রাউন্ডসহ পণ্যের ছবির ক্ষেত্রে আগে একটি ভারী PNG অথবা পেছনে সাদা বক্সসহ একটি JPEG-এর মধ্যে যেকোনো একটি বেছে নিতে হতো। WebP এই দ্বিধা দূর করে। এই ফরম্যাটটি অ্যানিমেশনও সাপোর্ট করে, যা অ্যানিমেটেড GIF-এর ফাইল সাইজের একটি সামান্য ভগ্নাংশেই সরাসরি বিকল্প হিসেবে কাজ করে।
যেখানে WebP এখনও সমস্যা তৈরি করে
ব্রাউজারের বাইরে, যেমন ইমেল ক্লায়েন্ট, আপলোড ফর্ম, প্রিন্ট ওয়ার্কফ্লো এবং পুরোনো ডিজাইন সফটওয়্যারে WebP কাজ করে না। ব্রাউজার সাপোর্ট ওয়েবের সমস্যার সমাধান করেছে কিন্তু বাকি সবকিছু অপরিবর্তিত রেখে দিয়েছে।
সবচেয়ে সাধারণ সমস্যাটি ঘটে প্রেস কিটের ক্ষেত্রে, যেখানে একজন সাংবাদিক একটি WebP লোগো ডাউনলোড করে তাদের লেআউট সফটওয়্যারে ব্যবহার করতে পারেন না। সরকারি পোর্টালগুলো দ্বিতীয় সমস্যা, যা এই ফরম্যাটটি সরাসরি প্রত্যাখ্যান করে। ব্রাউজার সাপোর্ট টেবিলের চেয়ে ব্যবহারের উদ্দেশ্যের ওপর ভিত্তি করে সিদ্ধান্ত নিন, কারণ ব্রাউজারের বিষয়টি বহু বছর আগেই সমাধান হয়ে গেছে কিন্তু অন্যান্য সমস্যাগুলো এখনও রয়ে গেছে।
কীভাবে একটি সাইটকে WebP-তে কনভার্ট করবেন
কোনো কিছু না ভেঙে একটি ওয়েবসাইটকে WebP-তে নিয়ে যেতে এই ৬টি ধাপ অনুসরণ করুন।
- আপনার পেজগুলো আসলে কোন ইমেজগুলো ব্যবহার করছে তার একটি তালিকা তৈরি করুন, কারণ বেশিরভাগ লাইব্রেরিতে এমন অনেক ফাইল জমা হয় যা কোনো পেজেই লিঙ্ক করা থাকে না।
- কনভার্ট করার আগে প্রতিটি ইমেজকে তার আসল ডিসপ্লে উইডথ অনুযায়ী রিসাইজ করুন, হাই-ডেনসিটি স্ক্রিনের জন্য সাইজ দ্বিগুণ রাখুন।
- কোয়ালিটি ৮০ রেখে WebP-তে কনভার্ট করুন, এটি এমন একটি পয়েন্ট যেখানে ফাইলটি ছোট হয় এবং কোয়ালিটির ক্ষতি খালি চোখে ধরা পড়ে না।
- মূল JPEG বা PNG ফাইলগুলো মুছে না ফেলে ব্যাকআপ হিসেবে রেখে দিন।
- পিকচার এলিমেন্টের মাধ্যমে উভয় ফাইলই সার্ভ করুন, যেখানে WebP প্রথমে থাকবে এবং মূল ফাইলটি img ট্যাগের ভেতরে থাকবে।
- কোনো কিছু মুছে ফেলার আগে মোবাইল এবং ডেস্কটপ ব্রাউজারে পেজগুলো পরীক্ষা করে নিন।
বেশিরভাগ কন্টেন্ট সিস্টেম এখন আপলোড করার সময় স্বয়ংক্রিয়ভাবে এই মার্কআপ তৈরি করে, তাই নিজে কোড লেখার আগে আপনার প্ল্যাটফর্মটি ইতিমধ্যে কী করছে তা পরীক্ষা করে দেখুন। ইমেজ কনভার্ট করতে মাত্র কয়েক মিনিট সময় লাগে, যেখানে টেমপ্লেট পুনর্লিখন করতে বেশি সময় লাগতে পারে।
কোন কোয়ালিটি সেটিং ব্যবহার করবেন
WebP-এর জন্য কোয়ালিটি ৮০ হলো সঠিক ডিফল্ট, কারণ এই ফরম্যাটটি একই মানের নম্বরে JPEG-এর চেয়ে ডিটেইলস ভালো ধরে রাখে। কোয়ালিটি ৮০-তে একটি WebP ফাইল দেখতে ৮৫ বা তার বেশি কোয়ালিটির JPEG-এর মতোই দেখায়।
৭০-এর নিচে নামলে মুখমণ্ডল এবং মসৃণ গ্রেডিয়েন্টে কোয়ালিটির ক্ষতি স্পষ্ট হতে শুরু করে, বিশেষ করে বড় ইমেজের ক্ষেত্রে। কোয়ালিটি ৯০ পার হলে ফাইল সাইজ দ্রুত বৃদ্ধি পায় কিন্তু দৃশ্যমান কোয়ালিটির কোনো উন্নতি হয় না। পুরো ব্যাচ কনভার্ট করার আগে ৩টি ভিন্ন সেটিংসে একটি নমুনা ইমেজ পরীক্ষা করে দেখুন, কারণ সঠিক নম্বরটি আপনি কী ধরনের ইমেজ প্রকাশ করছেন তার ওপর নির্ভর করে।
WebP কি সার্চ র্যাঙ্কিংয়ে সাহায্য করে
WebP পরোক্ষভাবে পেজের স্পিড উন্নত করে সাহায্য করে, যা একটি র্যাঙ্কিং ফ্যাক্টর; সার্চ ইঞ্জিনগুলো এই ফরম্যাটটিকে বিশেষভাবে পছন্দ করে বলে নয়। কোনো সার্চ ইঞ্জিন ফাইল এক্সটেনশনের জন্য বাড়তি সুবিধা দেয় না।
এই প্রক্রিয়াটি Core Web Vitals-এর মাধ্যমে কাজ করে, যেখানে Largest Contentful Paint-এর পরিমাপ সাধারণত একটি একক হিরো ইমেজের ওপর নির্ভর করে। সেই ইমেজটির সাইজ এক-তৃতীয়াংশ কমিয়ে আনলে সরাসরি পরিমাপের উন্নতি ঘটে। Lighthouse-ও একটি 'Serve images in next generation formats' ওয়ার্নিং দেখায়, যা WebP বা AVIF দ্বারা সমাধান করা যায় এবং এটি পাস করা তুলনামূলক সহজ অডিটগুলোর একটি।
একটি বিদ্যমান লাইব্রেরি কনভার্ট করা কি যুক্তিযুক্ত
যখন ইমেজগুলো আপনার পেজের ওজনের সিংহভাগ দখল করে থাকে তখন কনভার্ট করুন, যা প্রায় প্রতিটি কন্টেন্ট সাইট এবং অনলাইন শপের ক্ষেত্রে সত্য। আপনার পেজগুলো যদি ইতিমধ্যে হালকা হয় বা ইমেজের সংখ্যা কম ও ছোট হয়, তবে এটি এড়িয়ে যান।
সিদ্ধান্ত নেওয়ার আগে পরীক্ষা করে নিন। ডেভেলপার টুলস খুলুন, Network ট্যাবে যান, ইমেজ ফিল্টার করুন এবং একটি সাধারণ পেজ রিলোড করুন। ইমেজগুলোর মোট সাইজ যদি 1 MB-এর বেশি হয়, তবে কনভার্ট করলে দৃশ্যমান উন্নতি হবে। যদি মোট সাইজ 200 KB হয়, তবে এই শ্রম পেজের অন্য কোনো অংশে দেওয়া ভালো।
লসি এবং লসলেস WebP হলো ভিন্ন মোড
WebP-এর ২টি আলাদা কম্প্রেশন মোড রয়েছে এবং ভুল মোডটি বেছে নিলে ফাইলটি মূল ফাইলের চেয়েও বড় হয়ে যেতে পারে। লসি (lossy) মোড ছবির জন্য উপযোগী, আর লসলেস (lossless) মোড স্ক্রিনশট, লোগো এবং ফ্ল্যাট গ্রাফিক্সের জন্য উপযোগী।
বেশিরভাগ টুল কোয়ালিটি সেটিং থেকে মোডটি নির্বাচন করে, যেখানে কোয়ালিটি ১০০-তে লসলেস এবং এর নিচে লসি মোড প্রয়োগ করা হয়। এই ডিফল্টটি ছবির জন্য কাজ করলেও গ্রাফিক্সের ক্ষেত্রে ব্যর্থ হয়, যেখানে একটি স্ক্রিনশটের লসি WebP টেক্সটের চারপাশে হ্যালো (halo) তৈরি করে এবং লসলেস সংস্করণের চেয়েও বেশি ভারী হয়। যখনই কোনো কনভার্ট করা গ্রাফিক্স তার আগের PNG ফাইলের চেয়ে বড় হয়ে যাবে, তখন আপনার টুলটি কোন মোড ব্যবহার করেছে তা পরীক্ষা করে দেখুন।
WebP গ্রহণ করার সময় সাধারণ ভুলসমূহ
- প্রথমে রিসাইজ না করে কনভার্ট করা। ডাইমেনশন ফাইলের সাইজের সিংহভাগ নিয়ন্ত্রণ করে, তাই একটি ৪০০০ পিক্সেলের WebP ফাইলও অনেক ভারী হবে।
- মূল ফাইলগুলো মুছে ফেলা। সেগুলো রেখে দিন, কারণ ফলব্যাক এবং ভবিষ্যতে পুনরায় এক্সপোর্ট করার জন্য একটি লসলেস সোর্সের প্রয়োজন হবে।
- ইতিমধ্যে কম্প্রেস করা একটি JPEG কনভার্ট করা। এর ফলে ফাইলের কোয়ালিটি একবারের পরিবর্তে দুইবার নষ্ট হয়।
- ডাউনলোডযোগ্য ফাইলের জন্য WebP ব্যবহার করা। প্রেস কিট, টেমপ্লেট এবং প্রিন্ট ফাইলগুলো JPEG বা PNG হিসেবেই রাখা উচিত।
- অত্যন্ত ছোট আইকন কনভার্ট করা। 5 KB-এর নিচে ফরম্যাটের ওভারহেডের কারণে ফাইলগুলো ছোট হওয়ার পরিবর্তে আরও বড় হয়ে যায়।
একবারে একটি লাইব্রেরি কনভার্ট করা
ফাইলগুলোকে কোনো মধ্যবর্তী ফরম্যাটের মাধ্যমে না নিয়ে সরাসরি মূল ফরম্যাট থেকে কনভার্ট করুন, কারণ প্রতিটি লসি ধাপ ফাইলের ডিটেইলস নষ্ট করে। HEIC থেকে JPEG এবং তারপর WebP-তে গেলে দুইবার কোয়ালিটি নষ্ট হয়, যেখানে একবারেই কাজ করা যেত।
একসাথে ৫০০টি পর্যন্ত ফাইল ড্রপ করুন, অথবা সরাসরি একটি ZIP আর্কাইভ টেনে আনুন, এবং প্রতিটি সমর্থিত ইমেজ একবারে কনভার্ট হয়ে যাবে। এই কাজটি আপনার নিজস্ব প্রসেসরে ব্রাউজারের ভেতরে চলে, তাই কোনো ফাইল সার্ভারে না পাঠিয়েই একটি সম্পূর্ণ সাইট মাইগ্রেশন করা সম্ভব। যেসব এজেন্সি চুক্তির অধীনে ক্লায়েন্টের লাইব্রেরি পরিচালনা করে, তাদের জন্য এটি তথ্য ফাঁসের ঝুঁকি কেবল কমায় না, বরং পুরোপুরি দূর করে।