Q:

Best standard Image Sizes for different width of screens for website

I am using picturefill.js library to pull up same image with different sizes on different width of screen.
Dilemma is that what should be the number of images should I create by keeping in mind of all mobile, tablet, desktop ? 
By doing this I want to save bandwidth.
Right now, I am creating same image with with different below sizes. Size of images are in pixels
240   
320 
640   
480 
600 
768 
960
992
1200
1368
1600
2400
2500
3200
4000

If I create image with this all sizes and load it using picturefill JS, will it have any effect on performance ? 

A:

Technically speaking, you can go ahead with all 15 resolutions, and have 15 breakpoints in your media queries. There shouldn't be any negative impact on performance. However, the flipside is: you may go crazy maintaining all those media queries. Imagine how long your declaration will be to include 15 different files depending on resolution.
The sensible, practical thing to do is to target a few resolutions, and use the optimum image for each. You need to work with your UX engineer (may be yourself) to identify these breakpoints. Say for example, you are targeting:

mobile A (width 320px)
mobile B (width 480px)
mobile C (width 600px)
tablet D (width 1024px)
tablet/desktop E (width 1440px)

You would set your media queries at those breakpoints above. And consistently use them throughout your site. Consequently, you'd only use images with those widths, assuming they are all full width images. If you want them to look sharp even on high-DPI (retina), remember to double each of the dimensions. In all likelihood, you'll end up with 5 or 6 different images.
So while it's possible to have 15 breakpoints, it's better for your own sanity to identify a few key ones.

