HTML Images and Multimedia

By /

1. Introduction to HTML Images

Images enhance the visual appeal of a webpage. HTML provides the <img> tag to embed images.

Basic Syntax of an Image:

<img src="image.jpg" alt="Description of the image">

✔ src – Specifies the image file path (URL or local).
✔ alt – Provides alternative text for accessibility and SEO.

✅ Example:

<img src="sunset.jpg" alt="Beautiful sunset over the ocean">

✅ Output:
Displays the image sunset.jpg.

2. Image File Formats

FormatBest Used ForSupports Transparency?Compression Type
JPEG / JPGPhotos & complex images❌ NoLossy
PNGTransparent images, graphics✅ YesLossless
GIFAnimations✅ YesLossless
SVGScalable vector graphics✅ YesVector-based
WebPModern web images✅ YesLossy/Lossless

✅ Use JPEG for photos.
✅ Use PNG for transparency.
✅ Use WebP for better performance.

3. Adding Width & Height to Images

You can define the size of an image using width and height attributes.

<img src="photo.jpg" alt="Nature Photo" width="300" height="200">

✅ Controls the exact size of the image.

4. Responsive Images (Auto-Scaling for Mobile)

Use CSS to make images responsive:

<img src="photo.jpg" alt="Nature" style="max-width: 100%; height: auto;">

✔ Ensures the image resizes according to screen size.

5. Using Images as Links

You can use an image inside a link to make it clickable.

<a href="https://example.com">
    <img src="logo.png" alt="Company Logo" width="100">
</a>

✅ Clicking the logo redirects to another page.

6. Background Images

Instead of using <img>, you can set an image as a background using CSS:

body {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
}

✅ Covers the entire page with an image.

7. Introduction to HTML Multimedia (Audio & Video)

HTML supports embedding audio and video without third-party plugins.

8. Adding Audio in HTML

Use the <audio> tag to embed sound files.

Basic Syntax:

<audio controls>
    <source src="music.mp3" type="audio/mp3">
    Your browser does not support the audio element.
</audio>

✔ controls – Adds play, pause, and volume controls.
✔ Supports formats: MP3, WAV, OGG.

✅ Example Output:
🎵 Audio player appears on the page.

9. Adding Video in HTML

Use the <video> tag to embed videos.

Basic Syntax:

<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

✔ controls – Adds play, pause, volume options.
✔ Supports formats: MP4, WebM, OGG.

✅ Example Output:
📽 Video player appears on the page.

10. Autoplay & Loop for Audio/Video

<video autoplay loop muted>
    <source src="background.mp4" type="video/mp4">
</video>

✅ The video plays automatically, loops, and is muted.

11. Embedding YouTube Videos

You can embed YouTube videos using an <iframe>.

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" allowfullscreen>
</iframe>

✅ Replace VIDEO_ID with the actual YouTube video ID.

12. Full Example: HTML Images & Multimedia

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Images & Multimedia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #f4f4f4;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <h1>HTML Images & Multimedia</h1>

    <h2>Displaying an Image</h2>
    <img src="landscape.jpg" alt="Beautiful Landscape" width="500">

    <h2>Clickable Image</h2>
    <a href="https://example.com">
        <img src="logo.png" alt="Company Logo" width="100">
    </a>

    <h2>Background Image</h2>
    <div style="width: 300px; height: 200px; background-image: url('pattern.png');">
        Background Example
    </div>

    <h2>Audio Example</h2>
    <audio controls>
        <source src="music.mp3" type="audio/mp3">
    </audio>

    <h2>Video Example</h2>
    <video controls width="400">
        <source src="video.mp4" type="video/mp4">
    </video>

    <h2>Embedded YouTube Video</h2>
    <iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" allowfullscreen>
    </iframe>

</body>
</html>

✅ This fully working example covers images, background images, audio, video, and YouTube embedding.

13. Best Practices for Images & Multimedia

✅ Use correct file formats (JPEG for photos, PNG for transparency, WebP for performance).
✅ Optimize images for fast loading.
✅ Use alt text for accessibility and SEO.
✅ Make images responsive with max-width: 100%.
✅ Use video formats that work across all browsers (MP4 is best).
✅ Avoid autoplaying audio unless necessary.

Conclusion

In this chapter, you learned:
✅ How to add and optimize images in HTML.
✅ How to embed audio and video with <audio> and <video>.
✅ How to embed YouTube videos.
✅ How to use CSS for background images.

Scroll to Top