As part of updating my website to be more mobile friendly I need to serve up different images based on screen/browser size. I've e across using the "picture" element which works great when it's supported. The problem at this time is that it's not supported everywhere. I'd like to detect if the "picture" element is supported by the browser so I can fall-back to a different method.

How can I detect if the "picture" element is supported by the browser?

Since this is the only type of check I currently need, I'd like to avoid pulling in a library (ex. Modernizr) if possible.

As part of updating my website to be more mobile friendly I need to serve up different images based on screen/browser size. I've e across using the "picture" element which works great when it's supported. The problem at this time is that it's not supported everywhere. I'd like to detect if the "picture" element is supported by the browser so I can fall-back to a different method.

How can I detect if the "picture" element is supported by the browser?

Since this is the only type of check I currently need, I'd like to avoid pulling in a library (ex. Modernizr) if possible.

• javascript
• html

4 Answers 4

Finding out if picture is supported is actually quite simple:

var pic = !!window.HTMLPictureElement;
console.log("picture supported: " + pic);

This will print false if your browser needs a workaround or true if it supports picture. Clearly it doesn't necessarily mean that support for picture is also plete and great (and as of early 2016 it's probably still work in progress in many browsers).

Regardless of the picture element having a fallback built-in, I believe there are legitimate reasons for wanting to know whether a browser supports the picture element or not.

For example you might want to provide your own workaround instead of using something massive like the picturefill.js polyfill.

You don't need to detect browsers at all.

The <picture> specification requires that the last child element of the <picture> is an <img>.

If <picture> isn't supported than the <img> will be rendered as normal. The <img> is your fall-back.

Here's what I've e up w/ so far.

NOTE: I've only been able to test this in Chrome on Galaxy S4 & S5, WebView on Galaxy S4, and Chrome on iPhone 4. My code will skip this code on larger screens so I don't need to test there (it'll never execute this code). So between the limited testing plus the "hacky" approach on this (just smells bad) plus my limited knowledge of the feasibility/reliability of this approach, I'm not confident this is even a feasible approach (let alone a good one).

var mypic = document.createElement('picture');
// Will be '[object HTMLPictureElement]' when supported; '[object HTMLUnknownElement]' otherwise
var strObj = '' + mypic;
if(strObj.indexOf("HTMLPictureElement") != -1)
{
    // Picture element supported
}
else
{
    // Picture element not supported
}

Quentin is right; JS is not needed. However, if you need to change the image URL based off a media query, you can use CSS. You may want to consider using this instead of the <picture> tag altogether.

@media (min-device-width: 600px) {
    .myimage {
        content: url(myimage.jpeg);
    }
}

The breaking point (600px in this example) is up to you.