लोड हो रहा है...

HTML picture तत्व

कई पेजों के लिए एक अकेला img काफ़ी है। जब आपको अलग स्क्रीन या फ़ॉर्मैट के लिए अलग फ़ाइलें चाहिए — डेस्कटॉप पर चौड़ा क्रॉप, फ़ोन पर सख्त क्रॉप, या JPEG फ़ॉलबैक के साथ आधुनिक फ़ॉर्मैट — तो picture तत्व उम्मीदवार देता है। ब्राउज़र एक चुनता है; आपका फ़ॉलबैक img पुराने क्लाइंट और पहुँच-योग्यता दोनों को ढकता है।

picture क्या जोड़ता है

picture एक कंटेनर है। इसके अंदर आप शून्य या अधिक source तत्व और ठीक एक फ़ॉलबैक img रखते हैं। प्रत्येक source बता सकता है कब लागू हो (media) या कौन सा फ़ॉर्मैट है (type), और फ़ाइल कहाँ है (srcset)। img वैकल्पिक सजावट नहीं है: यह आवश्यक फ़ॉलबैक है और alt का स्थान भी यही है।

सीधा उत्तर

एक या अधिक <source> तत्वों और एक फ़ॉलबैक <img> को <picture> के अंदर लपेटें। व्यूपोर्ट शर्तों के लिए media और WebP जैसे फ़ॉर्मैट के लिए type उपयोग करें। img को अभी भी src और alt चाहिए। शुरुआती एक ही फ़ोटो की दो चौड़ाई से शुरू कर सकते हैं, हर आधुनिक फ़ॉर्मैट इकट्ठा करने से पहले।

media के साथ आर्ट डायरेक्शन

आर्ट डायरेक्शन का मतलब अलग व्यूपोर्ट के लिए अलग क्रॉप या लेआउट है — सिर्फ़ «वही फ़ोटो छोटी» नहीं। source पर media आपको चौड़े और संकरे लेआउट अलग फ़ाइलों की ओर भेजने देता है।

media और फ़ॉलबैक img वाला picture

html

HTML Code

<picture>
<source media="(min-width: 800px)" srcset="images/wide.jpg">
<source media="(min-width: 400px)" srcset="images/medium.jpg">
<img src="images/small.jpg" alt="Mountain trail at sunrise">
</picture>

media नमूने को पढ़ना

सामान्य शिक्षण पैटर्न में source अधिक विशिष्ट शर्तों से व्यापक शर्तों की ओर सूचीबद्ध होते हैं; ब्राउज़र फिर भी मूल्यांकन कर मैच चुनता है
source पर srcset उम्मीदवार फ़ाइल URL की ओर इशारा करता है
अंतिम img तब src और alt देता है जब कोई source मैच न करे या picture समर्थन अधूरा हो
अभ्यास में विंडो का आकार बदलकर देखें कौन सी फ़ाइल उपयुक्त है — अनुरोध की पुष्टि के लिए DevTools नेटवर्क उपयोग कर सकते हैं

type के साथ फ़ॉर्मैट चयन

कभी-कभी एक ही रचना सहायक ब्राउज़रों के लिए WebP और बाकी के लिए JPEG के रूप में भेजी जाती है। type ब्राउज़र को MIME प्रकार बताता है ताकि वह असमर्थित फ़ॉर्मैट पहले डाउनलोड किए बिना छोड़ सके।

type और फ़ॉलबैक img वाला picture

html

HTML Code

<picture>
<source type="image/webp" srcset="images/hero.webp">
<img src="images/hero.jpg" alt="Product hero on a clean desk">
</picture>

पहले दिन का दायरा छोटा रखें

पहली कोशिश में हर फ़ॉर्मैट और हर ब्रेकपॉइंट की ज़रूरत नहीं। दो समझदार उम्मीदवारों वाला एक picture काम करवाएँ, img पर ईमानदार alt रखें, फिर विस्तार करें। रिस्पॉन्सिव srcset घनत्व डिस्क्रिप्टर और उन्नत sizes गुण बाद में आते हैं जब आप आगे बढ़ें।

alt img पर ही रहता है

पहुँच-योग्यता पाठ सिर्फ़ source पर न रखें। स्क्रीन रीडर और फ़ॉलबैक रेंडरिंग img पर निर्भर करते हैं। Images सत्र के सजावटी नियम अभी भी लागू हैं: सूचनात्मक छवियों को वास्तविक alt चाहिए; शुद्ध सजावट alt="" उपयोग कर सकती है।

picture बनाम एक img

जब एक फ़ाइल काफ़ी हो तो सादा img उपयोग करें। picture तब लें जब सच में शर्तों के लिए अलग फ़ाइलें चाहिए — व्यूपोर्ट आर्ट डायरेक्शन या फ़ॉर्मैट स्विच। बिना असली ज़रूरत के अतिरिक्त मार्कअप केवल रखरखाव जटिल बनाता है।

क्रम और फ़ॉलबैक आदतें

source तत्वों को img से पहले सूचीबद्ध करें। हमेशा img शामिल करें। यदि फ़ॉलबैक भूल जाएँ, कुछ ब्राउज़र और कई शिक्षण उपकरण पैटर्न को अधूरा मानेंगे। संकरी और चौड़ी विंडो से जाँचें, और ऐसे ब्राउज़र से भी जो आपके आधुनिक फ़ॉर्मैट को प्राथमिकता न दे।

अपने एडिटर में अभ्यास

एक ही फ़ोटो की दो छवि चौड़ाई तैयार करें (या दो स्पष्ट अभ्यास फ़ाइलें)।
दो source media क्वेरी और एक img फ़ॉलबैक वाला picture बनाएँ।
ब्राउज़र विंडो का आकार बदलें और देखें कौन सी फ़ाइल उपयुक्त है।
पुष्टि करें कि alt img पर ही है, सिर्फ़ टिप्पणी में नहीं।
वैकल्पिक रूप से JPEG img के ऊपर type="image/webp" वाला WebP source जोड़ें और पुष्टि करें कि पैटर्न हर जगह छवि दिखाता है।

आसान गलतियाँ

फ़ॉलबैक img भूल जाना
alt को img के बजाय सिर्फ़ source पर रखना
बुनियादी media पैटर्न काम करने से पहले बहुत सारे फ़ॉर्मैट से जटिल बनाना
जब एक अनुकूलित img काफ़ी होता तब picture उपयोग करना
बेमेल क्रॉप जो व्यूपोर्ट ब्रेकपॉइंट पार करने पर उपयोगकर्ताओं को चौंकाते हैं
source पर srcset को लिंक के href से भ्रमित करना

सारांश

picture कई छवि उम्मीदवार देता है; ब्राउज़र एक चुनता है
source प्लस आवश्यक फ़ॉलबैक img उपयोग करें
media व्यूपोर्ट चयन निर्देशित करता है; type फ़ॉर्मैट चयन
alt img पर रहता है
सरल शुरू करें: दो चौड़ाई या एक आधुनिक फ़ॉर्मैट प्लस JPEG फ़ॉलबैक

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा