Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

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.

share|improve this answer

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.

share|improve this answer
ouu, i know, but we are use a function to create multiple images size and it's created base on the ratio. So, we cant define the images size in line of IMG tag. – Benhard Jei Feb 22 '13 at 5:10

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.