HTML Images and Multimedia

---

If text is the soul of your webpage, then Images and Multimedia are the personality. In today’s digital age, users don’t just read; they watch, listen, and interact.

In this masterclass, we move beyond just “showing a picture.” We will learn how to optimize media for search engines, handle responsive layouts, and prepare for Technical Interviews, UGC-NET, PGT, TGT and other technical exam questions regarding modern web standards.

---

1. The <img> Tag: The Window to Your Content

To display an image, we use the <img> tag. Crucially, this is an empty tag (it has no closing tag).

The Anatomy of a Professional Image Tag

HTML

<img src="success-path.jpg" alt="Student achieving goal" width="500" height="300">

• src (Source): The path to your file.
• alt (Alternative Text): The most important attribute for Search Engines and Accessibility. If the image fails to load, this text appears.
• width & height: Always define these to prevent “Layout Shift” while the page loads.

---

2. Choosing the Right Format (The Efficiency Matrix)

For fast loading, choosing the right format is non-negotiable.

Format	Best For	Success Tip
JPEG	Real-world photos.	Best balance of quality and size.
PNG	Logos/Graphics with transparency.	Use for high-detail icons.
WebP	The Modern Standard.	30% smaller than JPEG. Highly recommended.
SVG	Icons and Illustrations.	Never loses quality, no matter how much you zoom.

---

3. The “Science Project” Analogy

Think of your webpage as a School Science Exhibition Board:

• Text: Your written explanation.
• Images: The colorful charts and diagrams pinned to the board.
• Audio/Video: The digital tablet you place next to the board to give a live demonstration.
• Alt Text: The caption below the chart for someone who cannot see the colors clearly.

---

4. Multimedia: Bringing the Web to Life

Modern HTML5 allows you to play audio and video natively—no more “Flash Player” required!

A. The <video> Tag

HTML

<video controls width="640" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

• controls: Essential! It gives the user Play/Pause buttons.
• poster: An image that shows before the video starts.

B. The <audio> Tag

Perfect for podcasts or exam instructions.

HTML

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

---

---

Pro-Developer & Exam Success Tips

Development Tips (For Professional Sites)

1. Aspect Ratio: Never distort images. If you change the width, let the height adjust automatically (or vice-versa).
2. WebP over JPG: Always convert your images to WebP before uploading to WordPress to improve your Google PageSpeed score.
3. Images as Links: You can wrap an <img> inside an <a> tag to create a clickable banner or logo.
4. Lazy Loading: Always add loading="lazy" to images below the fold. This tells the browser: “Don’t download this image until the user scrolls to it.” This makes your site lightning fast.
5. Muted Autoplay: Most browsers block videos that autoplay with sound. To autoplay, you must include the muted attribute: <video autoplay muted loop>.

Exam Tips (For UGC NET / PGT / Technical Interviews)

1. Empty Tag: Remember, <img> is an Empty (Void) element. It does not have a </img> tag.
2. Attribute Name: In exams, don’t confuse src with href. Images use src; Links use href.
3. The Alt Attribute: If asked which attribute is best for “Screen Readers” or “SEO,” the answer is always alt.
4. Vector vs Raster: Know that SVG is a vector (mathematical) format, while JPEG/PNG are raster (pixel-based) formats.

---