picture का उपयोग करके viewport breakpoint पर square और wide image files के बीच स्विच करें। हर source के अपने dimensions दें और CSS को चुनी हुई image को आनुपातिक रूप से scale करने दें। यह गाइड Mac पर एक स्थानीय उदाहरण बनाती और जाँचती है।

picture अलग-अलग aspect ratios के बीच कैसे स्विच करता है?

picture के भीतर fallback img से पहले media condition वाला source element रखें। Browser पहली ऐसी source चुनता है जो eligible हो और जिसकी condition मेल खाती हो, फिर उस source के srcset से एक image चुनता है। इसे art direction कहते हैं: अलग-अलग layouts के लिए अलग compositions देना। HTML Standard इस तरीके का स्पष्ट समर्थन करता है। HTML Standard: Images

तीन हिस्से मिलकर काम करते हैं: source resource चुनती है, dimension attributes उस resource के अनुपात बताते हैं, और CSS उसका प्रदर्शित आकार नियंत्रित करता है। चुनी गई source के width और height contained image के लिए इस्तेमाल होने वाला aspect ratio दे सकते हैं। picture element खुद image को render नहीं करता; उसका img ऐसा करता है। HTML Standard: Embedded content

अपनी ज़रूरत के अनुसार तरीका चुनें:

आपकी ज़रूरत उपयुक्त तरीका
किसी breakpoint पर composition या aspect ratio बदलना picture, जिसमें media का उपयोग करने वाला source हो
एक ही composition के अलग-अलग resolutions देना srcset, और width descriptors का उपयोग करते समय sizes
एक ही file रखकर उसे fixed frame के अंदर crop करना CSS sizing और object-fit: cover

ये तरीके अलग-अलग निर्णयों को संबोधित करते हैं। Art direction तय करती है कि कौन-सी composition दिखाई दे। Resolution selection browser को किसी composition के भीतर उपयुक्त candidate चुनने देती है। CSS fitting तय करती है कि चुना हुआ resource अपने frame में कैसे आए। MDN picture के इन उपयोगों और srcset तथा fitting properties के साथ उसके संबंध को दस्तावेज़ित करता है। MDN: The picture element

अपने Mac पर पूरा स्थानीय उदाहरण बनाएँ

इस उदाहरण में दो मूल SVG resources हैं, जिनमें एक नारंगी वृत्त और एक टील रंग का गोल कोनों वाला आयत है। Square version में वे एक के ऊपर एक हैं; wide version में वे अगल-बगल हैं। सब कुछ एक ही folder में है, और स्विच करने के लिए किसी बाहरी asset या JavaScript की ज़रूरत नहीं है।

बनाए गए resources का नियम सरल है: 700px से कम viewport width पर 600 × 600 का square resource इस्तेमाल करें। 700px और उससे अधिक पर 1200 × 600 का wide resource इस्तेमाल करें। प्रदर्शित image हर तरफ़ 16px की padding वाले content area को भरती है, जिसकी अधिकतम चौड़ाई 960px है। ये dimensions और breakpoint उदाहरण के लिए चुने गए हैं।

आकारों वाले दोनों resources सहेजें

picture-demo नाम का folder बनाएँ। उसमें नीचे दी गई दोनों files बनाने के लिए plain-text code editor इस्तेमाल करें। उनके नाम और extensions बिल्कुल वैसे ही रखें। हर fenced block में पूरी file है; contents को Markdown fence markers के बिना copy करें।

इसे shapes-square.svg नाम से सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

इसे shapes-wide.svg नाम से सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

HTML page सहेजें

उसी folder में index.html बनाएँ। TextEdit इस्तेमाल कर रहे हों, तो code paste करने से पहले File > New चुनें, फिर Format > Make Plain Text चुनें। File को .html extension के साथ सहेजें और पूछे जाने पर Use .html चुनें। Apple HTML files बनाने का यह तरीका बताता है। Apple: Work with HTML documents in TextEdit on Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Safari में index.html खोलें। पर्याप्त चौड़े viewport में आकार अगल-बगल दिखने चाहिए। संकरे viewport में वे एक के ऊपर एक दिखने चाहिए। तीनों files एक साथ रखें: दोनों relative resource URLs, HTML file की location से resolve होते हैं।

Wide source में srcset का इस्तेमाल है, भले ही उसमें केवल एक URL हो। picture के अंदर source के लिए srcset ज़रूरी है; उसका src attribute अनुमत नहीं है। Dimension attributes बिना units वाले integers होते हैं, इसलिए width="1200" इस्तेमाल करें, width="1200px" नहीं। MDN: The source element

Source और fallback, दोनों पर dimensions क्यों घोषित करें?

Fallback के 600 × 600 dimensions square resource का वर्णन करते हैं। Wide source के 1200 × 600 dimensions wide resource का वर्णन करते हैं। दोनों जोड़ियाँ देने से समर्थित browser image डाउनलोड होने से पहले चुनी गई image का अनुपात तय कर सकता है। Wide source के लिए square dimensions दोबारा इस्तेमाल करने पर शुरुआती अनुपात गलत होगा। HTML Standard: Source dimension attributes

इसके बाद CSS image की width को उपलब्ध content width पर सेट करता है और height को अपने आप तय होने देता है। यह automatic dimension image के अनुपात से उसकी height तय होने देता है। CSS sizing draft बताता है कि automatic sizing में preferred aspect ratio किस तरह काम करता है; दोनों dimensions को स्पष्ट रूप से तय करने से यह लचीलापन समाप्त हो जाता है। CSS Box Sizing Module Level 4

इस उदाहरण के layout की जाँच एक छोटी गणना से की जा सकती है:

image width = min(viewport width - 32, 960)
square height = image width
wide height = image width / 2
CSS pixels में viewport width चुना गया resource गणना किया गया image size
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

ये दिए गए CSS के लिए गणना की गई अपेक्षित values हैं; इसमें माना गया है कि scrollbar की चौड़ाई उपलब्ध content area को कम नहीं करती। SVG syntax, resource names, घोषित dimensions और गणित को programmatically जाँचा गया; तैयारी के दौरान उदाहरण को browser में render नहीं किया गया।

699px और 700px के बीच height में बड़ा बदलाव देखें। यह सीधे square से wide composition पर स्विच करने के कारण होता है। Resize करते समय ऐसा होना अपेक्षित है। अगर viewport स्थिर रहने पर loading के बाद दूसरी बार बदलाव हो, तो घोषित dimensions और उन्हें override करने वाले किसी CSS की जाँच करें।

Safari में breakpoint को सटीक रूप से जाँचें

Safari का Responsive Design Mode आपको desktop window से स्वतंत्र रूप से page viewport resize करने देता है। Safari की Advanced settings में Show features for web developers सक्षम करें। उदाहरण खोलें, फिर Develop > Enter Responsive Design Mode चुनें या Control-Command-R दबाएँ। WebKit इस setting, shortcut और resize किए जा सकने वाले preview का दस्तावेज़ देता है। WebKit: Simplified Responsive Design Mode

पहले 699px और 700px जाँचें, फिर एक आराम से संकरा और चौड़ा viewport जाँचें। देख लें कि composition इच्छित सीमा पर बदलती है, नारंगी आकार वृत्ताकार रहता है और image के नीचे वाला paragraph उसकी बदलती height के अनुसार आता है। Breakpoint के दोनों ओर reload करके जाँचें कि शुरुआती layout भी सही है और resize करने पर भी।

Safari ने कौन-सी file चुनी है, यह सीधे जाँचने के लिए उदाहरण देखते समय Web Inspector के console में यह वैकल्पिक diagnostic snippet चलाएँ:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Breakpoint पार करने के बाद snippet फिर चलाएँ। चुना गया URL संबंधित square या wide filename पर समाप्त होना चाहिए। currentSrc property browser द्वारा चुना गया URL बताती है; केवल उसकी value यह साबित नहीं करती कि resource सफलतापूर्वक load हुआ। MDN: HTMLImageElement currentSrc property

स्विच करने पर दिखावट गलत लगे तो क्या जाँचें?

क्रम से selection, resource dimensions और presentation जाँचें। इससे CSS sizing की समस्या को resource-selection की समस्या समझने से बचेंगे।

  1. चौड़ी widths पर भी square file चुनी जा रही है। पुष्टि करें कि viewport 700px तक पहुँचता है, source को img से पहले रखा गया है और source में srcset का उपयोग है। कई sources हों, तो उनका क्रम देखें: पहले मेल खाने वाली source को प्राथमिकता मिल सकती है। HTML Standard: Art direction selection
  2. कोई resource दिखाई नहीं देता। Markup में दिए गए filenames की folder की files से तुलना करें, extensions समेत। इस उदाहरण में दोनों SVG files को index.html के साथ ही रखा जाना चाहिए।
  3. सही resource गलत आकार में दिखाई देता है। वास्तविक img पर लागू CSS जाँचें, खासकर वे rules जो fixed height तय करते हैं। अनुपात के अनुसार sizing के लिए height: auto वापस सेट करें।
  4. Load होने के बाद image उछलती है। घोषित dimensions की हर जोड़ी की तुलना resource के वास्तविक अनुपात से करें। यह भी जाँचें कि कोई स्पष्ट CSS aspect-ratio इच्छित अनुपात को override तो नहीं कर रहा।

अगर आपके वास्तविक design में fixed frame की ज़रूरत है, तो fitting behavior सोच-समझकर चुनें। object-fit: contain पूरे resource का अनुपात बनाए रखता है और खाली जगह छोड़ सकता है; cover frame भरता है और content को काट सकता है; fill उसे खींच सकता है। Fitting properties को img पर लागू करें। दिए गए उदाहरण में fixed frame की ज़रूरत नहीं है, क्योंकि इसका layout चुने गए resource के अनुपात के अनुसार बदलता है। MDN: object-fit

Browser support की सीमाएँ क्या हैं?

picture का support और source-specific dimensions का support अलग-अलग बातें हैं। HTML Standard का compatibility summary मौजूदा browser engines में picture को सूचीबद्ध करता है। MDN source width property को, जो उसके dimension attribute को दर्शाती है, दिसंबर 2022 से browsers में उपलब्ध बताता है। यह मानकर नहीं चलना चाहिए कि पुराने browsers source-specific dimensions के लिए सही जगह आरक्षित करेंगे। HTML Standard: The picture element, MDN: HTMLSourceElement width property

जब कोई source मेल नहीं खाती या browser picture को support नहीं करता, तब fallback img image देता है। इस उदाहरण में वह square composition है। जो browser resources तो switch करता है, लेकिन source-dimension support नहीं रखता, उसमें wide image का अंतिम अनुपात संभवतः loading के बाद ही तय होगा। MDN: The picture element

जिन target browsers में CSS aspect-ratio का support है, लेकिन जिन्हें sizing का स्पष्ट rule चाहिए, उनके लिए मौजूदा stylesheet के अंत में यह CSS fragment जोड़ें। यह HTML breakpoint से मेल खाता है और अस्थायी अनुपात देता है, साथ ही load हुई image के natural ratio को लागू होने देता है:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN auto और ratio के इस मेल का दस्तावेज़ देता है और CSS aspect-ratio को सितंबर 2021 से browsers में उपलब्ध बताता है। इसलिए इस fragment की अपनी support सीमा है। इसका breakpoint source condition के साथ मेल खाता रखें और जिन browser versions को support करना है, उनमें इसे जाँचें। MDN: aspect-ratio

उदाहरण सही ढंग से काम करने लगे, तो synthetic files को अपनी compositions से बदलें और उनके dimensions भी साथ में अपडेट करें। Source condition, resource proportions और CSS sizing को एक-दूसरे के अनुरूप रखें, फिर breakpoint के ठीक नीचे और ऊपर दोबारा जाँचें।

स्रोत