ইমেজমিন গ্রান্ট প্লাগইন সেটআপ করুন
এই সমস্যাটিতে ইতিমধ্যেই 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 চিত্রগুলি সর্বোত্তমভাবে সংকুচিত হয়েছে কিনা।
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
. - আপনার গ্লিচের লাইভ সংস্করণে লাইটহাউস পারফরম্যান্স অডিট (বাতিঘর > বিকল্প > পারফরম্যান্স) চালান এবং যাচাই করুন যে "দক্ষভাবে ছবি এনকোড করুন" অডিট পাস হয়েছে।
সফলতার ! আপনি আপনার পৃষ্ঠার চিত্রগুলিকে সর্বোত্তমভাবে সংকুচিত করতে ইমেজমিন ব্যবহার করেছেন৷