HTML Images and multimedia

HTML Images and Multimedia: Enhancing Your Web Pages

Images and multimedia elements make websites visually appealing and engaging. Let's explore how to properly include them in HTML.

1. Adding Images with <img> Tag

<img src="image.jpg" alt="Description of image" width="500" height="300">

Important Attributes:

• src: Path to the image file
• alt: Alternative text (for accessibility and SEO)
• width/height: Dimensions (use CSS for responsive images)
• loading="lazy": For lazy loading

2. Responsive Images

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image" style="width:100%;">
</picture>

3. Adding Videos

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

4. Embedding Audio

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

5. Embedding YouTube Videos

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

6. Image Maps

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
</map>

Proper use of multimedia elements can significantly enhance user experience on your website!