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
