HTML Images and Media: Adding Visual Content

HTML Images and Media

Images and media elements make web pages more engaging and informative.

Basic Image Element

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

<img src="images/logo.png" 
     alt="Company Logo" 
     width="200" 
     height="100">

Responsive Images

<img src="small.jpg" 
     srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
     alt="Responsive image">

Figure and Figcaption

<figure>
    <img src="chart.png" alt="Sales Chart">
    <figcaption>Monthly sales data for 2024</figcaption>
</figure>

Audio Element

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support audio.
</audio>

Video Element

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support video.
</video>

Best Practices

• Always include alt text for images
• Optimize image file sizes
• Use appropriate image formats
• Provide fallback content for media