HTML <picture> Tag Definition, Usage and Example

The <picture> HTML Tag specifies an element that compromises zero or maybe more <source> elements and only one <img> element. The browser will evaluate each child <source> element and select the one that is best match. The <picture> HTML Tag is utilized to provide web developers more options when defining image sources. The <picture> HTMLTag is part of the Images HTML category in HTML Element Reference. The attributes of the <picture> HTML Tag are global and event attributes.

<picture> code block example to learn how it works is given below.

<picture>
  <source ...>
  <source ...>
  ...
  <img ...>
</picture>

The second example usage of the “<picture>” code block example is given below.

<picture>
  <source srcset="/pix/examples/32m.jpg" media="(min-width: 450px)">
  <img src="/pix/examples/5m.jpg" alt=“Example image">
</picture>

What is <picture> HTML Tag

The <picture> HTML Tag allows the web developer to have additional control over how images are specified on the sites. The most common application of the <picture> HTML Tag element will be in the context of visual style in responsive design projects. The <picture> HTML Tag has two tags used: more than one <source> HTML Tags and only one <img> HTML Tag. The <source> HTML Tags are used to provide information about the image. The <picture> HTML Tag behaves in a similar way to the <video> and <audio> elements. The web developer configures a number of alternative sources, and the first resource that meets the requirements is the one that is used.

How to Use <picture> HTML Tag?

To use the <picture> HTML Tag, the web developer should write <picture></picture> with no less than zero or more <source> elements placed in between the start and end tags. The web developer can only include one <image> element, potentially interspersed with script-supporting components.

Example Usage of <picture> HTML Tag?

The following examples of usage of <picture> HTML Tag are given below.

<picture>
  <source srcset="/pix/examples/310.jpg" media="(min-width: 600px)">
  <source srcset="/pix/examples/20m.jpg" media="(min-width: 300px)">
  <img src="/pix/examples/15m_cropped.jpg" alt=“A picture of lovely dog”>
</picture>
<picture>  
    <source srcset=“example.jpg" media="(min-width: 800px)">  
    <source srcset=“example2.jpg" media="(min-width: 400px)">  
    <img srcset=“butterfly.jpg" alt="default image" style="width: auto;">  
</picture> 

What are the Attributes of <picture> HTML Tag?

There are multiple attributes for the <picture> HTML Tag. The following attributes are listed below.

  • Global Attributes: The <picture> HTML Tag supports the global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <picture> HTML Tag supports the event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <picture> HTML Tag?

The following are the Default CSS Settings for <picture> HTML Tag. Some examples are listed below this document.

footer {
    font-size: .8rem;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.output {
    background: #eee;
    position: relative;
}

What are the Related other HTML Tags to <picture>?

The other related HTML Tags to the <picture> HTML Tag are listed below.

  • <figcaption> HTML Tag: The <figcaption> HTML Tag and the <picture> HTML Tag are related because they are both images HTML Tags. The <figcaptio> HTML Tag specifies the caption for a <figure> element.
  • <area> HTML Tag: The <area> HTML Tag and <picture> HTML Tag are related because they are both images HTML Tags. The <area> HTML Tag defines the boundaries of an area within an image map.
  • <svg> HTML Tag: The <svg> HTML Tag and <picture> HTML Tag are related because they are both images HTML Tags.  The <svg> HTML Tag defines a framework for SVG visuals.
  • <map> HTML Tag: The <map> HTML Tag and <picture> HTML Tag are related because they are both images HTML Tags. The <map> HTML Tag defines a user graphics map.
Holistic SEO
Follow SEO

Leave a Comment

HTML <picture> Tag Definition, Usage and Example

by Holistic SEO time to read: 3 min
0