WebP ফরম্যাটের পরিচয়

WebP হলো Google-এর তৈরি একটি নতুন ছবির ফরম্যাট, যা ক্ষয়যুক্ত সংকোচন, ক্ষয়হীন সংকোচন ও স্বচ্ছতা সমর্থন করে; সংকুচিত ফাইলের আকার JPEG, PNG ইত্যাদির চেয়ে ছোট। তাই এটি ব্যান্ডউইথ বাঁচায়, পেজ লোডের সময় কমায় এবং ব্যবহারকারীর ডেটা সাশ্রয় করে।

Android ও iOS-এর অ্যাপে Google-এর দেওয়া ডিকোডিং লাইব্রেরি যুক্ত করলেই খুব সহজে WebP ফরম্যাট সমর্থন করা যায়। তবে ওয়েবে WebP-এর সমর্থন এখনও খুব ব্যাপক নয়, অনুযায়ীCan I Use-এর তথ্য，বর্তমানে শুধু Chrome、Opera ব্রাউজার এবং Android-এর WebView-ই WebP সমর্থন করে। কিন্তু WebP ছবির এত সুবিধা যখন রয়েছে，তখন কি আমরা ওয়েব পেজে এটি ব্যবহার করতে পারি？পারি। এই লেখায় সেই বিষয়টি নিয়েই আলোচনা করা হবে।

বিদ্যমান ছবিগুলো WebP ফরম্যাটে রূপান্তর করা

WebP ফরম্যাট ব্যবহার করতে হলে আপনার ওয়েবসাইটে ব্যবহৃত সব ছবির একটি করে WebP সংস্করণ তৈরি করতে হবে। CDN সেবাদাতা ব্যবহার করলে, তারা সাধারণত WebP-তে রূপান্তরের বিকল্প দিয়ে থাকে। যেমন Upyun:

এ ধরনের কনফিগারেশন যোগ করার পর ছবির URL-এর শেষে সংশ্লিষ্ট প্রত্যয় যোগ করে আমরা WebP ফরম্যাটের রিসোর্স সংস্করণ ব্যবহার করতে পারি।

আপনি webpack、gulp-এর প্লাগইন ব্যবহার করেও একসঙ্গে অনেক ছবির ফরম্যাট বদলাতে পারেন। এখানে আর বিস্তারিত বলা হচ্ছে না।

ব্রাউজারে WebP ফরম্যাট ব্যবহার

সব ব্রাউজার WebP ফরম্যাট সমর্থন করে না বলে，আমাদের সামনে দুটি পথ আছে：একটি হলো কেবল WebP সমর্থনকারী ব্রাউজারে WebP ব্যবহার করা；অন্যটি হলো যেসব ব্রাউজার WebP সমর্থন করে না，সেগুলিতে WebP সমর্থনের ব্যবস্থা করা।

পদ্ধতি এক： <picture>ট্যাগ

<picture>HTML5-এর একটি নতুন ট্যাগ, এর অনুরূপ<video>এটি একাধিক ফরম্যাটের রিসোর্সও নির্দিষ্ট করতে পারে, যাতে ব্রাউজার নিজের সমর্থিত ফরম্যাট বেছে নিয়ে লোড করতে পারে।

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

ব্রাউজার WebP ফরম্যাট সমর্থন করলে লোড হবেimage.webp，অন্যথায় লোড হবেimage.jpg。

ব্রাউজার সমর্থন না করলেও<picture>ট্যাগ, ছবিটি তখনও স্বাভাবিকভাবে দেখাবে, শুধু CSS হয়তো সঠিকভাবে নির্বাচন করতে পারবে নাpicture এলিমেন্ট। যেমন IE8-এ নিচের CSS কাজ করবে না:

.picture img {  width: 100px;  height: 100px;
}

তবে ছবির স্টাইল এভাবে লেখা যায়：

.image {  width: 100px;  height: 100px;
}

ব্রাউজার WebP ফরম্যাটের ছবি ব্যবহার করলেও，শেষ পর্যন্ত প্রয়োগ করা হবেimg এলিমেন্টের স্টাইল।

তবে ব্যবহার করলেই html5shiv，যার ফলে পুরোনো ব্রাউজার এই ট্যাগ সমর্থন করে, আর CSS সিলেক্টর স্বাভাবিকভাবে ব্যবহার করা যায়।

এই পদ্ধতিটি সবচেয়ে সহজ，কিন্তু CSS-এর ছবিতে（যেমন পটভূমির ছবি）কাজ করে না।

দ্বিতীয় পদ্ধতি：JS ব্যবহার করে ছবির URL বদলানো。

আমাদের অনেক পেজে প্রায়ই ছবির “প্রয়োজনমতো দেরিতে লোড করা” ব্যবহৃত হয়——সাধারণত ছবির URL রাখা হয়img এলিমেন্টের একটি কাস্টম অ্যাট্রিবিউটে, তারপর উপযুক্ত সময়ে JS দিয়ে URL বরাদ্দ করুন src অ্যাট্রিবিউট। একই নীতিতে, ব্রাউজার WebP ফরম্যাট সমর্থন করে কি না তার ভিত্তিতে আমরা দিতে পারিimg উপাদানগুলোকে ভিন্ন ভিন্ন src মান।

প্রথমে JS দিয়ে যাচাই করতে হবে ব্রাউজার WebP ফরম্যাট সমর্থন করে কি না, পদ্ধতিটি হলো ব্রাউজারকে একটি WebP ছবি দিয়ে দেখা যে সেটি সঠিকভাবে দেখাতে পারে কি না। এই পদ্ধতি অ্যাসিঙ্ক্রোনাস, তাই পরবর্তী কাজগুলো কলব্যাক ফাংশনের মধ্যে লিখতে হবে। আমরা ফলাফল সংরক্ষণ করতে পারিlocalStorage এর মধ্যে, ফলে পরে আর পরীক্ষা করতে হবে না।

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

তারপর WebP সমর্থিত কি না তার ভিত্তিতে সংশ্লিষ্ট src বদলাতে নিচের কোড ব্যবহার করুন。

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

এই পদ্ধতির সুবিধা হলো, এটি বিদ্যমান লেজি লোডিং ফাংশনের সঙ্গে মিলিয়ে ব্যবহার করা যায়। আর JS ব্যবহার করে CSS-এর ছবিগুলোও（যেমন পটভূমির ছবি ইত্যাদি）সামলানো যায়।

তৃতীয় পদ্ধতি：JS দিয়ে WebP ছবি ডিকোড করা

WebP-এর ডিকোডার যেহেতু ওপেন সোর্স，তাহলে কি JS দিয়ে এটি বাস্তবায়ন করা যায়？অবশ্যই যায়，কেউ কেউ JS দিয়েই WebP ডিকোডার লিখেছেন। এই JS লাইব্রেরি যুক্ত করার অর্থ হলো সব WebP ছবি JS দিয়ে ডিকোড করে রূপান্তর করাbase64，তারপর মূল URL বদলে দিলে, যেসব ব্রাউজার মূলত WebP সমর্থন করে না সেগুলোও স্বাভাবিকভাবে WebP দেখাতে পারবে। এই লাইব্রেরি ব্যবহার করা খুবই সহজ, ওয়েবপাতার নির্দেশনা দেখলেই হবে।

এই পদ্ধতির অসুবিধা হলো, JS দিয়ে WebP ছবি ডিকোড করতে src-এর URL-এ অ্যাসিঙ্ক্রোনাস অনুরোধ করতে হয় (তবে ছবিটি আগেই একবার ডাউনলোড হওয়ায় সরাসরি ক্যাশ ব্যবহার করা হয়); এছাড়া JS দিয়ে ডিকোড করা তুলনামূলক ধীর, যা কর্মক্ষমতায় প্রভাব ফেলে এবং ছবি দেখাতে কিছুটা সময় লাগতে পারে।

ব্রাউজারে WebP ছবি ব্যবহারের কয়েকটি পদ্ধতি উপরে দেওয়া হলো; নিজের বাস্তব পরিস্থিতি অনুযায়ী বেছে নিতে পারেন। আমাদের অভিজ্ঞতায়, WebP ব্যবহারের পরে ছবির আকার সাধারণত 1/3-এরও বেশি কমেছে। এতে লোড হওয়ার গতি বেড়েছে এবং ব্যবহারকারীদের ডেটা খরচও কমেছে। তাই এখন থেকেই এই ফরম্যাট ব্যবহার শুরু করার জোরালো সুপারিশ করছি।