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:
<pic>
<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
</pic>
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.
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…
It has been discussed before that strict interpretation of
min-device-pixel-ratioand 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).
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.
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 http://blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset/ 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?
It is implemented in the pic-idea.
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
srcsetcan still be replaced.Pingback: jQuery Picture steuert Bilder in responsiven Designs zuverlässig - Dr. Web Magazin