1. html
  2. /tags
  3. /img

<img>

Definition

The HTML <img> element is used to insert an image into a web page. It is an empty element, meaning it doesn't have a closing tag.

Examples

Here's an example of the <img> element in use:

<img src="image_url" alt="alternative_text">

The src attribute specifies the URL of the image to be displayed. This can be a relative or absolute URL. The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded, or if the user is using a screen reader to access the page. The alt attribute is also used by search engines to understand the content of the image.

Additionally, the <img> element can be used as a clickable link by wrapping it inside an <a> element and specifying the destination URL in the href attribute of the <a> element.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
srcSpecifies the URL of the image to be displayedNo
altProvides alternative text for the imageNo
widthSpecifies the width of the image in pixelsNo
heightSpecifies the height of the image in pixelsNo
titleSpecifies a title or tooltip for the imageNo
loadingSpecifies how the image should be loaded (e.g. "lazy" for lazy loading)No
decodingSpecifies how the image should be decoded (e.g. "sync" for synchronous decoding)No
sizesSpecifies a list of image sizes and their corresponding media queries for responsive imagesNo
srcsetSpecifies a list of image sources and their corresponding widths for responsive imagesNo
crossoriginSpecifies whether the image should be treated as CORS-enabled (e.g. "anonymous" or "use-credentials")No
ismapSpecifies whether the image is part of a server-side image map. If this attribute is present, the browser will treat the image as a clickable area of the mapNo
referrerpolicySpecifies the referrer policy to use when fetching the image. This attribute is useful when you want to control the information that is sent to the server when the image is requestedNo
usemapSpecifies the name of a client-side image map to use for the image. This attribute is useful when you want to associate the image with a set of clickable areas defined by the image mapNo

Best Practices

  • Always use the alt attribute to provide a descriptive text alternative for the image. This is important for accessibility, as users who cannot see the image can still understand its meaning.
  • Use descriptive and relevant file names for your images. This can help with search engine optimization (SEO) and can make it easier for users to understand the content of the image.
  • Optimize your images for web use. This can include reducing the file size, compressing the image, and choosing an appropriate file format (e.g. JPEG for photographs, PNG for graphics).
  • Use the width and height attributes to specify the size of the image in pixels. This can help the browser lay out the page more quickly and accurately.
  • Use the loading attribute to control when and how the image is loaded. This can improve page performance and reduce the amount of data downloaded by the user.
  • Use the srcset and sizes attributes to provide responsive images that are optimized for different screen sizes and resolutions.
  • Consider using the title attribute to provide additional information about the image. This can be useful for users who hover over the image or use a screen reader.
  • Test your images on different devices and browsers to ensure they are displayed correctly and are accessible to all users.

Accessibility Considerations

  • Always use the alt attribute to provide a descriptive text alternative for the image. This is important for users who cannot see the image, including users with visual impairments or users who have disabled images in their browser.
  • Make sure that the alt attribute accurately describes the content and function of the image. For example, if the image is a photograph of a person, the alt text should describe who is in the photograph and what they are doing.
  • Use descriptive and meaningful file names for your images. This can help users with cognitive disabilities or learning disabilities understand the content of the image.
  • Provide context for the image by using surrounding text or other visual cues. This can help users understand the meaning and purpose of the image, especially if it is complex or abstract.
  • Use the title attribute to provide additional information about the image, especially if it contains important information that is not included in the alt text.
  • Use the longdesc attribute to provide a longer description of the image, especially if the alt text cannot fully describe its content or function. However, note that the longdesc attribute is deprecated in HTML5 and should be used with caution.
  • Avoid using images that flicker, flash, or change rapidly, as these can trigger seizures in some users.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes