RWD With the <picture> Element

Responsive Web Design techniques are a way for developers to adapt a site layout to a wide range of devices, from desktops to tablets and phones, have it consistently look sharp and load quickly. And no responsive design solution is complete without an adequate technique for dealing with images.

The picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Acording to W3C:
“This specification provides developers with a means to declare multiple sources for an image, and, through [CSS3-MEDIAQUERIES] (CSS Media Queries), it gives developers control as to when those images are to be presented to a user. This is achieved by introducing a new picture element to [HTML] that makes use of the source element. The picture element remains backwards compatible with legacy user agents by degrading gracefully through fallback content (i.e., through the img element) while also potentially providing better accessibility than the existing img element.”

When to use the <picture> element:

The picture element should be used when an image source exists in multiple densities, or when a responsive design dictates a somewhat different image on some types of screens.

The picture element is not a general replacement for the img element. When there is only a single image source, authors should just use the img element as usual, rather than cluttering their page with additional unnecessary syntax.

Example 1:

This example shows a basic usage of the picture element to present the same image at multiple resolutions.

    <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"/>
    <img alt="A rad wolf." src="pic1x.jpg"/>

In this example, the user agent will choose one of the three URLs—“pic1x.jpg”, “pic2x.jpg”, or “pic4x.jpg”—depending on whether the quality of the user’s screen and perhaps other factors, such as the user’s bandwidth.


Example 2:

     <source media="(min-width: 45em)" srcset="large.jpg"/>
     <source media="(min-width: 18em)" srcset="med.jpg"/>
     <img src="small.jpg" alt="The president giving an award." width="500" height="500"/>

In this example using RWD CSS3 media-queries we can specify the images for the devices. Also pixels it’s acceptable instead of em: Bellow see the example:

   <source srcset="mobile.png, mobile-hd.png 2x"/>
   <source media="(min-width: 480px)" srcset="tablet.png, tablet-hd.png 2x"/>
   <source media="(min-width: 1024px)" srcset="desktop.png, desktop-hd.png 2x"/>
   <img src="tablet.png" alt="A photo of London by night"/>


Example 3:

     <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"/>
     <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"/>
     <source srcset="small-1.jpg, small-2.jpg 2x"/>
     <img src="small-1.jpg" alt="The president giving an award." width="500" height="500"/>

In this example, the user agent first chooses which set of sources to look at, depending on the size of the user’s screen. Then it chooses which of the different-density sources to load, based on information it knows about the user’s device.


Example 4:

To help with this, rather than specifying the densities of each image source, the sizes of each image source can be specified directly, along with the size of the img element. The user agent will then automatically calculate the effective pixel density of the image and choose which one to download accordingly.

    <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"/>
    <img src="pic400.jpg" alt="The president giving an award."/>

In this example, the image source is provided at three sizes—400 pixels wide, 800 pixels wide, and 1600 pixels wide. As well, it declares that the img element is intrinsically sized to be as wide as the entire viewport.


Example 5:

The previous example showed how to deal with the img element’s size being unpredictable because it was a fraction of the viewport’s size. Sometimes, though, the size of an image can also change based on a site’s layout breakpoints.

    <source sizes="(max-width: 30em) 100%, (max-width: 50em) 50%, calc(33% - 100px)"
            srcset="pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,
                    pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w"/>
    <img src="pic400.jpg" alt="The president giving an award."/>

The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100%, 50%, or calc(33% – 100px).

The six image sources provided automatically cover every reasonable possibility. For small screens (phone size, or even smaller, like watches), anything from the 100 pixel wide image to the 800 pixel wide image may be downloaded, depending on screen size and density. For medium and large screens, anything from the 400 pixel wide image and up may be chosen. The author doesn’t have to do any math or complex figuring, just provide the image in enough sizes to cover everything they believe reasonable.

Specifying this information with multiple source elements, one for each of the media queries, is possible, but much more verbose, as the srcset attributes have to be duplicated for each of them.


Example 6:

This example shows how picture and other HTML elements can be used together.

         <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"/>
         <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"/>
         <source srcset="small-1.jpg, small-2.jpg 2x"/>
         <img src="small-1.jpg" alt="" width="200" height="200"/>
      <figcaption>A figure of a fox jumping over a lazy box.</figcaption>


Browser Compatibility:

The picture element is still a proposal and in a very early stage.
It isn’t supported as of yet, even by modern browsers because it doesn’t belong to the official W3C HTML5 specs (it’s not included in the list of elements) and it’s subject to change.

You can find more info here.

One thought on “RWD With the <picture> Element

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.