ওয়েবসাইটে বড় পরিমাণ ইমেজ রেন্ডার করার জন্য webp ফরম্যাট ব্যবহার করা উপযুক্ত কারণ এটি আরও ভালো কমপ্রেশন প্রদান করে।
অসমর্থিত ব্রাউজারগুলির জন্য ফলব্যাক প্রদান করতে আমরা <picture> এলিমেন্ট ব্যবহার করি −
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
নিচের উদাহরণগুলো এই ফলব্যাকটি প্রদর্শন করে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> * { margin: 2%; } </style> </head> <body> <picture> <source srcset="sky.webp"> <img src="sky.jpg" /> </picture> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
উদাহরণ
<!DOCTYPE html> <html> <head> <style> * { margin: 10px; } </style> </head> <body> <picture> <source srcset="tree.webp" type="image/webp" /> <source srcset="tree.jpg" type="image/jpeg" /> <img src="tree.jpg" /> </picture> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
