रिज़ॉल्यूशन के हिसाब से ऑप्टिमाइज़ किए गए सूडो एलिमेंट

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

लागू करना

image-set() फ़ंक्शन का इस्तेमाल, सीधे तौर पर किसी सूडो-एलिमेंट की content प्रॉपर्टी में या उसकी background-image प्रॉपर्टी में (content: "" सेट करते समय) किया जा सकता है. ध्यान दें कि type() के ज़रिए इमेज फ़ॉर्मैट और रिज़ॉल्यूशन (जैसे, 1x या 2x), दोनों देने से सबसे अच्छे नतीजे मिलते हैं. हालांकि, ये दोनों आर्ग्युमेंट ज़रूरी नहीं हैं.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

फ़ॉलबैक रणनीतियां

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

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}