HTML इमेज एलिमेंट्स: आवश्यक एट्रिब्यूट्स और बेस्ट प्रैक्टिसेज

HTML <img> एलिमेंट वेब डेवलपमेंट का एक महत्वपूर्ण हिस्सा है, जो डेवलपर्स को वेबपेजेस में इमेजेस एम्बेड करने की सुविधा देता है

Free web development bootcamp in Hindi covering HTML, CSS, JavaScript, React, and GitHub from zero to advanced level

। ट्रेनिंग कंटेंट के अनुसार, प्रत्येक इमेज एलिमेंट के साथ चार आवश्यक एट्रिब्यूट्स शामिल होने चाहिए जो उचित कार्यक्षमता, एक्सेसिबिलिटी और परफॉर्मेंस सुनिश्चित करते हैं।

चार आवश्यक इमेज एट्रिब्यूट्स

1. सोर्स (src) एट्रिब्यूट

src एट्रिब्यूट ब्राउज़र को बताता है कि कौन सी इमेज फाइल लोड करनी है। यह हो सकता है:

• एक एब्सोल्यूट URL जो एक्सटर्नल रिसोर्स की तरफ पॉइंट करता हो

• एक रिलेटिव पाथ लोकल इमेज फाइल के लिए

html

<img src="https://example.com/images/dog.jpg">

2. Alt एट्रिब्यूट एक्सेसिबिलिटी के लिए

alt एट्रिब्यूट वैकल्पिक टेक्स्ट प्रदान करता है जो इमेज के न दिखाई देने पर एक विकल्प का काम करता है

Illustration explaining alt-text accessibility with a photo of people walking and example HTML alt tag

। यह महत्वपूर्ण है:

• स्क्रीन रीडर उपयोगकर्ताओं के लिए जो अंधे या दृष्टिहीन हैं

• उन स्थितियों में जहाँ इमेजेस लोड नहीं हो पातीं

• सर्च इंजन ऑप्टिमाइज़ेशन के लिए

Alt टेक्स्ट के लिए बेस्ट प्रैक्टिसेज:

• वर्णनात्मक और संक्षिप्त हों - इमेज के बारे में महत्वपूर्ण बात पर ध्यान दें

• अनावश्यक वाक्यांशों जैसे "की फोटो" या "की इमेज" से बचें

• उपयुक्त होने पर रचनात्मक, मज़ेदार या काव्यात्मक हो सकते हैं

• केवल सजावटी इमेजेस के लिए खाली रखें (alt="") अनावश्यक दोहराव से बचने के लिए

html

<img src="dog.jpg" alt="चमकदार काले कुत्ते की सोचती हुई तस्वीर">

3. Width और Height एट्रिब्यूट्स

width और height एट्रिब्यूट्स इमेज के आयाम पिक्सेल में निर्दिष्ट करते हैं। ये वैल्यूज इमेज फाइल के वास्तविक पिक्सेल आयामों से मेल खाना चाहिए।

html

<img src="dog.jpg" alt="चमकदार काले कुत्ते की सोचती हुई तस्वीर" width="400" height="300">

महत्वपूर्ण नोट्स:

• वैल्यूज केवल संख्या के रूप में निर्दिष्ट करें (कोई यूनिट आवश्यक नहीं)

• HTML में एट्रिब्यूट्स का क्रम कोई मायने नहीं रखता

• ये आयाम वास्तविक इमेज फाइल साइज़ को दर्शाने चाहिए

Width और Height क्यों महत्वपूर्ण हैं

हालांकि width और height एट्रिब्यूट्स के बिना भी इमेजेस सही तरीके से डिस्प्ले होंगी, लेकिन इन्हें शामिल करने से महत्वपूर्ण परफॉर्मेंस लाभ मिलते हैं:

लेआउट स्थिरता

जब ब्राउज़र को पहले से इमेज के आयाम पता नहीं होते, तो उन्हें:

1. पहले इमेज फाइल डाउनलोड करनी पड़ती है

2. आयाम निर्धारित करने के लिए फाइल पढ़नी पड़ती है

3. पेज लेआउट की फिर से गणना और समायोजन करना पड़ता है

4. मौजूदा टेक्स्ट के आसपास कंटेंट को संभावित रूप से शिफ्ट करना पड़ता है

यह पढ़ते समय कंटेंट जंपिंग का निराशाजनक अनुभव बनाता है, क्योंकि इमेजेस लोड होती हैं और टेक्स्ट को चारों ओर धकेलती हैं।

परफॉर्मेंस ऑप्टिमाइज़ेशन

आयाम पहले से निर्दिष्ट करके, ब्राउज़र कर सकते हैं:

• तुरंत सही मात्रा में स्थान आरक्षित करना

• इमेजेस के डाउनलोड समाप्त होने से पहले लेआउट की गणना करना

• कंटेंट शिफ्टिंग और लेआउट थ्रैशिंग को रोकना

• एक स्मूथ यूजर एक्सपीरियंस प्रदान करना

संपूर्ण इमेज एलिमेंट उदाहरण

यहाँ चारों आवश्यक एट्रिब्यूट्स के साथ एक उचित रूप से संरचित इमेज एलिमेंट है:

html

<img src="https://example.com/dog.jpg" alt="चमकदार काले कुत्ते की सोचती हुई तस्वीर" width="400" height="300">

कब खाली Alt टेक्स्ट का उपयोग करें

कुछ विशिष्ट परिस्थितियाँ हैं जहाँ खाली alt टेक्स्ट उपयुक्त है:

उदाहरण: टेक्स्ट के साथ कंपनी लोगो

html

<h1>हैप्पी डॉग डेकेयर</h1> <img src="logo.png" alt="" width="100" height="50">

इस मामले में, चूंकि कंपनी का नाम पहले से ही हेडिंग में मौजूद है, स्क्रीन रीडर द्वारा "हैप्पी डॉग डेकेयर" और "हैप्पी डॉग" दोनों की घोषणा करना अनावश्यक होगा और उपयोगकर्ता अनुभव को कम करेगा।

महत्वपूर्ण: हमेशा alt एट्रिब्यूट शामिल करें, भले ही वह खाली हो। इसे पूरी तरह से छोड़ने से स्क्रीन रीडर इमेज फाइलनाम की घोषणा कर सकते हैं।

चार आवश्यक एट्रिब्यूट्स - src, alt, width, और height - मिलकर एक्सेसिबल, परफॉर्मेंट और उपयोगकर्ता-अनुकूल वेब अनुभव बनाते हैं। उचित कार्यान्वयन लेआउट शिफ्टिंग को रोकता है, सहायक तकनीकों का समर्थन करता है, और यह सुनिश्चित करता है कि इमेजेस समग्र वेब अनुभव में सकारात्मक योगदान दें।