ব্লগারে ইমেজ অপ্টিমাইজেশন সমস্যার সমাধান করবেন যেভাবে

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

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

সমস্যা সমূহ

ব্লগারে ইমেজ সম্পর্কিত যেসকল সমস্যা সাধারণত আপনারা ফেস করবেন (উপরের ছবিতে দেখুন) সেগুলো হলো-

1. Properly Size Image : আপনার ছবির মূল সাইজ ইমেজ ট্যাগের এট্রিবিউটের সাইজের চেয়ে বড় হলে এই সমস্যা দেখাবে। যেমন ধরুন আপনি width="360px" দিয়ে রেখেছেন, কিন্তু যে ইমেজটি প্রদর্শন করছেন তা 1600px এর।
2. Serve Image In Next Generation Format : এখানে বলেছে কন্টেটের ইমেজগুলো নেক্সট জেনারেশন ফরম্যাটে প্রকাশ করতে। নেক্সট জেনারেশন ফরম্যাট হলো Webp ও AVIF ফরম্যাট। এর মধ্যে Webp সবচেয়ে বেশি ব্রাউজার সাপোর্ট রয়েছে, তাই আপনাদের Webp ফরম্যাট ব্যবহার করতে পরামর্শ দিবো। এটি PNG এর মতো ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড রাখতে পারে। Webp ফরম্যাটের বড় সুবিধা হলো এটি ডেটা ট্রান্সফারের ক্ষেত্রে অনেক ভালো কম্প্রেশন প্রদান করে। অন্যদিকে PNG এর কম্প্রেশন সবচেয়ে কম এবং JPEG তুলনামূলক JPG এর চেয়ে ভালো কম্প্রেশন দেয়। আপনারা অনেকেই বিভিন্ন টুল ব্যবহার করে Webp তে ইমেজ কনভার্ট করে আপলোড করছেন কিন্তু তারপরও সেম ওয়ার্নিং দেখছেন, কিভাবে এর সমাধান করবেন তা একটু পরেই দেখাচ্ছি।
3. Defer Offscreen Image : যখনি কোনো ভিজিটর আপনার সাইটে আসে তখন সে শুধু উপরের অংশটিই দেখতে পায়। কিন্তু নিচের অংশ সে স্ক্রল করার মাধ্যমে দেখতে পায়। কাজেই আপনি যদি স্ক্রিনের যে অংশের ইমেজগুলো দেখা যাচ্ছে না ঐগুলো দেরি করে লোড করান বা যখন স্ক্রল করে ঐ অংশে আসবে তখন লোড করান তাহলে লোডিং স্পিড অনেকটাই দ্রুত যাবে।
4. Image elements have explicit width and height : এই সমস্যায় আপনাদের পড়ার কথা না, তবে তারপরও যদি এমন সমস্যা দেখেন এর অর্থ আপনার পেজে এক বা একাধিক ইমেজের Height ও Width এট্রিবিউট সেট করেন নি। তাই Height ও Width সেট করে নিন।
5. Efficiently encode images : এর অর্থ হচ্ছে আপনি কোনো অপ্টিমাইজেশন ছাড়াই ছবি আপলোড করে দিয়েছেন।

কোন ইমেজ বা ছবি সমস্যা করছে তা জানতে Opportunity -তে ডান পাশে ড্রপ ডাউনে ক্লিক করলে সেসব ইমেজের লিস্ট ওপেন হবে। (Estimated Savings বরাবর)

সমাধান

একে একে সকল সমস্যার সমাধান দিয়েছি আমি, তারপরও কোনো সমস্যার সম্মুখীন হলে কমেন্টে জানাবেন।

ইমেজ অপ্টিমাইজেশন

"Efficiently encode images" এই সমস্যার সমাধান করার জন্য পোস্টে ছবি আপলোড করার আগে ঐ ছবি Tiny PNG এই ওয়েবসাইট থেকে অপ্টিমাইজ করে নিবেন। এই সাইটে গেলে নিচের মতো পেজ আসবে



এখানে উপরে মতো পেজ আসবে, মাঝখানে আপলোড করার জায়গায় ক্লিক করে ছবি আপলোড করবেন। আপনি একসাথে সর্বোচ্চ ২০ টি ছবি আপলোড করতে পারেবন, প্রত্যেকটি সর্বোচ্চ ৫ মেগাবাইট সাইজের হতে পারবে। ছবি আপলোড করা হলে একটু পরে নিচের মতো স্ক্রিন আসবে।



আপনি চাইলে একটি একটি করে ডাউনলোড করতে পারেন অথবা Download All বাটনে ক্লিক করে একসাথে সবগুলো জিপ ফাইল আকারে ডাউনলোড করে নিতে পারবেন।

এছাড়াও অন্য কোনো ইমেজে অপ্টিমাইজেশন টুল বা এপ ব্যবহার করতে পারেন। এন্ডরয়েড ইউজাররা Photo Zip বা Photo Zip Lite এপ ব্যবহার করতে পারেন।

লেজি লোড

লেজি লোড হলো জনপ্রিয় একটি পদ্ধতি যার সাহায্যে ওয়েবপেজের অফস্ক্রিন ইমেজগুলো ডেফার বা লেজি লোডিং করানো যায়, বা দেরি করে লোড করানো যায়। এটি জাভাস্ক্রিপ্ট ভিত্তিক ইন্টারসেকশন অবসার্ভার (Intersection Observer) এর সাহায্যে তৈরি স্ক্রিপ্ট। গিটহাবে আপনি বেশ কিছু লেজি লোডার পাবেন। তবে ২-১ টা ছাড়া বাকিগুলো আমার কাছে কাজের মনে হয় নি। বেশিরভাগ লেজি লোডারই ইমেজ এসইও এর উপর বিরূপ প্রভাব ফেলে। তাছাড়া এগুলোর ইনস্টল ও ব্যবহার তুলনামূলক কঠিন ও বিরক্তিকর মনে হয়েছে আমার। তাই আমি আপনাদেরকে কিভাবে সহজ উপায়ে Defer Offscreen Image এর সমাধান করবেন তা দেখাচ্ছি। এর জন্য আপনার ইমেজ এর HTML ট্যাগে শুধু loading="lazy" এই এট্রিবিউটটি যুক্ত করবেন। যেমন-

<img src="" alt="" loading="lazy"/>

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

ইমেজ সাইজ ও ফরম্যাট

ইমেজ সাইজ ও ফরম্যাট নিয়ে কি, কেন সমস্যা হয় তা আগেই (১ ও ২ নং সমস্যা) আলোচনা করেছি। এবার দেখা যাক এর সমাধান করবেন কিভাবে? এর জন্য আমরা ব্লগারের বিল্ট-ইন ইমেজ অপ্টিমাইজেশন ফিচার ব্যবহার করবো। আপনি যখন ব্লগারে কোনো ছবি আপলোড করেন, তখন ব্লগার একটি ইউনিক ইমেজ সোর্স তৈরি করে, রাইট? আমরা ঐ লিংককে ব্লগারের ইমেজ এপিআই-এ সংঙ্গায়িত ফরম্যাট অনুযায়ী মোডিফাই করে এর সমাধান করতে পারি। ব্লগ পোষ্টে কোনো ছবি আপলোড করে, HTML View তে গেলে নিচের ছবির মতো ইমেজের সোর্স লিংক পাবেন।



ইমেজের সোর্স লিংকের স্ট্রাকচার অনেকটা নিচের মতো হবে-

নতুন
https://blogger.googleusercontent.com/img/a/AVvXsEhj7YPywBe6SsjP_vOOTcAID-WNFgmScWJhHd3JDwPYpN1LzYD_uI_cgNIlOuLyLBZjyL9Q-BENdqyE4E6zgCvh0m63QTW5wTevQZ2a3LWLskVlvb2BCXT2GWMlSet6NsQClomaJQW5LjNCkyf3WjBaVCVBBMGiEg4IIjGZXxkL3TKVIn3fHbzj4-xCmg=s320
		
পুরাতন
https://2.bp.blogspot.com/-oFHqkkh0PLI/X0U0cx9lu7I/AAAAAAAAAMs/RohZQsnbU74oGMPhke4hAFzC5XUv8iRKwCLcBGAsYHQ/s320/image15.jpg

নোট: মার্ক করা এই অংশ কেটে ফেললে বা s0 করলে একদম অরিজিনাল রেজুলেশনের ছবি প্রদর্শিত হবে।

এখানে মার্ক করা অংশে s320 দ্বারা ছবির সাইজ/রেজুলেশন নির্দেশ করা হয়েছে। আমরা চাইলে এর সাহায্যে একটি ছবি আপলোড করে একাধিক সাইজে প্রকার করতে পারব। তবে এর জন্য আমাদের srcset এট্রিবিউট ব্যবহার করতে হবে। যারা srcset সম্পর্কে জানেন না তাদের বুঝার সুবিধার্থে জানিয়ে রাখি, srcset ব্যবহার করা হয় রেসপন্সিভ ইমেজের জন্য বিভিন্ন স্ক্রিন সাইজে বিভিন্ন রেজুলেশনের ছবি ব্যবহার করার জন্য। যেমন-

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s0/image15.jpg"
  srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s320/image15.jpg 320w,
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s540/image15.jpg 540w,
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s800/image15.jpg 800w"
  alt="image15"
/>

এখানে, src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s0/image15.jpg" - পূর্ণমাপের (ফুল রেজুলেশনের) ছবি দিয়েছি এসইও কোয়ালিটি ইম্প্রুভ করার জন্য। তারপর srcset এট্রিবিউটটে বিভিন্ন স্ক্রিন সাইজের জন্য ঐ ইমেজের বিভিন্ন রেজুলেশনের ইমেজ লিংক বসিয়েছি। 320w, 540w, 800w এগুলো দ্বারা নির্দেশ করে কোন স্ক্রিন সাইজের জন্য কোন ইমেজ প্রদর্শিত হবে। আমি সাধারণত 480w, 640w, 800w, 960w, 1200w এই ব্রেকপয়েন্ট গুলো ব্যবহার করি।

এবার আসা যাক Webp ফরম্যাটে কিভাবে ছবি প্রদর্শন করবেন? আপনারা অনেকেই বিভিন্ন টুলস ব্যবহার করে Webp ফরম্যাটে ছবি আপলোড তো করছেন, কিন্তু আপলোডের পর তা JPG তে কনভার্ট হয়ে যাচ্ছে। তো Webp-তে ছবি প্রদর্শন এর জন্য কোনো টুল দিয়ে ছবি কনভার্ট করার প্রয়োজন নেই। আপনাদের ইমেজের লিংকে আবারও একটু পরিবর্তন করতে হবে।

নতুন
https://blogger.googleusercontent.com/img/a/AVvXsEhj7YPywBe6SsjP_vOOTcAID-WNFgmScWJhHd3JDwPYpN1LzYD_uI_cgNIlOuLyLBZjyL9Q-BENdqyE4E6zgCvh0m63QTW5wTevQZ2a3LWLskVlvb2BCXT2GWMlSet6NsQClomaJQW5LjNCkyf3WjBaVCVBBMGiEg4IIjGZXxkL3TKVIn3fHbzj4-xCmg=s320-rw
		
পুরাতন
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouLTjyntLvxiX81tYEPZOVu975swVhCydin1l52DGC4Y3qYxwM8Qhchyphenhyphenq2YZa4JQ7tNwjnCQgTwQEbnp3NL-mtVzsxzkxOnoD84YmE4WEeq8eoz9yEj-GBDFSC-q2kMf9gI8Eo3et1FaT/s320-rw/image15.jpg

মার্ক করা অংশে দেখুন আমি রেজুলেশন s320 এর সাথে -rw যুক্ত করে দিয়েছি। এখানে -r দ্বারা বুঝাচ্ছে আমি ইমেজটি আমি কনভার্ট করতে চাচ্ছি, আর এর পরে w দ্বারা বুঝাচ্ছে আমি কোন ফরম্যাটে, অর্থাৎ Webp তে কনভার্ট করতে চাচ্ছি। একনজরে সকল সাপোর্টেড ফরম্যাটের জন্য কী কী রুলস ব্যবহার করবেন দেখে নিন-

1. -rw দিলে ইমেজ Webp তে প্রদর্শিত হবে
2. -rp দিলে ইমেজ PNG তে প্রদর্শিত হবে
3. -rj দিলে ইমেজ JPG তে প্রদর্শিত হবে
4. -rg দিলে ইমেজ GIF তে প্রদর্শিত হবে

জাভাস্ক্রিপ্ট প্লাগিন

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

ইনস্টল প্রসেস

স্ক্রিপ্টটি ইউজ করা খুবই সোজা। প্রথমে আপনার ব্লগার ড্যাশবোর্ড থেকে Theme অশপনে যাবেন। সেখান থেকে Edit HTML এ ক্লিক করবেন। এবার এখানে একদম নিচে স্ক্রল করে গেলে </body> বা &lt;!--</body>--&gt;&lt;/body&gt; অর্থাৎ BODY ট্যাগ ক্লোজিং এর আগে নিচের কোডগুলো কপি-পেষ্ট করে দিন।

<script type='text/javascript'>
//<![CDATA[

// Auto IMG Srcset By SR

(function() {
  function createSrcSet(imageTag) {
    var source = imageTag.getAttribute('src');
    var srcSetValue = createSrcSetValue(source);
    imageTag.setAttribute("srcset", srcSetValue);
  };

  function createSrcSetValue(imageSource) {
    var result = [];
    var sourceArray = imageSource.split('/');
    var resolutions = [320, 640, 960, 1200, 1600];
    Array.prototype.forEach.call(resolutions, function(resolution, index) {
      sourceArray[7] = '=s' + resolution + '-rw';
      var url = sourceArray.join('/') + ' ' + resolution + 'w';
      var cleanUrl = url.replace("/=s", "/s").replace("//s", "=s");
      result.push(cleanUrl);
    });
    return result.join(', ');
  };
  var images = document.querySelectorAll(".Blog img");
  Array.prototype.forEach.call(images, function(image, index) {
    createSrcSet(image);
  });
})();
//]]>
</script>

বা মিনিফাইড ভার্সন ব্যবহার করতে চাইলে এটি ব্যবহার করতে পারেন

<script type='text/javascript'>
//<![CDATA[

// Auto IMG Srcset By SR

!function(){function e(t){var e,o,r=t.getAttribute("src"),r=(e=[],o=r.split("/"),Array.prototype.forEach.call([320,640,960,1200,1600],function(t,r){o[7]="=s"+t+"-rw";t=(o.join("/")+" "+t+"w").replace("/=s","/s").replace("//s","=s");e.push(t)}),e.join(", "));t.setAttribute("srcset",r)}var t=document.querySelectorAll(".Blog img");Array.prototype.forEach.call(t,function(t,r){e(t)})}();
//]]>
</script>

ইমেজ শেয়ার

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

<a href="ইমেজ লিংক" target="_blank">
  <img class="d-block mx-auto (Bootstap Class)"
    src="ইমেজ লিংক"
    width="WIDTH"
    height="HEIGHT"
    loading="lazy"
    alt="অল্টারনেট টেক্স"
    title="ইমেজ টাইটেল"
  />
</a>

আপনি চাইলে এই মার্কআপ কপি করে রাখতে পারেন এবং ইমেজ লিংক ও অনান্য ভ্যালু প্রয়োজন মতো পরিবর্তন করে বসাতে পারেন। আমি srcset ব্যবহার করছি না এবং -rw বসাই নি, কারন আমি জাভাস্ক্রিপ্ট প্লাগিনটি ব্যবহার করছি।

টেস্টিং ও রেজাল্ট

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