How to Use Images in HTML

Images make websites attractive and engaging. Learning to use images properly in HTML is essential for web development.

Adding an Image

Use the <img> tag:

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

Attributes explained:

• src – path to the image file
• alt – alternative text for accessibility
• width/height – control image size

Responsive Images

Make images responsive using CSS:

img {
  max-width: 100%;
  height: auto;
}

Image Formats

Common formats include JPG, PNG, GIF, and SVG. Use JPG for photos, PNG for transparency, and SVG for vector graphics.

Conclusion

Adding images correctly improves user experience, SEO, and overall website appearance. Always use proper alt text and optimize image size for fast loading.