छवियाँ और मीडिया

docs.scrimba.com

पाठ एक वेब पृष्ठ का बहुत कुछ ले जाता है, लेकिन सब कुछ नहीं। फ़ोटो, आरेख, चित्र, वीडियो क्लिप और ध्वनि भी सामग्री हैं, और HTML के पास इनमें से प्रत्येक के लिए तत्व हैं। यह अध्याय उस मार्कअप के बारे में है जो एक पृष्ठ पर मीडिया रखता है: आप एक छवि फ़ाइल की ओर कैसे इशारा करते हैं, आप इसे उन लोगों के लिए कैसे वर्णित करते हैं जो इसे नहीं देख सकते, और आप सही स्क्रीन को सही फ़ाइल कैसे परोसते हैं बिना किसी के डेटा को बर्बाद किए।

छवि तत्व

आप एक पृष्ठ पर एक चित्र छवि तत्व के साथ रखते हैं, जिसे <img> के रूप में लिखा जाता है। इसमें कोई सामग्री नहीं है और कोई समापन टैग नहीं है। इसके बजाय, आप इसे विशेषताओं के माध्यम से दो चीजें बताते हैं: कौन सी फ़ाइल दिखानी है, और चित्र किस बारे में है।

<img src="golden-retriever.jpg" alt="घास में बैठा एक गोल्डन रिट्रीवर">

src स्रोत है: छवि फ़ाइल का पथ या वेब पता। alt वैकल्पिक पाठ है: चित्र का एक संक्षिप्त विवरण शब्दों में। यदि छवि लोड नहीं हो सकती है, या यदि कोई इसे देखने के बजाय स्क्रीन रीडर के साथ पृष्ठ सुन रहा है, तो alt पाठ वह है जो वे प्राप्त करते हैं। तो इसे ऐसे लिखें जैसे आप फोन पर किसी दोस्त को चित्र का वर्णन कर रहे हों।

<img> तत्व एक बाहरी फ़ाइल को पृष्ठ में खींचता है। यह एक void तत्व है, इसलिए इसका कोई समापन टैग नहीं है; इसे जो कुछ भी चाहिए वह इसकी विशेषताओं में रहता है। दो भार-वहन करने वाली हैं:

<img src="/images/team-photo.jpg" alt="डिजाइन टीम के पाँच सदस्य अपने डेस्क पर">

src फ़ाइल का पथ है, पृष्ठ के संबंध में या एक पूर्ण URL। alt वैकल्पिक पाठ है, वह शब्द जो छवि की जगह लेते हैं जब वह प्रदर्शित नहीं होती है या नहीं देखी जा सकती है।

alt को सही पाना वह हिस्सा है जिसे लोग छोड़ देते हैं और नहीं देना चाहिए। छवि की सामग्री और उद्देश्य का वर्णन करें, न कि इसके फ़ाइल विवरण। "बार चार्ट जो 2023 और 2024 के बीच बिक्री को दोगुना दिखाता है" पाठक को बताता है कि चार्ट क्या कहता है; "chart.png" उन्हें कुछ नहीं बताता। इसे एक वाक्य तक सीमित रखें, और इसे "Image of" से शुरू न करें, ब्राउज़र पहले से ही जानता है कि यह एक छवि है।

<img> एक void तत्व है जो एक बाहरी संसाधन को लोड करता है और डिफ़ॉल्ट रूप से इसे पाठ के साथ इनलाइन में रखता है। दो विशेषताएं वास्तविक काम करती हैं: src (संसाधन URL) और alt (पाठ विकल्प)। इस अनुभाग का बाकी alt के बारे में है, क्योंकि यह वह जगह है जहां छवि की सुलभता और सही्यता वास्तव में रहती है।

alt विशेषता एक कैप्शन नहीं है और फ़ाइल का विवरण नहीं है। यह एक प्रतिस्थापन है: वह पाठ जो ब्राउज़र छवि के स्थान पर प्रदान करता है जब छवि अनुपस्थित होती है, और वह पाठ जो स्क्रीन रीडर (सॉफ़्टवेयर जो उन लोगों के लिए एक पृष्ठ को जोर से पढ़ता है जो इसे नहीं देख सकते) चित्र के बजाय बोलता है। परीक्षा कार्यात्मक समानता है। यदि आपने छवि को हटा दिया और अपना alt पाठ प्रवाह में गिरा दिया, तो क्या वाक्य अभी भी समझदारी करेगा और समान जानकारी ले जाएगा? अच्छा alt इस परीक्षा को पास करता है; "photo1" नहीं करता।

इससे दो नियम निकलते हैं। पहला, पिक्सल नहीं, उद्देश्य का वर्णन करें: एक सर्च बटन के अंदर एक आवर्धक-कांच आइकन में alt="Search" है, न कि alt="magnifying glass", क्योंकि इसकी पृष्ठ पर नौकरी कार्रवाई है, न कि ड्राइंग। दूसरा, सजावटी छवियां एक खाली alt लेती हैं। जब एक चित्र कोई जानकारी नहीं जोड़ता है, एक पृष्ठभूमि की सुंदरता या विभाजक, alt="" लिखें उद्धरण के बीच कुछ भी नहीं। यह alt को छोड़ने जैसा नहीं है। एक खाली alt सहायक तकनीक को बताता है "इसे छोड़ो, इसका कोई अर्थ नहीं", जबकि एक लुप्त alt एक स्क्रीन रीडर को फ़ाइल का नाम जोर से पढ़ने के लिए वापस करता है, जो चुप्पी से भी बदतर है।

<!-- अर्थपूर्ण: वर्णन करें कि यह क्या संचार करता है -->
<img src="revenue-2024.png" alt="2024 में राजस्व 1.2 से 2.4 मिलियन तक बढ़ा">

<!-- सजावटी: खाली alt, इसलिए सहायक तकनीक इसे छोड़ देती है -->
<img src="corner-flourish.svg" alt="">

Junoछवि तत्व एक छवि को दो चीजों की आवश्यकता है: src, जो दिखाने के लिए फ़ाइल है, और alt, जो चित्र को शब्दों में वर्णित करता है। alt को ऐसे लिखें जैसे आप किसी को फोन पर बता रहे हों कि फोटो में क्या है। यह वह बिट है जिसे सबसे अधिक छोड़ा जाता है, और यह वह बिट है जो सबसे ज्यादा मायने रखता है।

Junoछवि तत्व<img> एक void तत्व है: कोई समापन टैग नहीं, विशेषताओं में सब कुछ। वर्णन करें कि छवि क्या कहती है, न कि फ़ाइल, और कभी Image of से शुरू न करें, ब्राउज़र पहले से ही जानता है कि यह एक छवि है। एक चार्ट के alt को किसी को चार्ट बना रही संख्या को बताना चाहिए।

Junoछवि तत्व अच्छा alt एक प्रतिस्थापन है, कैप्शन नहीं: इसे वाक्य में गिराएं और अर्थ जीवित रहना चाहिए। नौकरी का वर्णन करें, न कि ड्राइंग, तो एक सर्च आइकन Search पढ़ता है। और सजावटी छवियों के लिए alt="" एक असली विकल्प है, यह एक स्क्रीन रीडर को छोड़ने के लिए कहता है, जहां एक लुप्त alt इसे फ़ाइल का नाम जोर से पढ़ने के लिए बनाता है।

उत्तरदायी छवियाँ

एक फोटो जो लैपटॉप पर तीव्र दिखता है वह एक फोन को बहुत बड़ा हो सकता है। उस पूर्ण आकार की फ़ाइल को एक छोटी स्क्रीन पर भेजना आगंतुक के डेटा को बर्बाद करता है और पृष्ठ को धीमा करता है। HTML आपको एक ही चित्र के कुछ संस्करण प्रदान करने और ब्राउज़र को वह चुनने देता है जो फिट हो।

जब आप शुरुआत कर रहे हों तो आपको हर छवि के लिए इसकी आवश्यकता नहीं है। एक समझदारी वाली फ़ाइल के साथ एक एकल <img> ठीक है। लेकिन यह जानना सहायक है कि विचार मौजूद है: एक ही फोटो कई आकारों में आ सकता है, और ब्राउज़र चुनता है।

<img src="beach-800.jpg" alt="सूर्यास्त के समय एक शांत समुद्र तट पर लहरें लुढ़क रही हैं">

उत्तरदायी छवियाँ ब्राउज़र को स्क्रीन के आधार पर एक फ़ाइल चुनने देती हैं। एक स्रोत को हार्ड-कोड करने के बजाय, आप srcset के साथ कई सूचीबद्ध करते हैं और sizes के साथ वर्णन करते हैं कि छवि कितनी चौड़ी प्रदर्शित होगी। ब्राउज़र गणित करता है और सर्वोत्तम मिल डाउनलोड करता है।

<img
  src="beach-800.jpg"
  srcset="beach-400.jpg 400w, beach-800.jpg 800w, beach-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="सूर्यास्त के समय एक शांत समुद्र तट पर लहरें लुढ़क रही हैं">

srcset में, प्रत्येक प्रविष्टि एक फ़ाइल को इसकी वास्तविक पिक्सेल चौड़ाई के साथ जोड़ता है (400w का मतलब है कि फ़ाइल 400 पिक्सेल चौड़ी है)। sizes में, आप ब्राउज़र को बताते हैं कि छवि कितनी जगह लेगी: यहां यह 600 पिक्सेल तक की स्क्रीन पर पूरी व्यूपोर्ट चौड़ाई (100vw) भरती है, और अन्यथा आधी चौड़ाई (50vw)। src पुरानी ब्राउज़रों के लिए एक फॉलबैक के रूप में रहता है। ध्यान दें alt एक बार लिखा जाता है और सभी स्रोतों पर लागू होता है, क्योंकि वे सभी एक ही चित्र हैं।

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

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="दो साइकिल चालक सुबह एक पहाड़ी सड़क पर चढ़ रहे हैं">
</picture>

ब्राउज़र ऊपर से नीचे पढ़ता है, पहला प्रारूप चुनता है जिसे वह समझता है, और यदि कोई मेल नहीं खाता तो सादे <img> पर वापस आता है। <picture> के अंदर <img> आवश्यक है; यह वह है जो वास्तव में प्रदान करता है और जहां alt रहता है।

उत्तरदायी छवियाँ एक रिज़ॉल्यूशन-स्विचिंग समस्या को हल करती हैं: एक ही छवि, विभिन्न प्रदर्शनों के लिए विभिन्न पिक्सेल आयाम, ब्राउज़र द्वारा डाउनलोड से पहले चुने जाते हैं ताकि कोई भी उन पिक्सेल के लिए भुगतान न करे जो वे नहीं देख सकते। दो उपकरण हैं, और वे विभिन्न प्रश्नों का उत्तर देते हैं।

srcset साथ sizes "कौन सा रिज़ॉल्यूशन?" का उत्तर देता है। आप ब्राउज़र को उम्मीदवार फ़ाइलों का एक सेट देते हैं, प्रत्येक को w विवरणक का उपयोग करके पिक्सेल में इसकी आंतरिक चौड़ाई के साथ टैग किया जाता है, और एक sizes मान जो इसे बताता है कि छवि विभिन्न ब्रेकपॉइंट्स पर कितनी व्यापक रूप से प्रदान होगी। एक ब्रेकपॉइंट एक स्क्रीन-चौड़ाई थ्रेशोल्ड है जिस पर लेआउट बदलता है। ब्राउज़र आपके sizes इशारे को डिवाइस के पिक्सेल घनत्व के साथ जोड़ता है सबसे छोटी फ़ाइल चुनने के लिए जो अभी भी तीव्र दिखती है।

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 350px"
  alt="चमड़े की बैकपैक आगे से दिखाई गई">

<picture> तत्व एक अलग प्रश्न का उत्तर देता है: "कौन सा स्रोत पूरी तरह से?" यह उन मामलों के लिए है जहां फ़ाइल को बदलना चाहिए, केवल इसके पैमाने को नहीं। दो सामान्य कारण। कला निर्देश, जहां एक चौड़ा बैनर संकीर्ण स्क्रीन पर एक लंबे चित्र तक काटा जाता है ताकि विषय दृश्यमान रहे, को विभिन्न छवि फ़ाइलों की आवश्यकता है, केवल एक फ़ाइल को कम करने के लिए नहीं। और प्रारूप वार्ता, जहां आप एक आधुनिक प्रारूप एक फॉलबैक के साथ प्रदान करते हैं, को ब्राउज़र को डिकोड कर सकते हैं द्वारा चुनने की आवश्यकता होती है।

<picture>
  <source media="(max-width: 600px)" srcset="hero-portrait.avif" type="image/avif">
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <source srcset="hero-wide.avif" type="image/avif">
  <img src="hero-wide.jpg" alt="एक व्यस्त रसोई में एक शेफ एक पकवान को प्लेट कर रहा है">
</picture>

क्रम मायने रखता है: ब्राउज़र पहला <source> लेता है जिसका media और type वह संतुष्ट करता है, इसलिए अपने सबसे पसंदीदा और सबसे बाध्य विकल्प को पहले रखें। पिछला <img> अनिवार्य है और यह वह तत्व है जो पृष्ठ वास्तव में प्रदान करता है; srcset और sizes स्रोतों पर फीड करते हैं, लेकिन alt, width, height, और लोडिंग व्यवहार सभी उस आंतरिक <img> पर हैं।

Junoउत्तरदायी छवियाँ एक ही फोटो कुछ आकारों में आ सकती है, और ब्राउज़र वह चुन सकता है जो स्क्रीन पर फिट हो ताकि एक फोन लैपटॉप-आकार की फ़ाइल को डाउनलोड न करे। आपको दिन एक पर इसकी आवश्यकता नहीं है; एक सादा <img> ठीक है। विकल्प वहां है जब एक पृष्ठ मोबाइल पर भारी महसूस करना शुरू कर देता है।

Junoउत्तरदायी छवियाँ जब आप चाहते हैं कि ब्राउज़र एक आकार चुने तो srcset और sizes का उपयोग करें, और जब आप फ़ाइल को स्वयं स्वैप करना चाहें तो <picture> का उपयोग करें, एक अलग फसल या आधुनिक प्रारूप के लिए। <picture> के अंदर <img> आवश्यक है और जहां alt रहता है। alt एक बार लिखें; हर स्रोत एक ही चित्र है।

Junoउत्तरदायी छवियाँ दो अलग नौकरियां: srcset प्लस sizes एक रिज़ॉल्यूशन चुनता है, <picture> कला निर्देश या प्रारूप वार्ता के लिए एक संपूर्ण स्रोत चुनता है। स्रोतों को ऊपर से नीचे पढ़ा जाता है, पहला मिल जीतता है, इसलिए सबसे-सीमित-पहले ऑर्डर करें। सब कुछ जो प्रदान करता है वह अभी भी आंतरिक <img> पर निर्भर करता है, तो वह जहां alt और आकार देने जाता है।

वीडियो और ऑडियो

HTML बिना किसी प्लग-इन के वीडियो और ध्वनि चला सकता है। एक क्लिप के लिए, आप <video> तत्व का उपयोग करते हैं; ध्वनि के लिए, <audio>। controls विशेषता जोड़ें और ब्राउज़र आपको एक प्ले बटन, एक टाइमलाइन और एक वॉल्यूम नियंत्रण मुफ्त में देता है।

<video src="tutorial.mp4" controls></video>

<audio src="podcast-episode.mp3" controls></audio>

एक छवि के विपरीत, इनके पास एक समापन टैग है, क्योंकि आप खुले और बंद टैग के बीच फॉलबैक पाठ या अतिरिक्त सेटिंग्स रख सकते हैं। जल्दी याद रखने वाली सबसे महत्वपूर्ण बात: हमेशा controls शामिल करें, अन्यथा आगंतुक के पास प्ले दबाने का कोई तरीका नहीं है।

<video> और <audio> तत्व पृष्ठ में एक नेटिव मीडिया प्लेयर एम्बेड करते हैं। controls विशेषता ब्राउज़र के निर्मित खेलने, रोकने, खोजने और वॉल्यूम इंटरफेस दिखाता है; इसके बिना, कोई नियंत्रण नहीं हैं।

<video src="product-demo.mp4" controls width="640" poster="demo-cover.jpg"></video>

कुछ विशेषताएं अपनी जगह अर्जित करती हैं। poster वीडियो चलने से पहले दिखाई गई एक स्थिर छवि सेट करता है, ताकि प्लेयर एक काला बॉक्स न हो। width प्लेयर के आकार को संरक्षित करता है। आप autoplay, loop, और muted भी जोड़ सकते हैं, हालांकि अधिकांश ब्राउज़र केवल autoplay की अनुमति देते हैं जब वीडियो भी muted हो, इसलिए वे दोनों एक साथ यात्रा करते हैं।

एक से अधिक फ़ाइल प्रारूप प्रदान करने के लिए, src को छोड़ें और इसके बजाय <source> तत्वों को सूचीबद्ध करें। ब्राउज़र पहली एक को चलाता है जो वह कर सकता है:

<video controls width="640" poster="demo-cover.jpg">
  <source src="product-demo.webm" type="video/webm">
  <source src="product-demo.mp4" type="video/mp4">
  आपका ब्राउज़र इस वीडियो को नहीं चला सकता।
</video>

स्रोतों के बाद का पाठ फॉलबैक सामग्री है, जो केवल तभी दिखाया जाता है जब ब्राउज़र उनमें से किसी को नहीं चला सकता है। <audio> उसी तरह काम करता है, controls और <source> पैटर्न के साथ, poster और width जैसी दृश्य विशेषताओं को घटाकर।

<video> और <audio> ब्राउज़र के नेटिव मीडिया पाइपलाइन को एम्बेड करते हैं, डिकोडिंग, बफरिंग, और एक निर्मित प्लेयर UI, एक तीसरे पक्ष के प्लग-इन के बिना। दोनों controls लेते हैं (नेटिव UI दिखाएं), और दोनों कई <source> बच्चों को स्वीकार करते हैं ताकि आप कई codecs (संपीड़न प्रारूप जिन्हें एक वीडियो या ऑडियो फ़ाइल एन्कोड किया जाता है) प्रदान कर सकें और ब्राउज़र को पहला चुनने दें जिसे वह डिकोड कर सके।

<video controls width="640" height="360" poster="demo-cover.jpg" preload="metadata">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-captions.en.vtt" srclang="en" label="English" default>
  आपका ब्राउज़र इस वीडियो को नहीं चला सकता।
</video>

दो उत्पादन चिंताएं यहां हावी हैं। पहला पहुंचनीयता है, जो उन लोगों द्वारा मीडिया का उपयोग करता है जो इसे सुन या देख नहीं सकते हैं। यह <track> के लिए है: यह एक समयबद्ध पाठ फ़ाइल को संलग्न करता है, आमतौर पर WebVTT प्रारूप में (एक सादा-पाठ कैप्शन प्रारूप, फ़ाइलें .vtt पर समाप्त होती हैं), मीडिया के लिए। kind="captions" उन दर्शकों के लिए भाषण और महत्वपूर्ण ध्वनि का एक पाठ संस्करण प्रदान करता है जो बहरे हैं या ध्वनि-बंद सेटिंग में हैं, जो अधिकांश लोग सार्वजनिक रूप से स्क्रॉल करते हैं। kind="subtitles" किसी अन्य भाषा में संवाद का अनुवाद करता है। default विशेषता उपयोगकर्ता को इसके लिए शिकार किए बिना एक ट्रैक चालू करती है। कैप्शन के बिना वीडियो आपके दर्शकों के एक वास्तविक टुकड़े को बाहर करता है, और कैप्शन खोज इंजन को भी मदद करते हैं, जो एक वीडियो नहीं देख सकते हैं लेकिन एक प्रतिलेख पढ़ सकते हैं।

दूसरी चिंता बैंडविड्थ है। preload नियंत्रित करता है कि ब्राउज़र चलने से पहले कितनी उत्सुकता से मीडिया प्राप्त करता है: preload="none" कुछ नहीं डाउनलोड करता है जब तक कि उपयोगकर्ता प्ले दबाता है, preload="metadata" केवल अवधि और आयाम लेता है, और preload="auto" पूरी फ़ाइल खींच सकता है। डिफ़ॉल्ट से कम कुछ भी metadata या none करें, क्योंकि एक autoloading वीडियो एक पृष्ठ चुप्पी से कर सकता है सबसे भारी चीजों में से एक है। और वही autoplay सावधानी रखती है: ब्राउज़र ध्वनि-पर autoplay को अवरुद्ध करते हैं, इसलिए एक autoplaying वीडियो muted होना चाहिए, जो कैप्शन के महत्व का एक और कारण है।

Junoवीडियो और ऑडियो<video> एक क्लिप चलाता है और <audio> ध्वनि चलाता है, कोई प्लग-इन की आवश्यकता नहीं। controls जोड़ें या कोई प्ले बटन नहीं है और आगंतुक फंस गया है। दोनों के पास समापन टैग हैं, क्योंकि आप सेटिंग्स और फॉलबैक पाठ के अंदर को टक कर सकते हैं, एक छवि के विपरीत।

Junoवीडियो और ऑडियो हमेशा controls जोड़ें, एक poster सेट करें ताकि प्लेयर एक काला आयत न हो, और एक से अधिक प्रारूप प्रदान करने के लिए <source> तत्वों को सूचीबद्ध करें। autoplay केवल तभी चलता है जब वीडियो muted भी हो, इसलिए वे दोनों एक साथ जाते हैं। ऑडियो दृश्य विशेषताओं को छोड़कर उसी पैटर्न है।

Junoवीडियो और ऑडियो कैप्शन के साथ एक <track> जोड़ें; अधिकांश लोग चुप्त देखते हैं, और खोज इंजन पाठ पढ़ते हैं जो वे नहीं देख सकते। गुना के नीचे कुछ भी के लिए preload को metadata या none पर रखें, एक autoloading वीडियो पृष्ठ को भारी बनाने के शांत तरीकों में से एक है। और ध्वनि-पर autoplay को अवरुद्ध किया जाता है, इसलिए autoplay का मतलब है muted, जो कैप्शन के लिए एक और कारण है।

आकार, आलसी लोडिंग और प्रदर्शन

जब एक छवि लोड होती है, तो यह पृष्ठ के बाकी हिस्से को चारों ओर धकेल सकती है। आप एक पैराग्राफ पढ़ रहे हैं, एक फोटो इसके ऊपर लोड करना समाप्त करता है, और अचानक पाठ नीचे कूदता है। यह कूद कष्टप्रद है, और आप इसे रोक सकते हैं: ब्राउज़र को width और height के साथ छवि का आकार पहले से बताएं।

<img src="team-lunch.jpg" alt="कार्यालय की बालकनी पर दोपहर का भोजन साझा करने वाली टीम"
     width="800" height="600">

उन नंबरों के साथ, ब्राउज़र छवि के आने से पहले सही मात्रा में स्थान संरक्षित करता है, इसलिए जब यह करता है तो कुछ नहीं कूदता है। आप फ़ाइल के वास्तविक पिक्सेल आयाम देते हैं, और CSS अभी भी इसे स्क्रीन पर आकार दे सकता है।

छवियां दो चीजों को प्रभावित करती हैं जो आप एक उपयोगकर्ता के रूप में महसूस करते हैं: लोडिंग के दौरान पृष्ठ कितनी जगह बदलता है, और यह कितना डेटा खींचता है। HTML दोनों के लिए आपको विशेषताएं देता है।

width और height सेट करना लेआउट शिफ्ट को रोकता है, सामग्री लोडिंग छवियों के रूप में चारों ओर कूदती है। जब आप आयाम घोषित करते हैं, तो ब्राउज़र तुरंत उस स्थान को सुरक्षित करता है बजाय छवि को कुछ भी नहीं में ढहने के लिए और फिर एक बार फ़ाइल आती है और इसकी असली ऊंचाई ज्ञात होती है तो विस्तार करता है।

<img src="article-header.jpg" alt="एक व्यस्त समाचार कक्ष का ऊपर से दृश्य"
     width="1200" height="675" loading="lazy">

loading="lazy" विशेषता ब्राउज़र को छवि को तब तक डाउनलोड न करने के लिए बताती है जब तक पाठक इसे दृश्य में स्क्रॉल करने वाला न हो। एक लंबे पृष्ठ के बहुत नीचे की छवियों के लिए, यह डेटा बचाता है और पहली पेंट को गति देता है। एक नियम: जो छवि आगंतुक सबसे पहले देखता है, उसे लाजी-लोड न करें, पृष्ठ के शीर्ष पर। वह एक आप जल्दी से जल्दी लोड करना चाहते हैं, इसलिए loading को छोड़ दें (या loading="eager" सेट करें)।

मीडिया आमतौर पर एक पृष्ठ का सबसे भारी हिस्सा है, इसलिए इसकी लोडिंग को नियंत्रित करने वाली विशेषताएं प्रदर्शन नियंत्रण हैं, सजावट नहीं। तीन मायने रखता है।

पहला, संचयी लेआउट शिफ्ट, यह मापता है कि पृष्ठ लोड करते समय कितनी दृश्य सामग्री चारों ओर कूदती है। सामान्य कारण एक घोषित आकार के बिना एक छवि है: ब्राउज़र इसे शून्य ऊंचाई देता है, इसके नीचे सब कुछ रखता है, फिर संपूर्ण कॉलम को रीफ्लो करता है एक बार फ़ाइल आती है और इसकी असली ऊंचाई ज्ञात होती है। आप इसे पहले से ही आस्पेक्ट अनुपात देने वाले ब्राउज़र को देकर रोकते हैं। फ़ाइल के वास्तविक पिक्सेल आयाम के लिए width और height सेट करें, और ब्राउज़र अनुपात की गणना करता है और सही बॉक्स सुरक्षित करता है भले ही CSS डिस्प्ले को आकार दे:

<img src="feature.jpg" alt="हरे खेत में सौर पैनल"
     width="1600" height="900" loading="lazy" decoding="async">

आप CSS में aspect-ratio संपत्ति के साथ एक ही इरादे को व्यक्त कर सकते हैं; बिंदु यह है कि अनुपात पिक्सेल के डाउनलोड से पहले जानना चाहिए।

दूसरा, loading="lazy" स्क्रीन के बाहर छवियों के डाउनलोड को स्थगित करता है जब तक पाठक उनके पास न जाता है, लंबे पृष्ठों पर प्रारंभिक पेलोड को काट रहा है। महत्वपूर्ण अपवाद आपका LCP तत्व है (सबसे बड़ी सामग्री पेंट, सबसे बड़ी छवि या स्क्रॉल किए बिना दृश्यमान ब्लॉक, और एक मीट्रिक जो ब्राउज़र और खोज रैंकिंग घड़ी)। उस छवि को लाजी-लोड करना उस मीट्रिक को विलंबित करता है जो वह मापता है, इसलिए गुना के ऊपर नायक सावधानी से लोड करना चाहिए।

तीसरा, decoding="async" ब्राउज़र को मुख्य धागे से छवि को डीकोड करने देता है, इसलिए संपीड़ित बाइट को पिक्सेल में बदलना अन्य प्रदान को अवरुद्ध नहीं करता। यह छवियों के लिए एक छोटा, सुरक्षित जीत है जो स्क्रीन पर पहली चीज नहीं हैं।

प्रारूप अन्य लीवर है। WebP और AVIF आधुनिक छवि प्रारूप हैं जो JPEG या PNG की तुलना में समान दृश्य गुणवत्ता पर बहुत छोटे से संपीड़ित करते हैं; AVIF आमतौर पर फ़ाइल आकार पर जीता है, WebP ब्राउज़र समर्थन और एन्कोड गति पर। ट्रेड-ऑफ संगतता और उपकरण है, जो ठीक है <picture> type स्रोतों के साथ क्या निर्मित है: पहले AVIF की पेशकश करें, अगला WebP, और एक JPEG या PNG फॉलबैक अंतिम, और हर ब्राउज़र सबसे अच्छी फ़ाइल प्राप्त करता है वह वास्तव में डिकोड कर सकता है।

Junoआकार, आलसी लोडिंग और प्रदर्शन हर छवि को एक width और height दें और पृष्ठ फोटो लोड होने के दौरान कूदना बंद कर देता है। फ़ाइल का असली पिक्सेल आकार का उपयोग करें; CSS अभी भी इसे स्क्रीन पर सिकोड़ सकता है। यह एक आदत सबसे कष्टप्रद लोडिंग ग्लिच को ठीक करता है।

Junoआकार, आलसी लोडिंग और प्रदर्शनwidth और height जगह संरक्षित करते हैं ताकि कुछ भी लोड होने के दौरान स्थानांतरित न हो, और loading="lazy" दृश्य में स्क्रॉल करने वाली छवियों को तब तक डाउनलोड रखता है। पृष्ठ पर पहली छवि लाजी-लोड न करें; वह एक सीधे लोड करना चाहिए।

Junoआकार, आलसी लोडिंग और प्रदर्शनwidth और height घोषित करें (या aspect-ratio सेट करें) ताकि ब्राउज़र बॉक्स सुरक्षित करे और लेआउट कूदना बंद कर दे; अनुपात पिक्सेल से पहले जानना होगा। गुना के ऊपर नायक को छोड़कर सब कुछ लाजी-लोड करें, क्योंकि आपकी सबसे बड़ी दृश्य छवि को लाजी-लोड करना उस मीट्रिक को धीमा करता है जो इसे देखता है। और AVIF या WebP को <picture> के माध्यम से एक JPEG फॉलबैक के साथ परोसें ताकि हर ब्राउज़र सबसे छोटी फ़ाइल प्राप्त करे जिसे वह डिकोड कर सके।