Is there a good way to handle images for a responsive web site

Looking for any tips or solutions to handling the delivering of images to a responsive website. At the moment, I'm looking at just setting image size and optimizing as much as a can to reduce the file size. Or, hard coding which image should be delivered based on the device and then having the client upload several sizes of the image. The latter may not work not work for my client as it would require them to be able to properly resize/scale images and then insert them into the correct TV.

I was unable to find an add-on, but does anyone know of an add-on or a service that can resize the images server side based on a media query?

http://davidwalsh.name/responsive-design
http://alistapart.com/article/fluid-images/

Thanks Susan:

I had read the fluid images before, but the davidwalsh option seems interesting. I found a link the other day that provided several sources and services for handling images, but now I can't find it. Accidentally cleared my history. If I find it, I'll post it back here. Of course, integrating a solution into MODx and such that the site owner can easily upload images on their own is another story.

I may need to reach a happy medium with and optimize images the best I can. In some sites I see a lot of one of the following:
1. Images are just plain big! And they would certainly take a long time to download on mobile.
2. The image div is hidden and not available on mobile so it eliminates any download time. Not very exciting, but at least the important content can get quickly delivered.

Found it:

http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

Which framework are you using?

For Bootstrap 3 I set the size at the largest resolution within a layout and then let the framework do the rest:



Of course I'm using pThumb rather than phpThumb.

This allows pThumb to scale the image uploaded by the client to the highest width and height within a given layout and then the img-responsive class in Bootstrap scales it as needed.

Depending on what framework you're using, if any, strategy may differ.

Thanks for the input.

I'm using Foundation 5. Not sure phpThumb will do what I need. Foundation 5 will resize the image as needed, but does not alter the actual file size. If I have a full screen width slider image that is 1680 px wide, I'd like to avoid someone on an iPhone without wifi having to download that full size image. With most images it might not be that big a deal if the image is 20 or so kb larger than it needs to be. But with big full screen images, it definitely poses an issue.

I found something called Adaptive Images that seems promising.
http://adaptive-images.com/

There's phpthumbsof which appears to do what you want but I'm not sure as it doesn't use the same syntax of phpthumbof so it would be hard to convert existing calls to this extension but if you're starting fresh may be a solution.

Just read Menno's promotion for phpThumbsUp. Sounds like it might be just the ticket. I know Menno did a lot of work getting Foundation 3 into MODx, and now I see he's on to 4. I'm living dangerously and jumped up to 5. If Menno says it works, then I will certainly give it a try. I'm surprised I didn't see it in the Add-Ons.

Thanks for bringing it to my attention. I'll try an post back with feedback. [ed. note: mmcgee last edited this post 12 years, 9 months ago.]