কেন আপনি যত্ন করা উচিত?
WebP ছবিগুলি তাদের JPEG এবং PNG পার্টনারের থেকে ছোট - সাধারণত ফাইলের আকারে 25-35% হ্রাসের মাত্রায়। এটি পৃষ্ঠার আকার হ্রাস করে এবং কর্মক্ষমতা উন্নত করে।
- YouTube খুঁজে পেয়েছে যে WebP থাম্বনেইলে স্যুইচ করার ফলে 10% দ্রুত পৃষ্ঠা লোড হয়েছে ৷
- Facebook যখন WebP ব্যবহারে স্যুইচ করে তখন JPEG-এর জন্য 25-35% ফাইল সাইজ সঞ্চয় এবং PNGs-এর জন্য 80% ফাইল সাইজ সেভিং অনুভব করে ।
WebP হল JPEG, PNG, এবং GIF ছবির জন্য একটি চমৎকার প্রতিস্থাপন। উপরন্তু, WebP উভয় ক্ষতিহীন এবং ক্ষতিকর কম্প্রেশন অফার করে। লসলেস কম্প্রেশনে কোনো ডাটা নষ্ট হয় না। ক্ষতিকারক কম্প্রেশন ফাইলের আকার হ্রাস করে, তবে সম্ভবত ছবির গুণমান হ্রাস করার খরচে।
ছবিগুলিকে WebP-এ রূপান্তর করুন
লোকেরা সাধারণত তাদের ছবিগুলিকে WebP-এ রূপান্তর করার জন্য নিম্নলিখিত পদ্ধতিগুলির মধ্যে একটি ব্যবহার করে: cwebp কমান্ড-লাইন টুল বা Imagemin WebP প্লাগইন (npm প্যাকেজ)। আপনার প্রোজেক্ট যদি বিল্ড স্ক্রিপ্ট বা বিল্ড টুল ব্যবহার করে (যেমন ওয়েবপ্যাক বা গুলপ) তাহলে ইমেজমিন ওয়েবপি প্লাগইনটি সাধারণত সবচেয়ে ভালো পছন্দ, যেখানে সিএলআই সাধারণ প্রজেক্টের জন্য একটি ভাল পছন্দ বা যদি আপনাকে শুধুমাত্র একবার ইমেজ কনভার্ট করতে হয়।
আপনি যখন ছবিগুলিকে WebP-এ রূপান্তর করেন, তখন আপনার কাছে বিভিন্ন ধরণের কম্প্রেশন সেটিংস সেট করার বিকল্প থাকে—কিন্তু বেশিরভাগ লোকের জন্য আপনাকে শুধুমাত্র যে জিনিসটির যত্ন নিতে হবে তা হল গুণমান সেটিং৷ আপনি 0 (সবচেয়ে খারাপ) থেকে 100 (সর্বোত্তম) একটি মানের স্তর নির্দিষ্ট করতে পারেন। এটির সাথে খেলা করা মূল্যবান, আপনার প্রয়োজনের জন্য চিত্রের গুণমান এবং ফাইলের আকারের মধ্যে কোন স্তরটি সঠিক ট্রেডঅফ তা খুঁজে বের করুন৷
cwebp ব্যবহার করুন
cwebp এর ডিফল্ট কম্প্রেশন সেটিংস ব্যবহার করে একটি একক ফাইল রূপান্তর করুন:
cwebp images/flower.jpg -o images/flower.webp
50 এর মানের স্তর ব্যবহার করে একটি একক ফাইল রূপান্তর করুন:
cwebp -q 50 images/flower.jpg -o images/flower.webp
একটি ডিরেক্টরিতে সমস্ত ফাইল রূপান্তর করুন:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
ইমেজমিন ব্যবহার করুন
ইমেজমিন ওয়েবপি প্লাগইনটি নিজে থেকে বা আপনার প্রিয় বিল্ড টুল (ওয়েবপ্যাক/গাল্প/গ্রান্ট/ইত্যাদি) দিয়ে ব্যবহার করা যেতে পারে। এটি সাধারণত একটি বিল্ড স্ক্রিপ্ট বা আপনার বিল্ড টুলের জন্য কনফিগারেশন ফাইলে কোডের 10 লাইন যোগ করে। Webpack , Gulp , এবং Grunt- এর জন্য এটি কীভাবে করা যায় তার উদাহরণ এখানে রয়েছে।
আপনি যদি এই বিল্ড টুলগুলির মধ্যে একটি ব্যবহার না করেন তবে আপনি নিজেই একটি নোড স্ক্রিপ্ট হিসাবে ইমেজমিন ব্যবহার করতে পারেন। এই স্ক্রিপ্টটি images ডিরেক্টরিতে ফাইলগুলিকে রূপান্তর করবে এবং compressed_images ডিরেক্টরিতে সেভ করবে।
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
WebP ছবি পরিবেশন করুন
যদি আপনার সাইট শুধুমাত্র WebP সামঞ্জস্যপূর্ণ ব্রাউজার সমর্থন করে, তাহলে আপনি পড়া বন্ধ করতে পারেন। অন্যথায়, নতুন ব্রাউজারগুলিতে WebP এবং পুরানো ব্রাউজারগুলিতে একটি ফলব্যাক চিত্র পরিবেশন করুন:
আগে: html <img src="flower.jpg" alt="">
এর পরে: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>
<picture> , <source> , এবং <img> ট্যাগগুলি, একে অপরের সাপেক্ষে কীভাবে অর্ডার করা হয় তা সহ, সমস্ত এই চূড়ান্ত ফলাফল অর্জনের জন্য যোগাযোগ করে।
<picture>
<picture> ট্যাগ শূন্য বা তার বেশি <source> ট্যাগ এবং একটি <img> ট্যাগের জন্য একটি মোড়ক প্রদান করে।
<source>
<source> ট্যাগ একটি মিডিয়া সম্পদ নির্দিষ্ট করে।
ব্রাউজারটি প্রথম তালিকাভুক্ত উৎস ব্যবহার করে যা এটি সমর্থন করে এমন একটি বিন্যাসে রয়েছে। যদি ব্রাউজারটি <source> ট্যাগের তালিকাভুক্ত কোনো ফর্ম্যাটকে সমর্থন না করে, তাহলে এটি <img> ট্যাগ দ্বারা নির্দিষ্ট করা ছবি লোড করার জন্য ফিরে আসে।
<img>
<img> ট্যাগ হল এই কোডটি এমন ব্রাউজারগুলিতে কাজ করে যা <picture> ট্যাগ সমর্থন করে না। যদি একটি ব্রাউজার <picture> ট্যাগ সমর্থন না করে, তাহলে এটি সমর্থন করে না এমন ট্যাগগুলিকে উপেক্ষা করবে। এইভাবে, এটি শুধুমাত্র <img src="flower.jpg" alt=""> ট্যাগটি "দেখে" এবং সেই ছবিটি লোড করে৷
HTTP Accept শিরোনাম পড়া
যদি আপনার কাছে একটি অ্যাপ্লিকেশন ব্যাক এন্ড বা ওয়েব সার্ভার থাকে যা আপনাকে অনুরোধগুলি পুনরায় লেখার অনুমতি দেয়, আপনি HTTP Accept হেডারের মান পড়তে পারেন, যা বিজ্ঞাপন দেবে কোন বিকল্প চিত্র বিন্যাসগুলি সমর্থিত:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
এই অনুরোধের শিরোনামটি পড়া এবং এর বিষয়বস্তুর উপর ভিত্তি করে প্রতিক্রিয়াটি পুনরায় লেখার ফলে আপনার চিত্র মার্কআপকে সরল করার সুবিধা রয়েছে। <picture> মার্কআপ অনেক উত্সের সাথে বেশ দীর্ঘ হতে পারে। নীচে একটি Apache mod_rewrite নিয়ম যা WebP বিকল্প পরিবেশন করতে পারে:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
আপনি যদি এই পথে যান, তাহলে আপনাকে HTTP Vary প্রতিক্রিয়া শিরোনাম সেট করতে হবে যাতে ক্যাশে বুঝতে পারে যে চিত্রটি বিভিন্ন ধরনের সামগ্রীর সাথে পরিবেশন করা হতে পারে:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
উপরের পুনঃলিখনের নিয়মটি যেকোন অনুরোধ করা JPEG বা PNG ছবির একটি WebP সংস্করণ খুঁজবে। যদি একটি WebP বিকল্প পাওয়া যায়, তাহলে এটি যথাযথ Content-Type শিরোনাম দিয়ে পরিবেশন করা হবে। এটি আপনাকে স্বয়ংক্রিয় WebP সমর্থন সহ নিম্নলিখিতগুলির মতো চিত্র মার্কআপ ব্যবহার করার অনুমতি দেবে:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP ব্যবহার যাচাই করুন
আপনার সাইটের সমস্ত ছবি WebP ব্যবহার করে পরিবেশিত হচ্ছে কিনা তা যাচাই করতে Lighthouse ব্যবহার করা যেতে পারে। লাইটহাউস পারফরমেন্স অডিট চালান ( লাইটহাউস > বিকল্প > পারফরম্যান্স ) এবং পরবর্তী-জেনার ফরম্যাট অডিটে পরিবেশন চিত্রগুলির ফলাফলগুলি সন্ধান করুন৷ Lighthouse WebP-এ পরিবেশন করা হচ্ছে না এমন কোনো চিত্রের তালিকা করবে।
,
কেন আপনি যত্ন করা উচিত?
WebP ছবিগুলি তাদের JPEG এবং PNG পার্টনারের থেকে ছোট - সাধারণত ফাইলের আকারে 25-35% হ্রাসের মাত্রায়। এটি পৃষ্ঠার আকার হ্রাস করে এবং কর্মক্ষমতা উন্নত করে।
- YouTube খুঁজে পেয়েছে যে WebP থাম্বনেইলে স্যুইচ করার ফলে 10% দ্রুত পৃষ্ঠা লোড হয়েছে ৷
- Facebook যখন WebP ব্যবহারে স্যুইচ করে তখন JPEG-এর জন্য 25-35% ফাইল সাইজ সঞ্চয় এবং PNGs-এর জন্য 80% ফাইল সাইজ সেভিং অনুভব করে ।
WebP হল JPEG, PNG, এবং GIF ছবির জন্য একটি চমৎকার প্রতিস্থাপন। উপরন্তু, WebP উভয় ক্ষতিহীন এবং ক্ষতিকর কম্প্রেশন অফার করে। লসলেস কম্প্রেশনে কোনো ডাটা নষ্ট হয় না। ক্ষতিকারক কম্প্রেশন ফাইলের আকার হ্রাস করে, তবে সম্ভবত ছবির গুণমান হ্রাস করার খরচে।
ছবিগুলিকে WebP-এ রূপান্তর করুন
লোকেরা সাধারণত তাদের ছবিগুলিকে WebP-এ রূপান্তর করার জন্য নিম্নলিখিত পদ্ধতিগুলির মধ্যে একটি ব্যবহার করে: cwebp কমান্ড-লাইন টুল বা Imagemin WebP প্লাগইন (npm প্যাকেজ)। আপনার প্রোজেক্ট যদি বিল্ড স্ক্রিপ্ট বা বিল্ড টুল ব্যবহার করে (যেমন ওয়েবপ্যাক বা গুলপ) তাহলে ইমেজমিন ওয়েবপি প্লাগইনটি সাধারণত সবচেয়ে ভালো পছন্দ, যেখানে সিএলআই সাধারণ প্রজেক্টের জন্য একটি ভাল পছন্দ বা যদি আপনাকে শুধুমাত্র একবার ইমেজ কনভার্ট করতে হয়।
আপনি যখন ছবিগুলিকে WebP-এ রূপান্তর করেন, তখন আপনার কাছে বিভিন্ন ধরণের কম্প্রেশন সেটিংস সেট করার বিকল্প থাকে—কিন্তু বেশিরভাগ লোকের জন্য আপনাকে শুধুমাত্র যে জিনিসটির যত্ন নিতে হবে তা হল গুণমান সেটিং৷ আপনি 0 (সবচেয়ে খারাপ) থেকে 100 (সর্বোত্তম) একটি মানের স্তর নির্দিষ্ট করতে পারেন। এটির সাথে খেলা করা মূল্যবান, আপনার প্রয়োজনের জন্য চিত্রের গুণমান এবং ফাইলের আকারের মধ্যে কোন স্তরটি সঠিক ট্রেডঅফ তা খুঁজে বের করুন৷
cwebp ব্যবহার করুন
cwebp এর ডিফল্ট কম্প্রেশন সেটিংস ব্যবহার করে একটি একক ফাইল রূপান্তর করুন:
cwebp images/flower.jpg -o images/flower.webp
50 এর মানের স্তর ব্যবহার করে একটি একক ফাইল রূপান্তর করুন:
cwebp -q 50 images/flower.jpg -o images/flower.webp
একটি ডিরেক্টরিতে সমস্ত ফাইল রূপান্তর করুন:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
ইমেজমিন ব্যবহার করুন
ইমেজমিন ওয়েবপি প্লাগইনটি নিজে থেকে বা আপনার প্রিয় বিল্ড টুল (ওয়েবপ্যাক/গাল্প/গ্রান্ট/ইত্যাদি) দিয়ে ব্যবহার করা যেতে পারে। এটি সাধারণত একটি বিল্ড স্ক্রিপ্ট বা আপনার বিল্ড টুলের জন্য কনফিগারেশন ফাইলে কোডের 10 লাইন যোগ করে। Webpack , Gulp , এবং Grunt- এর জন্য এটি কীভাবে করা যায় তার উদাহরণ এখানে রয়েছে।
আপনি যদি এই বিল্ড টুলগুলির মধ্যে একটি ব্যবহার না করেন তবে আপনি নিজেই একটি নোড স্ক্রিপ্ট হিসাবে ইমেজমিন ব্যবহার করতে পারেন। এই স্ক্রিপ্টটি images ডিরেক্টরিতে ফাইলগুলিকে রূপান্তর করবে এবং compressed_images ডিরেক্টরিতে সেভ করবে।
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
WebP ছবি পরিবেশন করুন
যদি আপনার সাইট শুধুমাত্র WebP সামঞ্জস্যপূর্ণ ব্রাউজার সমর্থন করে, তাহলে আপনি পড়া বন্ধ করতে পারেন। অন্যথায়, নতুন ব্রাউজারগুলিতে WebP এবং পুরানো ব্রাউজারগুলিতে একটি ফলব্যাক চিত্র পরিবেশন করুন:
আগে: html <img src="flower.jpg" alt="">
এর পরে: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>
<picture> , <source> , এবং <img> ট্যাগগুলি, একে অপরের সাপেক্ষে কীভাবে অর্ডার করা হয় তা সহ, সমস্ত এই চূড়ান্ত ফলাফল অর্জনের জন্য যোগাযোগ করে।
<picture>
<picture> ট্যাগ শূন্য বা তার বেশি <source> ট্যাগ এবং একটি <img> ট্যাগের জন্য একটি মোড়ক প্রদান করে।
<source>
<source> ট্যাগ একটি মিডিয়া সম্পদ নির্দিষ্ট করে।
ব্রাউজারটি প্রথম তালিকাভুক্ত উৎস ব্যবহার করে যা এটি সমর্থন করে এমন একটি বিন্যাসে রয়েছে। যদি ব্রাউজারটি <source> ট্যাগের তালিকাভুক্ত কোনো ফর্ম্যাটকে সমর্থন না করে, তাহলে এটি <img> ট্যাগ দ্বারা নির্দিষ্ট করা ছবি লোড করার জন্য ফিরে আসে।
<img>
<img> ট্যাগ হল এই কোডটি এমন ব্রাউজারগুলিতে কাজ করে যা <picture> ট্যাগ সমর্থন করে না। যদি একটি ব্রাউজার <picture> ট্যাগ সমর্থন না করে, তাহলে এটি সমর্থন করে না এমন ট্যাগগুলিকে উপেক্ষা করবে। এইভাবে, এটি শুধুমাত্র <img src="flower.jpg" alt=""> ট্যাগটি "দেখে" এবং সেই ছবিটি লোড করে৷
HTTP Accept শিরোনাম পড়া
যদি আপনার কাছে একটি অ্যাপ্লিকেশন ব্যাক এন্ড বা ওয়েব সার্ভার থাকে যা আপনাকে অনুরোধগুলি পুনরায় লেখার অনুমতি দেয়, আপনি HTTP Accept হেডারের মান পড়তে পারেন, যা বিজ্ঞাপন দেবে কোন বিকল্প চিত্র বিন্যাসগুলি সমর্থিত:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
এই অনুরোধের শিরোনামটি পড়া এবং এর বিষয়বস্তুর উপর ভিত্তি করে প্রতিক্রিয়াটি পুনরায় লেখার ফলে আপনার চিত্র মার্কআপকে সরল করার সুবিধা রয়েছে। <picture> মার্কআপ অনেক উত্সের সাথে বেশ দীর্ঘ হতে পারে। নীচে একটি Apache mod_rewrite নিয়ম যা WebP বিকল্প পরিবেশন করতে পারে:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
আপনি যদি এই পথে যান, তাহলে আপনাকে HTTP Vary প্রতিক্রিয়া শিরোনাম সেট করতে হবে যাতে ক্যাশে বুঝতে পারে যে চিত্রটি বিভিন্ন ধরনের সামগ্রীর সাথে পরিবেশন করা হতে পারে:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
উপরের পুনঃলিখনের নিয়মটি যেকোন অনুরোধ করা JPEG বা PNG ছবির একটি WebP সংস্করণ খুঁজবে। যদি একটি WebP বিকল্প পাওয়া যায়, তাহলে এটি যথাযথ Content-Type শিরোনাম দিয়ে পরিবেশন করা হবে। এটি আপনাকে স্বয়ংক্রিয় WebP সমর্থন সহ নিম্নলিখিতগুলির মতো চিত্র মার্কআপ ব্যবহার করার অনুমতি দেবে:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP ব্যবহার যাচাই করুন
আপনার সাইটের সমস্ত ছবি WebP ব্যবহার করে পরিবেশিত হচ্ছে কিনা তা যাচাই করতে Lighthouse ব্যবহার করা যেতে পারে। লাইটহাউস পারফরমেন্স অডিট চালান ( লাইটহাউস > বিকল্প > পারফরম্যান্স ) এবং পরবর্তী-জেনার ফরম্যাট অডিটে পরিবেশন চিত্রগুলির ফলাফলগুলি সন্ধান করুন৷ Lighthouse WebP-এ পরিবেশন করা হচ্ছে না এমন কোনো চিত্রের তালিকা করবে।