HTML Picture Element

HTML <picture> Element

The <picture> element lets you show different pictures for different devices or screen sizes.

The HTML <picture> Element

The <picture> element gives you more flexibility over which image is shown. It holds one or more <source> elements, each pointing to a different image with the srcset attribute, so the browser can pick the one that best fits the current view or device. Each <source> has a media attribute that says when it is the best choice.

Note: Always put an <img> element as the last child of <picture>. The browser uses it when it does not support <picture> or when no <source> matches.

Example

Different images shown at different screen sizes.

A page using a picture element with two source elements that show different images at different screen widths (food image at min-width 650px, car image at min-width 465px), and a fallback img (img_girl.jpg) as the last child.

> Output: complete HTML page

Prompt

A page using a picture element with two source elements that show different images at different screen widths (food image at min-width 650px, car image at min-width 465px), and a fallback img (img_girl.jpg) as the last child.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Screen Sizes</title>
</head>
<body>

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

</body>
</html>

When to use the Picture Element

There are two main reasons to use <picture>. First, bandwidth: on a small screen you do not need to load a large image, so the browser uses the first matching <source> and ignores the rest. Second, format support: some browsers do not support every image format, so you can list images in several formats and the browser uses the first one it recognizes.

Example

The browser uses the first image format it recognizes.

A page using a picture element with two source elements offering different image formats (PNG then JPG), and a GIF img (img_beatles.gif, alt Beatles) as the fallback last child, so the browser uses the first format it recognizes.

> Output: complete HTML page

Prompt

A page using a picture element with two source elements offering different image formats (PNG then JPG), and a GIF img (img_beatles.gif, alt Beatles) as the fallback last child, so the browser uses the first format it recognizes.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Format</title>
</head>
<body>

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

</body>
</html>

HTML Image Tags

The image-related tags are: <img> (defines an image), <map> (defines an image map), <area> (defines a clickable area inside an image map), and <picture> (defines a container for multiple image resources).