किसी रिस्पॉन्सिव छवि के संभावित विकल्प का अनुमान लगाने के लिए, sizes को CSS चौड़ाई में बदलें, उसे डिवाइस पिक्सेल अनुपात से गुणा करें और उस लक्ष्य की srcset से तुलना करें। फिर चुने गए URL की पुष्टि करें: अंतिम विकल्प चुनने का विवेक ब्राउज़र के पास रहता है।

यह चरण-दर-चरण मार्गदर्शिका उस व्यक्ति के लिए है जो Mac पर Chrome में अपनी बनाई हुई वेब पेज जाँच रहा है। आप संभावित विकल्पों की गणना करेंगे, मूल अमूर्त आकृतियों वाले स्थानीय पेज का परीक्षण करेंगे और आकार की भ्रामक घोषणा को ब्राउज़र के सामान्य चयन व्यवहार से अलग पहचानेंगे।

sizes, srcset और DPR में से हर एक ब्राउज़र को क्या बताता है?

चौड़ाई डिस्क्रिप्टर के साथ, srcset उपलब्ध संसाधनों और उनकी अंतर्निहित पिक्सेल चौड़ाइयों की सूची देता है। 800w जैसे डिस्क्रिप्टर में ऐसी छवि का उल्लेख होना चाहिए जिसकी चौड़ाई वास्तव में 800 पिक्सेल हो। चौड़ाई डिस्क्रिप्टर और 2x जैसे डेंसिटी डिस्क्रिप्टर को अलग-अलग सोर्स सेट में रखें; दोनों को एक ही srcset में मिलाना अमान्य है। MDN का इमेज एलिमेंट संदर्भ इन आवश्यकताओं का विवरण देता है।

sizes संसाधन चयन के लिए इच्छित डिस्प्ले चौड़ाई देता है। ब्राउज़र इसकी शर्तों को क्रम से जाँचता है और पहली मेल खाने वाली एंट्री का उपयोग करता है। बिना शर्त वाला फ़ॉलबैक सबसे अंत में रखें। सोर्स साइज़ में 480px, 50vw और calc(100vw - 32px) जैसी लंबाइयाँ स्वीकार्य हैं; 50% जैसी प्रतिशत वैल्यू स्लॉट की मान्य चौड़ाई नहीं हैं। HTML में रिस्पॉन्सिव छवियों का उपयोग

CSS प्रदर्शित आयामों को नियंत्रित करता है। अपने CSS और स्पष्ट sizes सूची को दो ऐसे विवरण मानें जिन्हें एक-दूसरे के अनुरूप रखना ज़रूरी है: एक लेआउट तय करता है, जबकि दूसरा संसाधन चयन की जानकारी देता है। केवल sizes बदलने से उससे मेल खाने वाला लेआउट लागू नहीं होता। HTML Standard: साइज़ एट्रिब्यूट

DPR भौतिक पिक्सेल और CSS पिक्सेल के बीच का संबंध बताता है। Mac मॉडल या डिस्प्ले के नाम से मान का अनुमान लगाने के बजाय window.devicePixelRatio पढ़ें। पेज ज़ूम से यह मान बदल सकता है, और विंडो को एक डिस्प्ले से दूसरे पर ले जाने से भी बदल सकता है। पिंच ज़ूम DPR नहीं बदलता। MDN: Window.devicePixelRatio

संभावित विकल्प की गणना कैसे करें?

रिज़ॉल्व किए गए सोर्स साइज़ S, संसाधन चौड़ाई W और DPR D के लिए, ये दो समतुल्य गणनाएँ करें:

लक्ष्य संसाधन चौड़ाई = S × D
विकल्प की प्रभावी डेंसिटी = W ÷ S

HTML प्रोसेसिंग मॉडल हर विकल्प की चौड़ाई को सोर्स साइज़ से भाग देकर चौड़ाई डिस्क्रिप्टर को सामान्यीकृत करता है। MDN यह व्यावहारिक अनुमान भी समझाता है कि साइज़ संकेत को DPR से गुणा करें। HTML Standard: सोर्स डेंसिटी का सामान्यीकरण, MDN: HTMLImageElement.sizes

व्यावहारिक अनुमान के लिए लक्ष्य चौड़ाई के बराबर या उससे अधिक चौड़ाई वाला सबसे छोटा विकल्प चुनें। अगर सभी विकल्प लक्ष्य से छोटे हैं, तो उपलब्ध सबसे बड़े विकल्प की पहचान करें और कमी दर्ज करें। नीचे दिए गए अभ्यासों के लिए यह स्पष्ट अनुमान नियम है। HTML Standard अंतिम चयन को कार्यान्वयन पर निर्भर छोड़ता है; यह हर ब्राउज़र को इस राउंडिंग नियम का पालन करने के लिए बाध्य नहीं करता। HTML Standard: इमेज सोर्स चुनना

इस सोर्स-साइज़ सूची पर विचार करें, जिसके साथ 480w, 800w, 1200w और 1440w विकल्प हैं:

(max-width: 600px) calc(100vw - 32px),
(max-width: 1200px) calc(50vw - 32px),
568px

100vw व्यूपोर्ट की चौड़ाई दर्शाता है और 50vw उसकी आधी चौड़ाई दर्शाता है। ये इकाइयाँ इमेज के पैरेंट कंटेनर के बजाय व्यूपोर्ट को संदर्भित करती हैं। CSS Values and Units: व्यूपोर्ट-प्रतिशत लंबाइयाँ

नीचे दी गई तालिका उदाहरण के लिए की गई गणनाएँ दिखाती है, दर्ज किए गए ब्राउज़र परिणाम नहीं। आखिरी कॉलम में बताया गया अनुमान नियम लागू किया गया है।

व्यूपोर्ट चौड़ाई, CSS px DPR रिज़ॉल्व किया गया सोर्स साइज़, CSS px लक्ष्य संसाधन चौड़ाई, px अनुमानित विकल्प
600 1 568 568 800w
600 2 568 1,136 1200w
601 2 268.5 537 800w
1,000 1 468 468 480w
1,000 2 468 936 1200w
1,400 2 568 1,136 1200w
1,400 3 568 1,704 1440w, लक्ष्य से कम

600 से 601 CSS पिक्सेल का बदलाव जाँचने के लिए खास तौर पर उपयोगी है। 600 पर पहली शर्त लगभग पूरी चौड़ाई वाला स्लॉट देती है। 601 पर दूसरी शर्त बहुत संकरा स्लॉट देती है। इसलिए अधिक चौड़े व्यूपोर्ट से लक्ष्य इमेज छोटी निकलती है। यह बनाए गए लेआउट अनुबंध का सीधा परिणाम है।

1,000 पिक्सेल के व्यूपोर्ट और DPR 2 पर, सोर्स साइज़ 468 CSS पिक्सेल है। चार विकल्पों की प्रभावी डेंसिटी लगभग 1.03x, 1.71x, 2.56x और 3.08x है। हमारे अनुमान नियम के अनुसार, 1200w विकल्प लक्ष्य डेंसिटी 2x से आगे जाने वाला पहला विकल्प है।

स्थानीय परीक्षण पूरा कैसे बनाएँ?

Mac पर Chrome और Python 3.8 या उसके बाद का संस्करण इंस्टॉल होना चाहिए। नीचे दिए गए पूरे प्रोग्राम को किसी साधारण टेक्स्ट एडिटर में responsive_demo.py नाम से सेव करें। यह प्रोग्राम एक ही आयत और वृत्त वाली चार PNG फ़ाइलें बनाता है, उनसे मेल खाता पेज लिखता है और स्थानीय सर्वर शुरू करता है। सभी बनी हुई फ़ाइलें एक नई अस्थायी डायरेक्टरी में जाएँगी, इसलिए मौजूदा फ़ाइलें ओवरराइट नहीं होंगी।

पेज जानबूझकर eager इमेज और स्पष्ट सोर्स साइज़ का उपयोग करता है। इसकी CSS चौड़ाइयाँ गणना तालिका में इस्तेमाल की गई तीन शाखाओं से मेल खाती हैं। सर्वर Python के दस्तावेज़ीकृत ThreadingHTTPServer और डायरेक्टरी-आधारित रिक्वेस्ट हैंडलर का उपयोग करता है। Python: http.server

from functools import partial
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
import struct
import tempfile
import zlib


def chunk(kind, data):
    return (
        struct.pack("!I", len(data)) + kind + data
        + struct.pack("!I", zlib.crc32(kind + data))
    )


def make_png(width):
    height = width // 2
    rows = []
    for y in range(height):
        row = bytearray()
        for x in range(width):
            color = (242, 244, 248)
            if width // 8 <= x < width // 2 and height // 4 <= y < 3 * height // 4:
                color = (70, 100, 160)
            if (x - 3 * width // 4) ** 2 + (y - height // 2) ** 2 < (height // 5) ** 2:
                color = (220, 160, 60)
            row.extend(color)
        rows.append(b"\x00" + row)
    header = struct.pack("!IIBBBBB", width, height, 8, 2, 0, 0, 0)
    return (
        b"\x89PNG\r\n\x1a\n"
        + chunk(b"IHDR", header)
        + chunk(b"IDAT", zlib.compress(b"".join(rows)))
        + chunk(b"IEND", b"")
    )


page = '''<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shape A candidate test</title>
<style>
  body { margin: 0; padding: 16px; font-family: sans-serif; }
  #shape { display: block; width: calc(100vw - 32px); height: auto; }
  @media (min-width: 600.01px) {
    #shape { width: calc(50vw - 32px); }
  }
  @media (min-width: 1200.01px) {
    #shape { width: 568px; }
  }
</style>
<p>Shape A: rectangle and circle</p>
<img id="shape" src="shape-a-800.png" width="1440" height="720"
     alt="Blue rectangle and amber circle on a pale background"
     srcset="shape-a-480.png 480w, shape-a-800.png 800w,
             shape-a-1200.png 1200w, shape-a-1440.png 1440w"
     sizes="(max-width: 600px) calc(100vw - 32px),
            (max-width: 1200px) calc(50vw - 32px), 568px">
</html>
'''

root = Path(tempfile.mkdtemp(prefix="responsive-shapes-"))
for width in (480, 800, 1200, 1440):
    (root / f"shape-a-{width}.png").write_bytes(make_png(width))
(root / "index.html").write_text(page, encoding="utf-8")
handler = partial(SimpleHTTPRequestHandler, directory=str(root))
with ThreadingHTTPServer(("127.0.0.1", 0), handler) as server:
    print(f"Files: {root}", flush=True)
    print(f"Open http://127.0.0.1:{server.server_port}/", flush=True)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass

Terminal में, उस फ़ोल्डर पर जाएँ जहाँ आपने प्रोग्राम सेव किया है और चलाएँ:

python3 responsive_demo.py

Chrome में प्रोग्राम द्वारा प्रिंट किया गया स्थानीय पता खोलें। परीक्षण के दौरान Terminal चालू रखें; पूरा होने पर वहाँ Control+C दबाएँ। प्रोग्राम उपलब्ध पोर्ट माँगता है, इसलिए कोई तय पोर्ट नंबर मानने के बजाय उसका प्रिंट किया हुआ पता इस्तेमाल करें।

डेस्कटॉप परीक्षण की पूर्णांक व्यूपोर्ट चौड़ाइयों के लिए CSS थ्रेशहोल्ड 600.01px और 1200.01px हैं। तालिका में दिए गए सटीक पूर्णांक मानों का परीक्षण करें। उदाहरण को किसी प्रोडक्शन लेआउट में इस्तेमाल करते समय अपने वास्तविक CSS ब्रेकपॉइंट और सोर्स-साइज़ शर्तों को एक-दूसरे से मिलाएँ; इसमें भिन्नात्मक चौड़ाई का व्यवहार भी शामिल है।

Mac पर Chrome में चयन की पुष्टि कैसे करें?

आकृति पर राइट-क्लिक करें और Inspect चुनें। इससे DevTools खुल जाएगा और उसका इमेज एलिमेंट चुना हुआ होगा। Chrome इसे किसी एलिमेंट और उस पर लागू स्टाइल की जाँच का सीधा तरीका बताता है। Chrome DevTools खोलें

  1. Toggle device toolbar पर क्लिक करें और Dimensions के नीचे Responsive चुनें।
  2. व्यूपोर्ट की चौड़ाई 1000 पर सेट करें।
  3. टूलबार के More options मेनू में Add device pixel ratio चुनें, फिर DPR 2 चुनें।
  4. ज़रूरत पड़ने पर More options, फिर Add device type चुनें और Desktop चुनें।
  5. Network खोलें, Disable cache चालू करें और DevTools खुला रखकर पेज फिर से लोड करें।
  6. shape-a से फ़िल्टर करके माँगी गई इमेज खोजें।

Chrome अपने Device Mode गाइड में व्यूपोर्ट, DPR और डिवाइस प्रकार के नियंत्रणों का, और अपने Network सुविधाओं के संदर्भ में कैश नियंत्रण का विवरण देता है।

पेज लोड होने के बाद, DevTools के Console में यह पूरा डायग्नोस्टिक स्निपेट चलाएँ:

(() => {
  const image = document.getElementById("shape");
  if (!image) throw new Error("The Shape A image was not found.");

  const viewport = window.innerWidth;
  const slot = window.matchMedia("(max-width: 600px)").matches
    ? viewport - 32
    : window.matchMedia("(max-width: 1200px)").matches
      ? viewport / 2 - 32
      : 568;

  console.table({
    viewportCSSPixels: viewport,
    devicePixelRatio: window.devicePixelRatio,
    declaredSlotCSSPixels: slot,
    renderedWidthCSSPixels: image.getBoundingClientRect().width,
    targetResourcePixels: slot * window.devicePixelRatio,
    selectedURL: image.currentSrc,
    naturalWidthCSSPixels: image.naturalWidth
  });
})();

यह स्निपेट स्लॉट की घोषणा की गणना सिर्फ़ इस डेमो के लिए करता है; यह सामान्य sizes पार्सर नहीं है। घोषित स्लॉट की तुलना रेंडर की गई चौड़ाई से करें, फिर चुने गए फ़ाइल नाम की तुलना अनुमान तालिका से करें।

currentSrc ब्राउज़र द्वारा चुना गया पूरा URL बताता है। इससे यह साबित नहीं होता कि संसाधन सफलतापूर्वक लोड हुआ था, इसलिए इमेज रिक्वेस्ट और प्रदर्शित परिणाम भी जाँचें। src पढ़ने से इस उदाहरण में केवल फ़ॉलबैक एट्रिब्यूट पता चलेगा। MDN: HTMLImageElement.currentSrc

naturalWidth को PNG में एन्कोड की गई चौड़ाई न समझें। यह CSS पिक्सेल में डेंसिटी से समायोजित चौड़ाई है। इस नियंत्रित फ़िक्स्चर के लिए, बनी हुई फ़ाइल के आयाम और फ़ाइल नाम से उसकी संसाधन चौड़ाई का पता चलता है। MDN: HTMLImageElement.naturalWidth

हर शर्त के लिए फिर से लोड करते हुए, 600 और 601 CSS पिक्सेल पर परीक्षण दोहराएँ। व्यूपोर्ट, दर्ज किया गया DPR, स्लॉट, चुना गया फ़ाइल नाम और रिक्वेस्ट पूरी हुई या नहीं, ये बातें लिखें। इन रिकॉर्ड से पहले से लोड किए पेज का आकार बदलते समय किए गए विकल्पों के क्रम को ताज़ा लोड पर बार-बार मिलने वाले परिणाम से अलग पहचाना जा सकता है।

अनुमान अलग हो तो क्या जाँचें?

विकल्पों की सूची बदलने से पहले इन इनपुट को क्रम से जाँचें:

  1. डिस्क्रिप्टर का प्रकार जाँचें। 1x और 2x जैसे डेंसिटी डिस्क्रिप्टर होने पर, sizes के ज़रिए चौड़ाई-डिस्क्रिप्टर वाली गणना लागू न करें।
  2. पहली मेल खाने वाली शर्त जाँचें। पहले मेल खाने वाली शर्त को बाद की एंट्रियों पर प्राथमिकता मिलती है।
  3. घोषित और रेंडर की गई चौड़ाइयों की तुलना करें। अगर CSS चौड़े कॉलम को सीमित करती है, तो 100vw की घोषणा स्लॉट को वास्तविकता से बड़ा दिखा सकती है।
  4. वास्तविक DPR पढ़ें। पेज ज़ूम करने या डिस्प्ले बदलने के बाद इसे फिर से जाँचें।
  5. नियंत्रित री-लोड की तुलना करें। परीक्षण दोहराते समय व्यूपोर्ट, DPR और लोडिंग की शर्तें समान रखें।
  6. संसाधन की उपलब्धता जाँचें। चुना गया URL और सफलतापूर्वक दिखाई गई इमेज दो अलग-अलग बातें हैं।

स्पष्ट सोर्स साइज़ का न होना या उनका अनुपयोगी होना HTML पार्सर को 100vw डिफ़ॉल्ट अपनाने पर ला सकता है। इससे संकरी इमेज के लिए लक्ष्य आश्चर्यजनक रूप से बड़ा हो सकता है। यह मानने के बजाय कि ब्राउज़र CSS से इच्छित कॉलम चौड़ाई का अनुमान लगा लेगा, सटीक सोर्स-साइज़ सूची दें। HTML Standard: sizes एट्रिब्यूट पार्स करना

अगर पेज में picture एलिमेंट है, तो डेंसिटी की गणना करने से पहले पता लगाएँ कि कौन-सी सोर्स शाखा लागू होती है। उस शाखा के विकल्पों में से चयन करने से पहले सोर्स चयन होता है; अलग-अलग क्रॉप इस कला-निर्देशन तंत्र के अंतर्गत आते हैं। HTML में रिस्पॉन्सिव छवियों का उपयोग

इस तरीके पर कौन-सी सपोर्ट सीमाएँ लागू होती हैं?

MDN के अनुसार sizes प्रॉपर्टी सभी ब्राउज़र में व्यापक रूप से उपलब्ध है, लेकिन इसका मतलब यह नहीं कि हर नया कीवर्ड भी उतना ही समर्थित है। यहाँ इस्तेमाल की गई स्पष्ट शर्तें अपने आप आकार तय करने पर निर्भर हुए बिना सीधा परीक्षण करने देती हैं। MDN: HTMLImageElement.sizes

sizes="auto" lazy-load की गई इमेज के लिए मान्य है और चयन में उनके लेआउट की चौड़ाई का उपयोग करने देता है। अगर आप इसे अपनाएँ, तो ऐसे ब्राउज़र के लिए auto के बाद स्पष्ट फ़ॉलबैक साइज़ रखें जो इस कीवर्ड का समर्थन नहीं करते, और इमेज के आयाम भी दें। इन पूर्वापेक्षाओं को बदले बिना इसे इस eager-loading उदाहरण में न डालें। MDN का इमेज एलिमेंट संदर्भ

Chrome के डिवाइस नियंत्रण, अनुकरण की गई स्थितियों में Chrome के व्यवहार की जाँच करते हैं। उनसे Safari या Firefox के विकल्पों का पता नहीं चलता। Chrome Device Mode को एक अनुमान भी बताता है, इसलिए जब किसी दूसरे ब्राउज़र का व्यवहार मायने रखता हो, तो उसी ब्राउज़र में सीधे परीक्षण करें। Chrome DevTools: Device Mode की सीमाएँ

एक उपयोगी अनुमान के साथ ऐसा दर्ज किया जा सकने वाला ब्यौरा होना चाहिए जिसकी पुष्टि हो सके: लागू सोर्स सेट, रिज़ॉल्व किया गया सोर्स साइज़, दर्ज किया गया DPR, गणना किया हुआ लक्ष्य और देखा गया currentSrc। जब ये इनपुट बनाए गए लेआउट से मेल खाते हैं, तो आप संसाधन के चयन को साफ़ तौर पर समझा सकते हैं और पहचान सकते हैं कि अगला बदलाव CSS, sizes या उपलब्ध इमेज चौड़ाइयों में करना है।

स्रोत