Responsive images: srcset, sizes और device pixel ratio समझें
srcset उपलब्ध image files बताता है। width descriptors के साथ sizes अपेक्षित display width को CSS pixels में बताता है। browser इसे DPR औरअपनी नीति से जोड़करफाइलचुनता है; असल layout अब भी CSS तय करता है।
इस मार्गदर्शिका में
तस्वीर सही दिख सकती है लेकिन layout से कहीं अधिक pixels download कर सकती है। छोटी file कोघनी screen परफैलाने सेधुंधलापन भीहो सकता है। responsive markup तैयार files कोवास्तविक display slot से जोड़ता है, इसलिएदोनों का layout वर्णनसमानहोना चाहिए।
एक वास्तविक component औरकुछ उपयोगी widths सेशुरूकरें। उदाहरणमें content column अधिकतम 800 CSS pixels तथा narrow screen पर 16-pixel बाहरी gutters हैं। सभी files काविषयऔर 4:3 aspect ratio समान है; अलग crop अलग design निर्णयहै।
Source pixels, CSS pixels और DPR अलग रखें
800 pixels चौड़ी file को 400 CSS-pixel slot मेंदिखाया जा सकता है। DPR 2 परवह slot लगभग 800 device pixels चौड़ा होगा। यह resolution कीयोजना का संबंधहै, browser को एकखास file लेनेकाबाध्यकारीआदेशनहीं।
पहले display slot निकालें:800 और viewport width minus 32 मेंजोछोटाहो। उस slot को DPR सेगुणाकर source width कालक्ष्यपाएं। यदि image संकरे column मेंहैतोपूरी viewport width कोगुणा न करें; layout कीअसलजगहगणनाका आधारहै।
| व्यू-पोर्ट की चौड़ाई | CSS pixels में display slot | DPR | लक्ष्य source width |
|---|---|---|---|
| 392 | 360 | 1 | 360 pixels चौड़ाई |
| 392 | 360 | 2 | 720 pixels चौड़ाई |
| 1024 | 800 | 1 | 800 pixels चौड़ाई |
| 1024 | 800 | 2 | 1600 pixels चौड़ाई |
Layout बदलता हो तो width descriptors लें
w descriptor फाइलकी वास्तविक pixel width है, breakpoint नहीं। sizes बताता हैकि current layout में image कितनीचौड़ीदिखनेकीअपेक्षाहै। नीचे 832 CSS-pixel या अधिक viewport पर 800-pixel slot औरछोटे viewport परदोनों gutters घटाकर width चुनीगईहै।
साथदिया CSS भीउदाहरणका हिस्साहै। बादमें component आधी width की grid मेंजाएतो sizes भीबदलें। पुरानी full-width value रखनेसे browser जरूरतसेबड़ी file चुनसकता है। सही attribute layout कासहीवर्णनहै, लोकप्रिय screen widths कीसूचीभरनहीं।
<img
src="/images/workspace-800.webp"
srcset="/images/workspace-400.webp 400w,
/images/workspace-800.webp 800w,
/images/workspace-1600.webp 1600w"
sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
width="1600" height="1200"
alt="A desk with a monitor and an open notebook"
style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>उम्मीदलगाएं, फिरवास्तविकचयनजांचें
392-pixel viewport और DPR 2 पर slot 360 औरलक्ष्य 720 source pixels है। दिए files में 800w एकउचितअपेक्षितचयनहै। wide display पर DPR 2 कालक्ष्य 1600 होगा। गणनाचयनके inputs समझातीहै; browser सेठीकवही candidate मंगवानेकानिर्देशनहीं।
browser अन्यकारकभीदेखसकता है और viewport छोटाहोनेपरपहले से download हुईबड़ी image रखसकता है। साफ test के लिए device settings चुनकर fresh context या reload करें। फिर developer tools में current image URL और transferred bytes देखें; warm page कोबारबार resize करनाभ्रामकहोसकता है।
400, 800 और 1600-pixel की वास्तविक files बनाएं, दृश्यगुणवत्ता औरहर URL का image response जांचें। 1600-pixel कीएक ही file कोतीननामदेकरअलग w values लगानेसेवास्तविक responsive candidates नहीं बनते।
- Element की rendered width नापें; viewport केबराबरमानकरनचलें।
- currentSrc URL को Network panel के response सेमिलाएं।
- File dimensions, response type, cache state और transferred bytes जांचें।
- Narrow तथा wide viewport को DPR 1 और DPR 2 परदोहराएं।
- Image आनेसे पहलेऔरबाद horizontal overflow और layout movement देखें।
वास्तव में fixed-size image के लिए x descriptors
स्थिर width वालाछोटा logo density descriptors लेसकता है। 120 CSS pixels परदिखने वाली image के लिए 120-pixel file 1x और 240-pixel file 2x दें। येएक ही display size कीअलग resolutions हैं। एक srcset में x और w न मिलाएं।
अलग crop अलगसमस्याहै: mobile परचेहरेकानजदीकीदृश्यऔर desktop परपूरादृश्यचाहिएतो picture तथा source media conditions उपयोग करें। इसे art direction कहतेहैं। मुख्यउदाहरणमें composition वहीहै, केवल resolution बदलतीहै। alt text पाठककोमिलनेवालाअर्थपूर्ण content बताए।
<img src="/images/mark-120.png"
srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
width="120" height="120" alt="Example project mark">Aspect ratio और loading कोभीयोजनामेंरखें
width और height attributes browser को image आनेसे पहले ratio के हिसाब सेजगहरखनेदेतेहैं। stylesheet width बदलेतोये responsive image कोउन्हीं CSS dimensions मेंजबरननहीं रखते। 4:3 में 800 width का height 600 और 360 width का height 270 pixels होगा।
नीचेदूरवाली images के लिए lazy loading उपयोगीहै; तुरंतदिखने वालीमहत्वपूर्ण image कोबिनासोचे delay नकरें। Responsive candidates जरूरतसेअधिक pixels घटातेहैं, जबकि format, compression और request timing अलगलागतसंभालतेहैं।
Decoded memory और network file size भीअलग हैं। छोटी compressed WebP decode होकरबड़ा pixel buffer बनसकती है। memory calculator में decoded dimensions लेंऔर compressed file के bytes वास्तव मेंनापें; केवल pixel count सेवहआकारनहीं मिलता।
रिलीजसे पहले component काअनुबंधजांचें
Layout rule और file generation को एकसाथरखें: candidate widths,crop,ratio,quality और sizes expression । अधिकतम width 800 से 1000 हो तो candidates कीनईसमीक्षाकरें। इससे layout बदलनेपरपुरानामार्कअपछूटनेकीसमस्याघटतीहै।
Fallback src, हर srcset URL, अर्थपूर्ण alt text और reserved space जांचें। CSS-to-device-pixel calculator मेंअपना slot और DPR डालकरतालिकादोहराएं। ratio calculator से matching heights निकालें। लक्ष्यवास्तविक devices परएकदूसरेसेमेलखाती files और layout है।
आम सवाल
क्या sizes मेरी image की CSS width बदलता है?
नहीं। width descriptors के साथयह resource selection के लिएअपेक्षित slot बताताहै। rendered layout CSS तय करती है; दोनों कावर्णनमेलखानाचाहिए।
Window छोटीकरनेपरबड़ी image क्योंरही?
browser downloaded resource दोबारा लेसकता है। इच्छित viewport और DPR पर fresh load करके chosen URL और network transfer जांचें, केवल resize क्रमनहीं।
क्या 2x image की file size हमेशा दोगुनीहै?
नहीं। दोनों dimensions दोगुनीकरनेसे pixels चारगुनेहोते हैं, लेकिन encoded bytes content,format और quality परभीनिर्भरहैं। बनी files नापें।
स्रोत और परिभाषाएँ
विधि की जाँच की गई: