এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

গ্রান্টের সাথে ইমেজমিন ব্যবহার করা

Katie Hempenius

ইমেজমিন গ্রান্ট প্লাগইন সেটআপ করুন

এই সমস্যাটিতে ইতিমধ্যেই grunt , grunt-cli , এবং grunt-contrib-imagemin প্লাগইন রয়েছে৷ ইমেজমিনের জন্য কনফিগারেশন যোগ করতে, আপনাকে আপনার gruntfile.js ফাইলটি সম্পাদনা করতে হবে।

প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
gruntfile.js এ, এই কোড ব্লকের সাথে //Add configuration here :

imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

এই কোড ব্লক গ্রান্টকে বলে যে কোন ফাইলগুলি ইমেজমিনের সাথে সংকুচিত করা উচিত।

dynamic ইঙ্গিত করে যে সংকুচিত করার জন্য ফাইলগুলির তালিকাটি নির্দিষ্ট ফাইল প্যাটার্নের সাথে ফাইলের নামগুলি মেলে গতিশীলভাবে তৈরি করা হবে।
ফাইল প্যাটার্ন {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} images/ ডিরেক্টরির সমস্ত JPEG এবং PNG ছবির সাথে মিলবে৷

grunt.registerTask(...) এর আগে এই লাইনটি যোগ করে ইমেজমিন টাস্ক লোড করুন :

grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);

সবশেষে, /* list plugins here */ 'imagemin' দিয়ে মন্তব্য করুন। সেই লাইনটি এখন এইরকম হওয়া উচিত:

grunt.registerTask('default', ['imagemin']);

✔︎ চেক ইন

সম্পূর্ণ gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

আপনার ইমেজমিন কনফিগারেশন কাস্টমাইজ করুন

imagemin-pngquant হল কম্প্রেশন কোয়ালিটি লেভেল নির্দিষ্ট করার জন্য একটি প্লাগইন। আমরা ইতিমধ্যেই package.json ফাইলে এই প্রকল্পে imagemin-pngquant যোগ করেছি যাতে আপনি এটিকে আপনার PNG কম্প্রেস করতে ব্যবহার করতে পারেন। এটি ব্যবহার করতে, প্লাগইনটি ঘোষণা করুন এবং আপনার গ্রন্টফাইলে একটি কম্প্রেশন মানের স্তর নির্দিষ্ট করুন।

আপনার gruntfile.js এর উপরে এই লাইনটি যোগ করে imagemin-pngquant প্লাগইন ঘোষণা করুন:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

imagemin অবজেক্টে একটি options প্রপার্টি যোগ করে PNG ইমেজ কম্প্রেস করার জন্য সেটিংস যোগ করুন। যে options সম্পত্তি এই মত হওয়া উচিত:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

এই কোডটি ইমেজমিনকে Pngquant প্লাগইন ব্যবহার করে PNG কম্প্রেস করতে বলে। quality ক্ষেত্রটি কম্প্রেশন স্তর নির্ধারণ করতে মানগুলির একটি min এবং max পরিসর ব্যবহার করে—0 সর্বনিম্ন এবং 1 সর্বোচ্চ। সমস্ত ছবিকে 50% গুণমানে সংকুচিত করতে বাধ্য করতে, ন্যূনতম এবং সর্বোচ্চ উভয় মান হিসাবে 0.5 পাস করুন৷

✔︎ চেক ইন

আপনার gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

কিন্তু JPEGs সম্পর্কে কি? প্রজেক্টে JPEG ইমেজও রয়েছে, তাই সেগুলি কীভাবে সংকুচিত হয় তাও আপনার উল্লেখ করা উচিত।

আপনার ইমেজমিন কনফিগারেশন কাস্টমাইজ করুন (চলবে)

JPEG ছবি সংকুচিত করতে imagemin-mozjpeg প্লাগইনটি ব্যবহার করুন, যা ইতিমধ্যেই আপনার জন্য ইনস্টল করা হয়েছে।

আপনার gruntfile.js শীর্ষে এই লাইনটি রেখে imagemin-mozjpeg প্লাগইন ঘোষণা করুন।

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');

এরপর, options অবজেক্টের অ্যারেতে mozjpeg({quality: 50}) যোগ করুন। সেই অ্যারেটি এখন এইরকম হওয়া উচিত:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ চেক ইন

আপনার gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Grunt চালান এবং Lighthouse এর সাথে ফলাফল যাচাই করুন

টুল বাটনে ক্লিক করুন।
তারপর কনসোল বোতামে ক্লিক করুন।
কনসোলে নিম্নলিখিত কমান্ডটি টাইপ করে Grunt চালান:

grunt

Grunt সম্পূর্ণ হলে আপনি কনসোলে এই মত একটি বার্তা দেখতে হবে:

Minified 6 images (saved 667 kB - 66.5%)

হুরে! এই ফলাফলগুলি অনেক ভাল।

সবশেষে, আপনি যে পরিবর্তনগুলি করেছেন তা যাচাই করতে লাইটহাউস ব্যবহার করা একটি ভাল ধারণা৷ লাইটহাউসের "দক্ষভাবে এনকোড ইমেজ" কর্মক্ষমতা নিরীক্ষা আপনাকে জানাবে যে আপনার পৃষ্ঠার JPEG চিত্রগুলি সর্বোত্তমভাবে সংকুচিত হয়েছে কিনা।

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
আপনার গ্লিচের লাইভ সংস্করণে লাইটহাউস পারফরম্যান্স অডিট (বাতিঘর > বিকল্প > পারফরম্যান্স) চালান এবং যাচাই করুন যে "দক্ষভাবে ছবি এনকোড করুন" অডিট পাস হয়েছে।

লাইটহাউসে 'দক্ষভাবে এনকোড ইমেজ' অডিট পাস করা

সফলতার ! আপনি আপনার পৃষ্ঠার চিত্রগুলিকে সর্বোত্তমভাবে সংকুচিত করতে ইমেজমিন ব্যবহার করেছেন৷

Katie Hempenius

ইমেজমিন গ্রান্ট প্লাগইন সেটআপ করুন

প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
gruntfile.js এ, এই কোড ব্লকের সাথে //Add configuration here :

imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

এই কোড ব্লক গ্রান্টকে বলে যে কোন ফাইলগুলি ইমেজমিনের সাথে সংকুচিত করা উচিত।

dynamic ইঙ্গিত করে যে সংকুচিত করার জন্য ফাইলগুলির তালিকাটি নির্দিষ্ট ফাইল প্যাটার্নের সাথে ফাইলের নামগুলি মেলে গতিশীলভাবে তৈরি করা হবে।
ফাইল প্যাটার্ন {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} images/ ডিরেক্টরির সমস্ত JPEG এবং PNG ছবির সাথে মিলবে৷

grunt.registerTask(...) এর আগে এই লাইনটি যোগ করে ইমেজমিন টাস্ক লোড করুন :

grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);

সবশেষে, /* list plugins here */ 'imagemin' দিয়ে মন্তব্য করুন। সেই লাইনটি এখন এইরকম হওয়া উচিত:

grunt.registerTask('default', ['imagemin']);

✔︎ চেক ইন

সম্পূর্ণ gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

আপনার ইমেজমিন কনফিগারেশন কাস্টমাইজ করুন

imagemin-pngquant হল কম্প্রেশন কোয়ালিটি লেভেল নির্দিষ্ট করার জন্য একটি প্লাগইন। আমরা ইতিমধ্যেই package.json ফাইলে এই প্রকল্পে imagemin-pngquant যোগ করেছি যাতে আপনি এটিকে আপনার PNG কম্প্রেস করতে ব্যবহার করতে পারেন। এটি ব্যবহার করতে, প্লাগইন ঘোষণা করুন এবং আপনার গ্রন্টফাইলে একটি কম্প্রেশন মানের স্তর নির্দিষ্ট করুন।

আপনার gruntfile.js এর উপরে এই লাইনটি যোগ করে imagemin-pngquant প্লাগইন ঘোষণা করুন:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

imagemin অবজেক্টে একটি options প্রপার্টি যোগ করে PNG ইমেজ কম্প্রেস করার জন্য সেটিংস যোগ করুন। যে options সম্পত্তি এই মত হওয়া উচিত:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

✔︎ চেক ইন

আপনার gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

আপনার ইমেজমিন কনফিগারেশন কাস্টমাইজ করুন (চলবে)

আপনার gruntfile.js শীর্ষে এই লাইনটি রেখে imagemin-mozjpeg প্লাগইন ঘোষণা করুন।

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');

এরপর, options অবজেক্টের অ্যারেতে mozjpeg({quality: 50}) যোগ করুন। সেই অ্যারেটি এখন এইরকম হওয়া উচিত:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ চেক ইন

আপনার gruntfile.js ফাইলটি এখন এইরকম হওয়া উচিত:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Grunt চালান এবং Lighthouse এর সাথে ফলাফল যাচাই করুন

টুল বাটনে ক্লিক করুন।
তারপর কনসোল বোতামে ক্লিক করুন।
কনসোলে নিম্নলিখিত কমান্ডটি টাইপ করে Grunt চালান:

grunt

Grunt সম্পূর্ণ হলে আপনি কনসোলে এই মত একটি বার্তা দেখতে হবে:

Minified 6 images (saved 667 kB - 66.5%)

হুরে! এই ফলাফলগুলি অনেক ভাল।

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
আপনার গ্লিচের লাইভ সংস্করণে লাইটহাউস পারফরম্যান্স অডিট (বাতিঘর > বিকল্প > পারফরম্যান্স) চালান এবং যাচাই করুন যে "দক্ষভাবে ছবি এনকোড করুন" অডিট পাস হয়েছে।

লাইটহাউসে 'দক্ষভাবে এনকোড ইমেজ' অডিট পাস করা