On Wed, 16 May 2012 10:33:05 +0200, Matthew Wilcox <m...@matthewwilcox.com> wrote:
Am i right in believing that the srcset attribute are limited to
pixels? A unit that's dying out in all responsive designs? Is it
extensible to em, % etc? Because that's what's used.

I'm afraid you are confusing a lot of stuff together here.

You can use em and % freely in your stylesheets/CSS. The values from srcset is used to fetch the right resource during early prefetch, checked against the width and height of the viewport (and only that viewport).

Having ems or % would make no sense whatsoever there, because you don't know what they mean. 50% of what? The viewport size? You would basically make it always matching. Because 50% will always be half of whatever your viewport size is...

Say you write    <img srcset="mycoolpic.jpg 50%w, myotherpic.jpg 75%w">

If viewport is 50px wide, mycoolpic will match 25px, myotherpic will match 37.5px, so it'll pick myotherpic.jpg If viewport is 200px wide, mycoolpic will match 100px, myotherpic will match 150px, so it'll pick myotherpic.jpg If viewport is 500px wide, mycoolpic will match 250px, myotherpic will match 375px, so it'll pick myotherpic.jpg If viewport is 1000px wide, mycoolpic will match 500px, myotherpic will match 750px, so it'll pick myotherpic.jpg

See the pattern? It'll always pick the one closest to 100%, no matter what. It doesn't make sense.

Also note: the width of an image, and the value you write in srcset, doesn't need to have any connection at all. It's only used to match against the viewport to choose what picture the user agent will fetch.


This example will make your logo a smaller mobile version when your viewport width is 600 or smaller (you should also have some media queries in your stylesheet that change the layout at that stage):

  <img src="fallback..." srcset="logo-150px.jpg, logo-50px.jpg 600w">

Here, the logo-50px.jpg will only be loaded if your viewport width is less than 600. It'll choose logo-150px.jpg for everything else.


CSS (and the domain media queries work in), and resource fetching that works with prefetching/-loading is two totally seperate things/problems.

If you make a solution that will support em/% in a meaningful way, you would have to wait for layout in order to know what size that means. So you will have slower-loading images, and ignore the "we want pictures fast" requirement.

--
Odin Hørthe Omdal (Velmont/odinho) · Core, Opera Software, http://opera.com

Reply via email to