0

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 ?

Suraj
  • 576
  • 2
  • 10
  • 37
  • Why not make the images scale-able by using a percentage instead of a static width? – zgood Jun 30 '15 at 13:34
  • Actually Images are scalable already. But It will load this different size of images depends upon the screen resolution. Like, for rating display it will load image with 2500px resolutions, that have 500kb size. But same image in iphone will be loaded with 480px, which will have 30kb size. So the motto of using this method and library is to save bandwidth. – Suraj Jun 30 '15 at 13:37
  • Oh I see. You would probably want to detect the viewport width of the device and use that width (assuming these images are the full width of the screen). Then slap a `img {max-width:100%}` style on your images – zgood Jun 30 '15 at 13:42

1 Answers1

1

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:

  1. mobile A (width 320px)
  2. mobile B (width 480px)
  3. mobile C (width 600px)
  4. tablet D (width 1024px)
  5. 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.

light
  • 4,157
  • 3
  • 25
  • 38
  • I have used picturefill.js library, which pullup same image with different size, with its own media query defined as attribute in tag. So ultimately, I am going to create same image with 15 different size and store it in folder and will pull up them based of different size of devices. – Suraj Jun 30 '15 at 14:09
  • @user3288891 I understand that. I'm just saying it's a lot of work to be doing all 15 different sizes. What is your target device list? Why is there a need to get into such fine-grain separation? If you have 10 different pictures, you end up with 150 images - that's quite a lot of work. Imagine if your site has 100 images... – light Jun 30 '15 at 14:16
  • Yes, Right. So dilemma is that what are the standard sizes ? And How can I decrease number of images by using standard sizes ? – Suraj Jun 30 '15 at 14:21
  • There is no "standard size". There are only target devices, from which you derive your target resolutions, which gives you the sizes you need. In my example above, I targeted 5 devices, and got 5 sizes. So the question can only be answered by you or your UX engineer - what devices are you targeting? You'd get your answer from there. – light Jun 30 '15 at 14:27
  • Is it good to show images with 320px resolution in mobile devices ? – Suraj Jul 01 '15 at 07:20
  • Depends on what mobile device. For a small mobile that is 320x480, I'd say yea. For iPhone 6, I'd probably say no. – light Jul 01 '15 at 07:24