सजावट के लिए इस्तेमाल की जाने वाली ऑप्टिमाइज़ की गई इमेज दिखाना

सीएसएस की मदद से, ऑप्टिमाइज़ की गई सजावटी इमेज दिखाने से, विज़ुअल क्वालिटी से समझौता किए बिना, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. image-set() सीएसएस फ़ंक्शन का इस्तेमाल करके, ब्राउज़र को एक ही बैकग्राउंड या मास्क इमेज के लिए कई विकल्प दिए जा सकते हैं. अलग-अलग रिज़ॉल्यूशन (जैसे, 1x और 2x) के साथ-साथ, AVIF या WebP जैसे आधुनिक फ़ॉर्मैट भी तय किए जा सकते हैं. ब्राउज़र, डाइनैमिक तौर पर सबसे छोटी इमेज चुनेगा जो उपयोगकर्ता के डिवाइस के लिए सही पिक्सल डेंसिटी (हर इंच या सेंटीमीटर में पिक्सल की संख्या) उपलब्ध कराती है.

चेतावनी: अगर इमेज, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) का एलिमेंट हो सकती है (उदाहरण के लिए, कोई बड़ा हीरो बैनर), तो ध्यान रखें कि सीएसएस में image-set() के ज़रिए रेफ़रंस की गई इमेज, ब्राउज़र के प्रीलोड स्कैनर से नहीं खोजी जा सकतीं. इससे इमेज लोड होने में काफ़ी देरी हो सकती है और एलसीपी पर बुरा असर पड़ सकता है. एलसीपी कैंडिडेट के लिए, स्टैंडर्ड एचटीएमएल <img> या <picture> टैग का इस्तेमाल करें. इसके अलावा, media एट्रिब्यूट के साथ <link rel=preload> विकल्प का इस्तेमाल करके, इमेज को पहले से लोड किया जा सकता है.

लागू करना

image-set() फ़ंक्शन का इस्तेमाल वहां किया जाता है जहां सीएसएस को <image> वैल्यू की ज़रूरत होती है. आम तौर पर, इसका इस्तेमाल 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() नियम से पहले स्टैंडर्ड इमेज का एलान ज़रूर करना चाहिए. प्रोग्रेसिव एन्हांसमेंट की यह रणनीति, सीएसएस के कैस्केडिंग नेचर पर निर्भर करती है: जिन नियमों का इस्तेमाल नहीं किया जा सकता उन्हें अनदेखा कर दिया जाता है.

.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
  );
}