A Q&A on the Picture Element

by Yoav Weiss, Mat Marquis, Marcos Caceres

6 Reader Comments

Back to the Post
  1. Any news on whether Microsoft will support this new picture element behavior?

    Copy & paste the code below to embed this comment.
  2. If they don’t, future versions of IE will just fallback to <img>. For IE users this will mean bad UX (either high loading times or low-res images). I think, the IE team knows this and they’ll support picture eventually :)

    Copy & paste the code below to embed this comment.
  3. Will picture elements be able to have layout before a source has been loaded?

    img elements will have the correct layout if they have width/height attributes – which means no reflows on load – only local repaint(s).

    But – if width/height are tampered with via CSS (like in a lot of resp. image CSS solutions; max-width: 100%; height: auto) – the img elements collapse (retaining the proper width – but height becomes 0) – causing reflow once enough data from the source has been loaded to calculate layout of the element.

    It would be a big improvement over img elements if the picture element would be able to have layout as soon as a source has been picked – provided the browser is able to gander width/height information from said source element.

    Copy & paste the code below to embed this comment.
  4. @Paul – No official word from MS yet, but as Šime said, it’s reasonable to believe they will support picture eventually.

    @Rasmus – If you’d hop on to the spec’s repo, you’d see that many of the open issues touch on intrinsic sizing.
    Your feedback would be highly welcomed on either one of the existing issues or a new one.

    Copy & paste the code below to embed this comment.
  5. @Yaov – Thanks! Glad that this IS being worked on. I’m amazed I haven’t read anything about it sooner – seems like layout is never really mentioned in picture-element coverage (not even in this blog post!?).
    I’m gonna sift through the issues and see if I can spot anything missing. Though I imagine I won’t; it looks like you’ve got everything covered :)

    Copy & paste the code below to embed this comment.
  6. Please note that a script that already supports the real element already exists, and it’s much faster then picturefill. Its name is picturePolyfill and you can find it on GitHub, here https://github.com/verlok/picturePolyfill

    Copy & paste the code below to embed this comment.