Images in HTML

Images make web pages visually engaging. HTML provides elements for embedding images, providing fallbacks, and adapting to different screen sizes.

img tag

The <img> element embeds an image in the page. It is a void element (self-closing).

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

Required attributes

Optional attributes

<img
src="photo.jpg"
alt="Sunset over the ocean"
width="800"
height="600"
loading="lazy"
decoding="async"
>

Image formats

figure tag

<figure> groups an image with a caption (<figcaption>):

<figure>
<img src="chart.png" alt="Bar chart showing quarterly sales">
<figcaption>Figure 1: Quarterly sales for 2026</figcaption>
</figure>

<figure>
<figcaption>Team photo at the annual conference</figcaption>
<img src="team.jpg" alt="Team photo">
</figure>

<figcaption> can go before or after the image. One <figure> can contain multiple images.

Responsive Images with srcset

The srcset attribute lets the browser choose the best image resolution based on the device’s screen size and pixel density:

Width-based selection

<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Landscape photo"
>

• srcset: lists images with their actual width in pixels (400w, 800w, etc.).
• sizes: tells the browser how wide the image will be displayed at different breakpoints (100vw = full viewport width, 50vw = half, 33vw = one-third).

The browser selects the smallest image that fits the layout at the device’s pixel density.

Pixel density selection

<img
src="icon-1x.png"
srcset="icon-1x.png 1x,
icon-2x.png 2x,
icon-3x.png 3x"
alt="Icon"
>

Use 1x, 2x, 3x for standard, retina (2×), and super-retina (3×) displays.

picture tag

The <picture> element provides art direction - different images for different screen sizes or formats. It contains multiple <source> elements and one <img> fallback.

Format fallbacks (WebP with JPEG/PNG fallback)

<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Landscape">
</picture>

The browser uses the first <source> with a format it supports. If none match, it falls back to the <img> tag.

Art direction (crop for mobile)

<picture>
<source
media="(max-width: 600px)"
srcset="photo-cropped.jpg"
>
<source
media="(min-width: 601px)"
srcset="photo-full.jpg"
>
<img src="photo-full.jpg" alt="Full landscape photo">
</picture>

On narrow screens, a cropped version is shown. On wider screens, the full photo is displayed.

Combined: art direction + resolution switching

<picture>
<source
media="(max-width: 600px)"
srcset="photo-mobile-1x.jpg 1x,
photo-mobile-2x.jpg 2x"
>
<source
media="(min-width: 601px)"
srcset="photo-desktop-1x.jpg 1x,
photo-desktop-2x.jpg 2x"
>
<img src="photo-desktop-1x.jpg" alt="Landscape">
</picture>

Detailed Table with Tag, attributes and attribute values