Responsive Images?

[Phreaddee]

hey guys,

https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0

this is a list of different responsive image techniques I stumbled across.

was wondering in anyone has used any of them and has anything to say about them.

personally I've only ever used the picturefill one myself and it works OK, but has anyone found a solid solution that can be rolled out and even utilised by the client without too much head against wall action?

 

[leroy30]

Banging my head on a wall is my preference.

I tend to use the highest res image and let it size itself according to parent dimensions. I find it the simplest-to-implement approach.

Using a grid based responsive layout helps too.

I know it's good to optimise content and downloading a massive image on your mobile only to shrink it anyway is bad but my argument is 1) Retina display will be the future of everything 2) maintainability 3) Simplicity 4) Mobile broadband is pretty good these days anyway

 

[Edge]

Banging my head on a wall is my preference.

I tend to use the highest res image and let it size itself according to parent dimensions. I find it the simplest-to-implement approach.

Using a grid based responsive layout helps too.

I know it's good to optimise content and downloading a massive image on your mobile only to shrink it anyway is bad but my argument is 1) Retina display will be the future of everything 2) maintainability 3) Simplicity 4) Mobile broadband is pretty good these days anyway

Ditto - especially with 4G arriving on the block.

Which one of those techniques just uses 'max-width: 100%'? Didn't know there were so many techniques - there was I thinking there was just the one.

 

[Phreaddee]

I agree with you to a point leroy, that's my usual approach anyway. Although I've been doing a lot of image heavy sites recently and the old display:none; technique just isn't going to cut it. If the main image for instance is 640x320, for retina that should be 1280x640. On a mobile it would be 320x160 ( or smaller).
Ideally I'd like to have the three images ready to go, and depending on the query display the correct one. The picture fill one was the only one with somewhat logical structure, but a total pain to implement.

It's not really about the max-width, that does its thing between the breakpoints. But realistically I don't want to have 30 1280x640 images loading on mobile when I can use 30 320x160 ones.

I was also unaware of many "techniques" with this hence the question. 4g might be coming but if my 3G coverage is anything to go by, I'm not banking on that saving my bacon...

 

[ronaldroe]

I haven't come across a situation where I needed it thus far, but I always figured if I found it necessary, I'd just grab the $(document).outerWidth(true); and use that to swap out the images for higher resolutions as required.

 

[notarypublic]

This was the article I was thinking of, but now I've seen that they've written more articles on the issue:
http://24ways.org/2011/adaptive-images-for-responsive-designs-again/
http://24ways.org/2011/adaptive-images-for-responsive-designs/

 

[leroy30]

@Phreaddee - I guess your right if your site has heavy use of imagery then our laziness will do no good.

Why is it so image heavy? i.e. how are the images being utilised. Might help us give a better insight on what technique we *think* is best

 

[Phreaddee]

design agency portfolio. need I say more?

they exist in a layout, not within a slideshow or anything, just one after the other.

2 columns, description on the left. image on the right.

 

[helloworld]

Banging my head on a wall is my preference.

I tend to use the highest res image and let it size itself according to parent dimensions. I find it the simplest-to-implement approach.

Using a grid based responsive layout helps too.

I know it's good to optimise content and downloading a massive image on your mobile only to shrink it anyway is bad but my argument is 1) Retina display will be the future of everything 2) maintainability 3) Simplicity 4) Mobile broadband is pretty good these days anyway

what kind of file size / format / dimensions are you talking about?
i have made several sites with fullscreen bg images.. and havent gone past 1400w .jpg optimzed for web at 45-65.. with good results. (even spread across my dual 1920x1080 23' monitors).

*curious what everyone else has adopted as their standard optimizations