Creating a screen size for every width is insane. Like many, I prefer to keep it to three image sizes, that and for my sanity. The problem is, I need a interpolater that if say in my situation, I have an image designed for 320px and the width gets changed to 480px, 160px difference the interpolater can fill in the missing space, intelligently ?

That doesn't make much sense to me. you scale your images down not up. If you have the images set to max-width: 100%; height: auto; then they will automatically scale, then you use Javascript or the HTML5 picture element to swap out the images depending on the screen size. you don't need sizes for every screen size, the only purpose of this is to speed up downloading on smaller devices, it doesn't matter if an image is 10% too large. but it would be slow if the image was 300% larger as that's unnecessary data being downloaded.

I will need images for every screen size. If I want to feed an image to a 480px width, and I only have a 320px and a 510px width image, that space will have to be filled in by an image.

Why do you need an image for every screen size? There are tens if not hundreds of different screen sizes, not to mention more being developed. Unless I am totally misunderstanding what you are looking for this is the definition of madness

I'll need an image for mostly all screen sizes as I mentioned. I have designed a 320px width image, as well as 510px image. The problem arises when the width is 480px, I wan the image to fill the container, if I don't make an image for 480px in width, I'll be left with spaces in width of the container, understand

You use the 510 image in that case (480 screen) and let css scale it down. I don't see what the problem widh doing that is? It's the approach the entire industry takes.

^ absolutely that. What you do is create a fixed set of available sizes, say at 320, 640, & 960 then use the one that's best suited to the viewport (screen) size.

This stuff should also be automated, so you create the largest image then use php or imagemagik to create all the smaller versions. Imagine doing a store with 10,000 products.. automation is key

Images can scale to what ever size you want with a width in % maintaining the aspect ratio unless you have specified a fixed heigh. Make sure the height is set to auto and use the 510 px image for all screen sizes below. If the image has a width of 100% it will take up all available width in the container and scale perfectly to any size.

By letting CSS with the use of percentages control the width, the image will adjust to size, correct ? Or use PHP or Imagemagik ?

By letting CSS with the use of percentages control the width, the image will adjust to size, correct ? Or use PHP or Imagemagik ?

Yes with CSS you can ajust the displayed size of images (you can also load different background images). But if you need to change the images in the html (which you not should do for display purposes but to enhance loadtime) then you would need scripting. I guess JS to detect the window size or user agent and PHP (or other server languages) to generate the markup.

EDIT: Note I never had to make a site like that myself. Fluid CSS has been enough for my projects so someone else might be able to give you a better answer.

Edited March 16, 201511 yr by Nillervision