- From: Anselm Hannemann - Novolo Designagentur <anselm@novolo.de>
- Date: Wed, 24 Aug 2011 10:49:24 +0200
Hi all, Paul Irish said I should mention my problems here. So I will: As we now have the possibility of creating fluid and responsive layouts in several ways we have a problem with images. There's currently no good feature to implement something like responsive images which adapt to the different device-resolutions. We only can implement one image with one resolution scaling-up and down. Of course the best solution would be to have a file format supporting this feature by offering diff. quality like .sid format does. But it's very unlikely to have such a feature in the next few years. So I thought of a simple html-attribute to work with media-queries and something like "media-size-sources" to provide different images fitting to the device-resolution. New browsers can read the new attributes but even old browsers degrade gracefully with the basic src attrobute. I shared the code in a gist here: https://gist.github.com/1158855 and will write it down here, too: <!-- backwards compatible solution --> <!-- the browser should read media-query and then download the right file for the actual screen size --> <img src="http://cdn.url.com/img/myimage_xs.jpg" media-xs="(min-device-width:320px and max-device-width:640px)" media-src-xs="http://cdn.url.com/img/myimage_xs.jpg" media-m="(min-device-width:640px and max-device-width:1024px)" media-src-m="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-device-width:1024px)" media-src-xl="http://cdn.url.com/img/myimage_xsl.jpg" /> Tried several other ways, too, (you can see in versions) but this seems to be the best. What do you think about providing a way to use responsive media through media-queries? For now there are only some JS-Cookie solutions which are not a good approach and are very unflexible. kindest regards, -Anselm
Received on Wednesday, 24 August 2011 01:49:24 UTC