কম্পিউটার

CSS-এ ফলব্যাক সহ WebP ছবি ব্যবহার করা


একটি ওয়েবসাইটে বিপুল সংখ্যক ছবি রেন্ডার করার জন্য, ওয়েবপি ফর্ম্যাট ব্যবহার করার পরামর্শ দেওয়া হয় কারণ এটি আরও ভাল কম্প্রেশন প্রদান করে৷

অসমর্থিত ব্রাউজারগুলির জন্য ফলব্যাক প্রদান করতে আমরা উপাদান ব্যবহার করি -

<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>

আউটপুট

এটি নিম্নলিখিত ফলাফল তৈরি করবে -

CSS-এ ফলব্যাক সহ WebP ছবি ব্যবহার করা

উদাহরণ

<!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>

আউটপুট

এটি নিম্নলিখিত ফলাফল তৈরি করবে -

CSS-এ ফলব্যাক সহ WebP ছবি ব্যবহার করা


  1. সিএসএস দিয়ে স্ক্রলে ব্যাকগ্রাউন্ড ইমেজ কিভাবে পরিবর্তন করবেন?

  2. কিভাবে সিএসএস ব্যবহার করে আইকন দিয়ে একটি ফর্ম তৈরি করবেন?

  3. CSS-এ অবজেক্ট-ফিট এবং অবজেক্ট-পজিশন সহ ছবি ক্রপ করুন

  4. রেলের সাথে Tailwind CSS ব্যবহার করা