Responsive Design that Uses Different Images Sizes (big, medium & small) for Phones, Tablets, and PCs

Question

Our CMS creates 3 type of images size every time the content created: big, medium and small. We don't want to change our admin page that creates that 3 images types. Can anybody find a solution for our problem of creating a responsive front page using responsive design, which can load the different image for different browser sizes?

• Mobile phone: small size images
• Tablet : medium size images
• PC: big size images

I have heard many thing about responsive design, but it doesn't seem to account for the image size, it still loads the big image even in the small device. I found another website that loads different images, but it creates the small images on the fly as the website is loaded, so, I would like to find a different technique.

Answer 1

Unfortunately there isn't really a good way to serve up different image files based on the browser view size or connection speed. You could resort to user-agent sniffing but that is less than idea.

For more information about potential future solutions I would recommend reading: On Responsive Images.

Also check out this Javascript/.htaccess based solution from Filament Group.

Answer 2

No bulletproof solutions for this situation.

Try solutions for nginx https://gist.github.com/phpdude/1451684 without changing backend.

Or you can use hack: save picture in JPEG (like 1000x500) with quality 0 (zero, really)

On hi-res (retina) displays it will looks fine because ppi is high.

On normal displays use <img src="....jpg" height="250"> real height/2 It will looks fine too. Or set size over css.

And because quality is low this image has low size.

This solution for hi-res displays and normal. For mobile and low-res displays will be better use custom design with custom set of images.