<img>

The HTML <img> element embeds an image onto a web page. It is a self-closing tag that displays visual content such as photos, graphics, illustrations, icons, and other visual elements to enhance the user experience.

💡 Tip: Always include the alt attribute to provide alternative text for screen readers and when images fail to load.

Syntax

<img src="assets/images/image1.jpg" alt="Description of the image">

Essential attributes

• src: The path or URL to the image file (required if srcset not used).
• alt: Alternative text to describe the image (required for accessibility). This is also displayed if the image can not be loaded.
• loading: Controls whether the image is loaded immediately or later in the browser (lazy, eager, or auto).

Basic usage

Here's how to add an image to your webpage:

<img src="/images/logo.png" alt="Learn Web Development logo">

Image file formats

Common image formats supported by web browsers:

• JPEG/JPG: Great choice for high quality photographs or artwork.
• PNG: Good for images requiring transparency (e.g. background).
• GIF: Used for simple animations, supports transparencies.
• WebP: Modern format, small file size, good for compression.
• SVG: Vector graphics that scale without losing quality.

You can find out more about image types in our Image Types & Compression course page.

Sizing images

The width and height attributes should also be used so the browser can allocate the avilable space while loading. Fluid sizes (%, em etc) are also essential so images can scale for different screen sizes:

<!-- Using width and height attributes -->
<img src="sky.jpg" alt="Sky at night with stars" width="300" height="200">

<!-- Responsive image sizing -->
<img src="sky.jpg" alt="Sky at night with stars" style="max-width: 100%; height: auto;">

The loading attribute

Using the loading attribute to improve page load performance:

<!-- Eager load important above-the-fold images -->
<img src="/images/header.jpg" alt="Header banner" loading="eager">

<!-- Lazy load images below the fold -->
<img src="/images/product30.jpg" alt="Product 30 image" loading="lazy">

💡 Tip: Use lazy for images below the page fold. This will avoid loading images immediately when they are below the visible page area to improve page load performance.

Accessibility

The alt attribute is crucial for accessibility. Descriptive text should be used for screen reader software and to display if an image can not be loaded:

<!-- Good: Descriptive alt text -->
<img src="dog.jpg" alt="A small dog on a walk in the park">

<!-- Poor: Generic alt text -->
<img src="dog.jpg" alt="dog">

Decorative images that are not part of the page content should have empty alt attribute:

<img src="page-border.png" alt="">

Common use cases

• E-commerce product photos.
• Icons, favicons, and logos.
• User avatars/profile pictures.
• Illustrations and diagrams.
• Website header images and carousels.
• Background images (CSS is often used for this).
• Thumbnails and galleries.

Best practices

• Optimize images (compress file size where possible).
• Provide the correct image size for your target device/usage.
• Use correct image formats.
• Provide alt text for all images.
• Consider using a CDN (content delivery network) to serve images.
• Consider lazy loading where images are not immediately in view.
• Use responsive images for better user experience.

Styling with CSS

Images can be styled using CSS:

img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.responsive-class {
  max-width: 100%;
  height: auto;
}

Conclusion

The <img> element is a common element for adding visual content such as images, illustrations, icons, and diagrams to web pages. Remember to always include alt text and optimize your images for the best user experience and performance. Page load time can also be improved by adding the loading attribute.