অপ্টিমাইজ করা সাজানো ছবি ডেলিভার করুন

CSS-এর মাধ্যমে অপ্টিমাইজ করা আলঙ্কারিক ছবি ডেলিভার করলে ভিজ্যুয়াল কোয়ালিটি বজায় রেখেই পারফর্ম্যান্স উন্নত হয়। image-set() CSS ফাংশন ব্যবহার করে, আপনি ব্রাউজারকে একটি ব্যাকগ্রাউন্ড বা মাস্ক ইমেজের জন্য একাধিক বিকল্প প্রদান করতে পারেন। আপনি বিভিন্ন রেজোলিউশনের (যেমন 1x এবং 2x) পাশাপাশি আধুনিক ফর্ম্যাট (যেমন AVIF বা WebP) নির্দিষ্ট করতে পারেন। ব্রাউজারটি ডায়নামিকভাবে সবচেয়ে ছোট মানানসই ছবি বেছে নেবে যা ব্যবহারকারীর ডিভাইসের জন্য উপযুক্ত পিক্সেল ডেনসিটি প্রদান করে।

সতর্কতা: ছবিটি যদি লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এলিমেন্ট (যেমন, একটি বড় হিরো ব্যানার) হওয়ার সম্ভাবনা থাকে, তাহলে মনে রাখবেন যে image-set() এর মাধ্যমে CSS-এ রেফারেন্স করা ছবিগুলি ব্রাউজারের প্রিলোড স্ক্যানার দ্বারা খুঁজে পাওয়া যায় না। এর ফলে ছবি লোড হতে অনেক বেশি সময় লাগতে পারে এবং LCP-এর উপর খারাপ প্রভাব পড়তে পারে। LCP ক্যান্ডিডেটের জন্য, এর পরিবর্তে স্ট্যান্ডার্ড HTML <img> বা <picture> ট্যাগ ব্যবহার করার কথা বিবেচনা করুন অথবা বিকল্প হিসেবে, media অ্যাট্রিবিউট সহ <link rel=preload> বিকল্প ব্যবহার করে ছবি প্রিলোড করুন।

প্রয়োগ

CSS যেখানেই <image> ভ্যালু আশা করে, সেখানেই image-set() ফাংশন ব্যবহার করা হয়, সাধারণত background-image, content বা mask-image-এ। মনে রাখবেন, type()-এর মাধ্যমে ছবির ফর্ম্যাট এবং রেজোলিউশন (যেমন 1x বা 2x) উভয়ই প্রদান করলে সেরা ফলাফল পাওয়া যায়, তবে এই দুটি আর্গুমেন্টই ঐচ্ছিক।

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

ফলব্যাক স্ট্র্যাটেজি

পুরনো ব্রাউজার যেগুলি image-set() ফাংশন সমর্থন করে না, সেগুলির জন্য আপনাকে image-set() নিয়মের আগে একটি স্ট্যান্ডার্ড ইমেজ ডিক্লারেশন অবশ্যই প্রদান করতে হবে। এই প্রোগ্রেসিভ এনহ্যান্সমেন্ট স্ট্র্যাটেজি CSS-এর ক্যাসকেডিং প্রকৃতির উপর নির্ভর করে: কাজ করে না এমন নিয়ম উপেক্ষা করা হয়।

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}