Images & Media क्या है?

Images & Media वे सभी visual और audio elements होते हैं जो किसी webpage को आकर्षक और interactive बनाते हैं।

Unordered List:

• Images (तस्वीरें)
• Videos (वीडियो)
• Audio (आवाज़)
• GIFs (एनिमेटेड इमेज)

सरल भाषा में:

• Text + Images + Media = बेहतर User Experience

HTML में Images का उपयोग

Image Tag (<img>) क्या है?

HTML में image दिखाने के लिए <img> tag का उपयोग किया जाता है।

Syntax:

<img src="image.jpg" alt="description">

Attributes:

Ordered List:

1. src → image का path
2. alt → image का description
3. width → चौड़ाई
4. height → ऊंचाई

Image Tag Example

<img src="nature.jpg" alt="Beautiful Nature" width="500" height="300">

Alt Tag क्यों जरूरी है?

Ordered List:

1. Accessibility improve करता है
2. Search Engine को image समझने में मदद करता है
3. Image SEO में मदद करता है

Images के प्रकार (Image Formats)

Unordered List:

• JPEG (.jpg) → Photos के लिए
• PNG (.png) → Transparent images
• GIF (.gif) → Animation
• WebP (.webp) → Best compression और quality

Responsive Images क्या होती हैं?

Responsive images different devices (mobile, tablet, desktop) के अनुसार adjust होती हैं।

Example:

<img src="image.jpg" srcset="small.jpg 500w, large.jpg 1000w" alt="responsive image">

HTML में Video जोड़ना

Video Tag (<video>)

Syntax:

<video controls width="500">
  <source src="video.mp4" type="video/mp4">
</video>

Attributes:

Ordered List:

1. controls → play/pause button
2. autoplay → auto play
3. loop → बार-बार चले
4. muted → बिना आवाज

HTML में Audio जोड़ना

Audio Tag (<audio>)

Syntax:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Media Elements के फायदे

Ordered List:

1. Website को attractive बनाते हैं
2. User engagement बढ़ाते हैं
3. Content को समझना आसान बनाते हैं

Image Optimization क्या है?

Image optimization का मतलब है:

• Image size कम करना
• Quality maintain करना
• Fast loading सुनिश्चित करना

Image Optimization Techniques

Ordered List:

1. Image compress करें
2. सही format चुनें
3. Alt tag add करें
4. Lazy loading use करें

Lazy Loading क्या है?

Lazy loading में images तभी load होती हैं जब user scroll करता है।

Example:

<img src="image.jpg" loading="lazy" alt="lazy image">

Media Optimization क्यों जरूरी है?

Unordered List:

• Website speed improve होती है
• SEO बेहतर होता है
• User experience बढ़ता है

Common Mistakes (गलतियाँ)

Unordered List:

• Large images upload करना
• Alt tag न देना
• Wrong format use करना
• Duplicate images use करना

Best Practices for Images & Media

Ordered List:

1. SEO-friendly file name रखें
2. Alt tag जरूर लिखें
3. Image compress करें
4. Responsive design use करें
5. Lazy loading enable करें

Practice Section

Task 1: Image Tag लिखें

• एक image add करें जिसमें alt tag हो

Task 2: Video Tag लिखें

• एक video add करें

Task 3: Audio Tag लिखें

• एक audio file add करें

Practice Answers

Image Example:

<img src="seo-image.jpg" alt="SEO Image Example">

Video Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Audio Example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Conclusion (निष्कर्ष)

Images & Media किसी भी वेबसाइट का महत्वपूर्ण हिस्सा हैं।

अगर आप:

• सही HTML tags use करते हैं
• Images optimize करते हैं
• Media का सही उपयोग करते हैं

तो आपकी वेबसाइट:

• Fast होगी
• Attractive होगी
• SEO friendly बनेगी