Skip to toolbar

Community & Business Groups

A new proposal in the WHATWG Mailing List featuring both advantages

Kornel Lesinski just published a new proposal on the WHATWG mailing list this morning. He proposes a new element in HTML called <pic> which is shorter to write than <picture> would be.

This solution combines the advantages of our proposal of the picture-element and the proposal of the resolution based srcset approach by the WHATWG published recently.

The syntax also can be written in a short way and in a long way. This is good for developers because normal developers can write it the common HTML-like way while advanced developers are provided with a short-syntax.
Also the syntax is able to use @media-queries as well as resolutions.

In short syntax the code could look:

<pic src="small.jpg (max-width:320px), medium.jpg (max-width:768px), large.jpg">alt text</pic>

<pic src="portrait.jpg (orientation:portrait), landscape.jpg">alt text</pic>

<pic src="small.jpg 0.5x, medium.jpg 1x, large.jpg 2x" style="width:100%">alt text</pic>

While the long syntax could be like that:

       <source src="large.jpg" media="(min-width:1024px)" width="1024" height"="300">
       <source src="medium.jpg" media="(min-width:768px)" width="768" height="200">
       <img src="small.jpg" width="320" height="100">
       alt text

This of course is a first proposal to which I already replied with several improvements but it looks like we finally get in the right direction where we will get the best approach we can find together. And I am super happy that this has been proposed.

Here is the full description and here the link to the thread.

8 Responses to A new proposal in the WHATWG Mailing List featuring both advantages

  • I still prefer this piece of code:

    <picture alt=””> <source src=”mobile.jpg” /> <source src=”large.jpg” media=”min-width: 600px” /> <source src=”large_1.5x-res.jpg” media=”min-width: 600px, min-device-pixel-ratio: 1.5″ /> <img src=”mobile.jpg” /> </picture>

    pic looks a little strange to me because there is not a vid or fig element also because it was too long typing it.

    For me this src=”small.jpg (max-width:320px)” isn’t better than the code above. I stick to that old code…


    • Kornel Lesiński

      It has been discussed before that strict interpretation of min-device-pixel-ratio and lack of image resolution declaration makes this solution hard to use and it fails to address several important cases.

      e.g. it doesn’t take zoom or cache into account. You’ll be forced to use explicit width/height, because min-device-pixel-ratio alone will not make image high-res (you’ll just get larger pixelated image).


      • Anselm Hannemann

        I agree. Also I’d love to have the new element being open for all options. if you want to use media-queries with all features (also min-device-pixel-ratio) you should be able to do so but also you should be able to just define resolutions and let the browser decide what to choose.


  • David Moulton

    I agree. I think that with Kornel’s ideas plus your suggested modifications, Anselm, we’re getting somewhere.

    I wonder if the pic element can address the tension that @grigs presents at between the desire for the pre-parser to get things done quickly on one hand, vs. waiting for the layout to be calculated on the other. Will be watching with interest.


  • so does this mean the possibility of srcset is no more or is that still on the table along with pic and picture?


    • Anselm Hannemann

      It is implemented in the pic-idea.


    • Kornel Lesinski

      All options are open until major implementations ship and/or websites start depending on a new element.

      The spec can be changed as long as it doesn’t “break the web”.

      The srcset can still be replaced.


  • Pingback: jQuery Picture steuert Bilder in responsiven Designs zuverlässig - Dr. Web Magazin

Leave a Reply

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

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.