htmlimageperformancepicture-element

What are the pros and cons of the picture element?


What are the pros and cons of the HTML5 picture element?

In particular, whether the browser will download all images? Or the browser downloads only the image matching media query?


Solution

  • I guess there are mostly pros. It will adapt the picture used depending on the media query.

    The picture element will only download the picture that is necessary at that time, matching the media query used. If you resize, it will download another image if necessary.

    The con might be that not all browsers support it yet, so that is why you can revert to use an img tag inside a picture which makes it backwards compatible: another pro.