HTML Images

What are HTML Images?

Images can improve the design and appearance of a web page. The HTML <img> tag is used to embed an image in a web page.

Basic Image

The src attribute specifies the path to the image, and the alt attribute provides alternative text:

<img src="photo.jpg" alt="A beautiful landscape">

Image Attributes

Width and Height

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

Image as Link

<a href="large-image.jpg">
    <img src="thumbnail.jpg" alt="Click to enlarge">
</a>

Image Formats

Common image formats for the web:

• JPEG: Best for photographs
• PNG: Best for images with transparency
• GIF: Best for simple animations
• WebP: Modern format with better compression
• SVG: Vector graphics that scale without quality loss

Responsive Images

Use CSS to make images responsive:

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

Picture Element

The <picture> element allows you to specify multiple image sources:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>

Best Practices

• Always include the alt attribute for accessibility
• Optimize images for web (compress file size)
• Use appropriate image formats
• Specify width and height to prevent layout shift
• Use responsive images for mobile devices