2025 में रेस्पॉन्सिव इमेज डिज़ाइन — srcset/sizes प्रैक्टिकल गाइड

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

translated: true परिचय

रेस्पॉन्सिव इमेज का मतलब सिर्फ “कई साइज़ रखना” नहीं है। असल बात है लेआउट के अनुरूप sizes बताना ताकि ब्राउज़र सही srcset उम्मीदवार चुन सके। यह एक ऑपरेशनल, व्यावहारिक गाइड है।

पहले sizes तय करें (कोर)

sizes बताता है: “इस शर्त में दिखने की चौड़ाई X है।” यह सही हुआ तो ब्राउज़र सही srcset चुनता है।

// एक‑कॉलम आर्टिकल लेआउट (अधिकतम 768px)
// ≤768px पर 100vw, उससे ऊपर 768px फिक्स्ड
sizes="(max-width: 768px) 100vw, 768px"

// कार्ड 2→3 कॉलम (गैप सहित प्रभावी ~46vw/~31vw)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

1.5–2× के स्टेप में प्रतिनिधि चौड़ाइयाँ संभालना आसान है। उदाहरण: 480/720/960/1280/1536।

srcset को सहारा देने वाला बिल्ड

srcset जेनरेशन ऑटोमेट करें ताकि मानवीय गलती न हो। Sharp उदाहरण:

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Next.js Image के साथ, सही sizes लिखना काफ़ी है; वितरण स्वतः होता है। विवरण: 2025 में रीसाइज़िंग डिज़ाइन — लेआउट से उल्टा सोचकर 30–70% बाइट्स बचाएँ।

LCP और प्रीलोड

हीरो जैसी LCP उम्मीदवार छवियों के लिए sizes के साथ यह सोचें:

• priority / fetchPriority="high"
• प्रीलोड: <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• ओवर‑रेज़ोल्यूशन से बचें (अपर‑बाउंड चौड़ाई × DPR का नियम मानें)

कम्प्रेशन की बुनियाद: इमेज कंप्रेशन की अंतिम रणनीति 2025 – गुणवत्ता को बनाए रखते हुए गति अनुकूलन का व्यावहारिक मार्गदर्शन।

picture और आर्ट डायरेक्शन

यदि आप आकार के अनुसार आस्पेक्ट/कम्पोज़िशन बदलना चाहते हैं, picture का प्रयोग करें:

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
  
</picture>

ध्यान दें: picture होने पर भी sizes का सिद्धांत वही है — हर मीडिया शर्त में प्रदर्शित चौड़ाई (px/vw) घोषित करें।

आइकॉन और SVG

• साधारण लोगो/आइकॉन के लिए SVG को प्राथमिकता दें — CSS रंग और मीडिया क्वेरी लचीले हैं।
• PNG चाहिए तो छोटे आकारों के लिए 1x/2x अलग srcset दें ताकि डिलीवरी कुशल हो।

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

PWA आइकॉन/मैनिफ़ेस्ट: फेविकॉन + मैनिफेस्ट पैक और फेविकॉन जेनरेटर।

आम गलतियाँ

• sizes को हमेशा 100vw पर छोड़ देना → वास्तविक ग्रिड (≈33vw) में ओवर‑डाउनलोड
• ब्रेकप्वाइंट/कॉलम बदले पर अपडेट न करना → रीडिज़ाइन के बाद अचानक भारी पेज
• बहुत सूक्ष्म चौड़ाइयाँ → कैश दक्षता घटती है, लाभ कम होता है

चेकलिस्ट (ऑप्स)

• [ ] टेम्पलेट‑वार अधिकतम चौड़ाई और DPR परिभाषित
• [ ] sizes लेआउट से मेल खाते हैं (Storybook/ब्राउज़र में माप)
• [ ] LCP इमेज पर जरूरत हो तो priority
• [ ] 3–5 प्रतिनिधि चौड़ाइयाँ पर्याप्त
• [ ] picture सचमुच चाहिए? पहले sizes से कोशिश करें

समापन के लिए: रीसाइज़िंग के समग्र वर्कफ़्लो: 2025 में रीसाइज़िंग डिज़ाइन — लेआउट से उल्टा सोचकर 30–70% बाइट्स बचाएँ; फ़ॉर्मेट चयन: फ़ॉर्मेट रूपांतरण रणनीतियाँ 2025 — WebP/AVIF/JPEG/PNG उपयोग गाइड।

डायग्नॉस्टिक्स और डिबगिंग

• DevTools Network में वास्तविक आयाम/ट्रांसफ़र जाँचें (अनुमान से मेल?)
• Elements में img का computed size और currentSrc देखें (sizes प्रभावी?)
• मोबाइल/डेस्कटॉप पर DPR बदलकर पुन: जाँच (2x/3x पर ओवर‑डाउनलोड पकड़ें)
• Performance में LCP पहचानें, preload का प्रभाव मापें

कंपोनेंट पैटर्न

• ग्रिड कार्ड कॉलम props से लेकर sizes ऑटो‑जनरेट करें
• picture + media से आर्ट डायरेक्शन; CSS ब्रेकप्वाइंट को एक जगह सिंक करें
• loading="lazy" + viewport‑in टाइमिंग ट्यून करके CLS = 0 रखें

हैंड्स‑ऑन: मौजूदा पेज का ऑडिट

1. अधिकतम प्रदर्शित चौड़ाइयाँ (बॉडी/साइडबार/कार्ड ग्रिड) सूचीबद्ध करें
2. हर इमेज के लिए अपर‑बाउंड px और 3–5 प्रतिनिधि चौड़ाइयाँ तय करें
3. LCP उम्मीदवारों को पहले लागू करें (preload/priority सहित)
4. वास्तविक माप से ट्रांसफ़र/LCP की तुलना कर sizes की शर्तें ट्यून करें

FAQ

• प्र. sizes कितना विस्तृत हो?
  • उ. जहाँ वास्तविक चौड़ाई बदलती है (ब्रेकप्वाइंट), उन्हीं सीमाओं तक। 2–4 शर्तें रखیں तो रख‑रखाव आसान रहता है।
• प्र. picture बनाम sizes?
  • उ. पहले sizes आज़माएँ; आर्ट डायरेक्शन चाहिए तभी picture लें।
• प्र. Next.js <Image> में क्या ज़रूरी?
  • उ. सही sizes डिक्लेरेशन और जरूरत पड़ने पर priority/fetchPriority। srcset स्वतः बनता है।