उच्च‑DPR युग की रेस्पॉन्सिव इमेज設計 और image-set का उपयोग 2025

प्रकाशित: 22 सित॰ 2025 · पढ़ने का समय: 1 मि. · Unified Image Tools संपादकीय

“स्पष्ट” और “फ़ालतू ट्रांसफ़र नहीं” — यह srcset/sizes और CSS image-set() की設計 से तय होता है।

TL;DR

स्थिर चौड़ाई वाले तत्व → x नोटेशन (1x/2x)। बदलती चौड़ाई वाले तत्व → w नोटेशन + sizes
टेक्स्ट बैकग्राउंड/हीरो → CSS image-set() से DPR के अनुसार切替
बिटरेट की ऊपरी सीमा तय करें; उच्च घनत्व पर भी अतिरिक्‍त ट्रांसफ़र से बचें
LCP उम्मीदवार → fetchpriority="high"

आंतरिक लिंक: INP‑केंद्रित इमेज डिलीवरी 2025 — decode/priority/स्क्रिप्ट समन्वय से अनुभव सुरक्षित रखें, 2025 में इमेज प्राथमिकता और प्रीलोड

त्वरित उपयोग‑मार्गदर्शिका

स्थिर कार्ड/थंब: srcset="... 1x, ... 2x"
हीरो/फ्लेक्सिबल लेआउट: srcset="... 800w, ... 1200w" + sizes
CSS बैकग्राउंड: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

कार्यान्वयन उदाहरण

<img
  src="/imgs/card@1x.avif"
  srcset="/imgs/card@1x.avif 1x, /imgs/card@2x.avif 2x"
  width="320" height="200" alt="कार्ड"
  decoding="async" loading="lazy"
/>

<!-- फ्लेक्सिबल लेआउट: w+sizes -->
<img
  src="/imgs/hero-1200.avif"
  srcset="/imgs/hero-800.avif 800w, /imgs/hero-1200.avif 1200w, /imgs/hero-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high"
  alt="हीरो"
/>

.hero {
  background-image: image-set(
    url('/imgs/cover@1x.avif') 1x,
    url('/imgs/cover@2x.avif') 2x
  );
  background-size: cover;
}

सामान्य त्रुटियाँ

sizes को हमेशा 100vw करना → आवश्यक से बड़ी इमेज चुनी जाती है, बैंडविड्थ व्यर्थ
2x का बिटरेट 1x जितना रखना → फ़ाइल फुलना; PSNR/SSIM से गुणवत्ता प्रबंधन करें
CSS बैकग्राउंड में 1x/2x न देना → टेक्स्ट धुंधला/भारी लगता है