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 ?
答案 0 :(得分：0)
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:
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.