ইমেজ কম্প্রেস করতে Imagemin ব্যবহার করুন

Katie Hempenius

আপনার কেন এ বিষয়ে মাথা ঘামানো উচিত?

অসংকুচিত ছবি আপনার পেজকে অপ্রয়োজনীয় বাইট দিয়ে স্ফীত করে তোলে। যেহেতু ছবি Largest Contentful Paint (LCP)-এর জন্য উপযুক্ত হতে পারে, তাই এই অপ্রয়োজনীয় বাইটগুলো ছবির রিসোর্স লোড হওয়ার সময়কাল বাড়িয়ে দিতে পারে, যার ফলে LCP-এর সময়ও দীর্ঘতর হতে পারে।

ডান দিকের ছবিটি বাম দিকেরটির চেয়ে ৪০% ছোট, তবুও সাধারণ ব্যবহারকারীর কাছে এটি সম্ভবত একই রকম দেখাবে।

পরিমাপ

ছবি কম্প্রেস করে পেজ লোড উন্নত করার সুযোগগুলো পরীক্ষা করতে লাইটহাউস চালান। এই সুযোগগুলো "Efficiently encode images" এর অধীনে তালিকাভুক্ত করা হয়েছে:

ইমেজমিন

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

প্লাগইন

ইমেজমিন 'প্লাগইন'-এর উপর ভিত্তি করে তৈরি। একটি প্লাগইন হলো একটি এনপিএম প্যাকেজ যা একটি নির্দিষ্ট ইমেজ ফরম্যাটকে কম্প্রেস করে (যেমন 'mozjpeg' জেপিইজি কম্প্রেস করে)। জনপ্রিয় ইমেজ ফরম্যাটগুলোর জন্য বেছে নেওয়ার মতো একাধিক প্লাগইন থাকতে পারে।

একটি প্লাগইন বেছে নেওয়ার সময় সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো এটি 'লসি' (lossy) নাকি 'লসলেস' (lossless)। লসলেস কম্প্রেশনে কোনো ডেটা নষ্ট হয় না। লসি কম্প্রেশন ফাইলের আকার কমায়, কিন্তু এর ফলে ছবির গুণমান কমে যেতে পারে। যদি কোনো প্লাগইনে এটি 'লসি' নাকি 'লসলেস' তা উল্লেখ না থাকে, তবে আপনি এর এপিআই (API) দেখে তা বুঝতে পারবেন: যদি আপনি আউটপুটের ছবির গুণমান নির্দিষ্ট করে দিতে পারেন, তাহলে এটি 'লসি'।

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

ইমেজমিন সিএলআই

ইমেজমিন সিএলআই পাঁচটি ভিন্ন প্লাগইনের সাথে কাজ করে: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, এবং imagemin-svgo। ইনপুট ইমেজের ফরম্যাটের উপর ভিত্তি করে ইমেজমিন উপযুক্ত প্লাগইনটি ব্যবহার করে।

'images/' ডিরেক্টরিতে থাকা ছবিগুলো কম্প্রেস করে একই ডিরেক্টরিতে সেভ করতে, নিম্নলিখিত কমান্ডটি চালান (এটি মূল ফাইলগুলোকে ওভাররাইট করবে):

$ imagemin images/* --out-dir=images

ইমেজমিন এনপিএম মডিউল

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

আপনি ইমেজমিনকে একটি নোড স্ক্রিপ্ট হিসেবেও আলাদাভাবে ব্যবহার করতে পারেন। এই কোডটি 'imagemin-mozjpeg' প্লাগইন ব্যবহার করে JPEG ফাইলগুলোকে কোয়ালিটি ৫০-এ কম্প্রেস করে ('০' হলো সবচেয়ে খারাপ; '১০০' হলো সবচেয়ে ভালো):

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();