What is the preferred way to Scale up and down images in responsive web design for Mobile?

What is the preferred way to Scale up and down images in responsive web design?

Different image for different screen size is better or should we scale the same image up and down?

Which option is best consid开发者_运维技巧ering the performance of website?

I need cross browser way to work on all latest and old mobile browsers.

Sencha.io Src is a good solution (based on tinySrc).

It does device detection, then serves a scaled image depending on the devices screen size.

http://www.sencha.com/products/io/

@jitendra vyas,

scaling same image for different screen size is not a good thing but scaling images is not a bad thing for responsive web design may you have to change the images & design at some specific resolution like 1024px & 480px because they are also a resolution of tab & mobile device.

There are so many reasons like:

1) for a mobile device is to heavy to load large size images.

2) scaling an single image for different resolution became ugly at some point of time special for larger images.

there are some reference website links for how cleverly you can use images.

http://thinkvitamin.com/

http://colly.com/

http://css-tricks.com/

& article on it http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

I'm thinking about writing a small jQuery plugin to load images trough ajax based on the size of the container. But please feel free to steal my idea. (Just mention here if you got it finished.) ;-)