View video tutorial

HTML <picture> Tag

HTML

The <picture> is used to display images on the html page.

HTML <picture> Tag


The <picture> component contains zero or more <source> component and a <img> component that offers alternative images for different device and view-port situations.

The <picture> element is most useful and effective in responsive web design where the image can adjust its view depending on the size of the device.

The <picture> element uses zero or more <source> as an alternative source for the image and uses a <img> element as the last child of the <picture> element, as a fallback option if none of the source tags match.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<picture>
    <source media="(min-width:650px)" srcset="workplace1.jpg">
    <source media="(min-width:465px)" srcset="workplace2.jpg">
    <img src="workplace2.png" alt="workplace2" style="width:auto;">
</picture>
Try it Now »

Click on the "Try it Now" button to see how it works.