Right: it's been yonks since I wrote and article and feeling a little inclined to write about responsive/adaptive images as it's a "sensitive" subject. That big ol' can of worms. I'm not writing an article here though, just would like to get some response (look out for the puns) on others' methods.

 

At the moment I'm attempting to edit a super simple page where when you change from mobile up, the image changes based on the breakpoint. My current train of thought is doing it in CSS as backgrounds - lowers requests and easy to implement. The biggest issue doing this is being able to configure the actual image. I can use background-size: contain and that's all fine and dandy (couldn't give a monkeys about lower versions of IE) but it doesn't give you the same flexibility as containing the image in, well, <img>.

 

Another option is the SVG route. I have variations of the images I'm using in both vector and raster (they're illustrations) so have a degree of flexibility - as opposed to the clients who give you thumbnail images wanting a slider... The problem with SVG is it's all very... new. I'm all for moving forward but not sure if it's the appropriate way for what I'm trying to achieve. Apart from the current background and SVG options, I'm also toying with images served by PHP. This works, but I don't think I can change the image - it'd be a variation of the same file.

 

As much as JS is all good and proper, I don't want to use it. Ideally, a CSS solution. I've used a few attribute selectors with HTML5 but not advanced stuff. Perhaps I could alternate images through HTML? Haven't tried that yet other than an image gallery in the past, in lieu of JS.

 

Does anyone have any good experience (even bad - to learn from) with this sort of thing. Due to the simplicity of the page and what it theoretically does, I want to keep it the simplest method. Mobile = image 1, Tablet = image 2, Desktop = image 3. Without adding any unnecessary markup.

 

Thoughts, opinions, experience all very welcome.

 

** I'm more interested in first hand experience etc... as I'm very aware of search engines and articles such as on CSS-Tricks **

Edited June 21, 201313 yr by 4li4s

For anyone monitoring this little venture, I'm currently settled on PictureFill. Works perfectly for what I need it to and works for all those IE squares. That is, until another test proves that this method is also fruitless