# img

Defines an image inserted in the web page.

Example: Copy

Picture of a Ha Long Bay sunset
<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">

Example: Copy

Picture of a Ha Long Bay sunset
<!-- For responsive images, use srcset and sizes -->

<img src="/images/sunset-360.jpg"
  alt="Picture of a Ha Long Bay sunset"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

src

The URL where the image is hosted.

Required.

"/images/tiramisu.jpg"

You can use a relative URL.

"http://htmlreference.io/images/traffic.jpg"

You can use an absolute URL.

alt

Alternative text to describe the image if it's not available. Used by screen readers.

Required.

"Picture of a man standing in front of the Dragon's Pearl boat"

Describe the image as if it was not present.

srcset

Defines a list of different sources for the same image. The browser will choose the best one to use.

"/images/sunset-@2x.jpg 2x"

You can define a pixel density descriptor like 2x. In this case, sunset-@2x.jpg is 720px wide.

<img src="/images/sunset.jpg"
     srcset="/images/sunset-@2x.jpg 2x"
     alt="Picture of a Ha Long Bay sunset">

The browser will either use sunset.jpg or sunset-@2x.jpg depending on the space available, the pixel density, etc.

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

You can use a width descriptor like 360w. This value is divided by one of the source sizes (defined in the sizes attribute) to obtain the pixel density.

<img src="/images/sunset-360.jpg"
  alt="Picture of a Ha Long Bay sunset"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

sizes

Defines a list of different source sizes. You can combine each of them with a media query.

"(min-width: 800px) 1440px, 720px"

The browser will use the 1440px image (defined in srcset) if the viewport is larger than 800px.
It will use the 720px otherwise.

<img src="/images/sunset-360.jpg"
  alt="Picture of a Ha Long Bay sunset"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

height

Defines the height of the image.

"240"

The height in pixels.

width

Defines the width of the image.

"120"

The width in pixels.