HTML picture Element

The HTML<picture> element allows you to show various pictures for various gadgets or screen sizes.

The <picture> element has been designed to offer native support for responsive pictures in HTML5. When used along with <source> and <img> it goes about as a picture that will be loaded differently relying upon the properties of the gadget it’s shown on. At the end of the day, supporting browsers will load a different picture (provided by the <source> elements) for each predetermined sort of gadget.

---

The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility adaptability in determining picture resources.

The <picture> element contains one or more <source> elements, each referring to various pictures through the srcset attribute. This way the browser can pick the picture that best fits the current view and/or gadget.

Each <source> element has a media attribute that defines when the picture is the most suitable.

Example

Show various pictures for various screen sizes:

<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>

Note: Always indicate an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that don’t support the <picture> element, or if none of the <source> tags match.

---

When to use the Picture Element

There are two main purposes for the <picture> element:

1. Bandwidth

In the event that you have a small screen or gadget, it isn’t important to load an enormous picture file. The browser will use the first <source> element with coordinating attribute values, and disregard any of the accompanying elements.

2. Format Support

A few browsers or gadgets may not support all picture designs. By using the <picture> element, you can add pictures of all formats, and the browser will use the first format it perceives, and overlook any of the accompanying elements.

Example

The browser will use the first image format it perceives:

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

Note: The browser will use the first <source> element with coordinating attribute values, and overlook any following <source> element.

---

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

HTML Basics