image optimization for different size of picture

Question

I need to use a picture which its original size is 375 x 375 pixel in 4 different sizes (375 x 375, 200 x 200, 160 x 160 and 90 x 90 pixel) in my own website.

If i want to make my website image optimize, should i make four different folder for each size and put the picture with their own size in that folder!? Or is there better way?

Right now i'm using this code which i know this is not correct for image optimize

$(this).data({'image': thumbImage, 'zoom-image': zoomImage}).find('img').css({'width': '90px', 'height': 'auto'});

Answer 1

First, 375 is not a massive size, even clients using mobile probably won't notice the data required for that size of image.

Second, browsers will always cache images. So, if you have three images on your page with sources:

• /images/375/myimage.jpg
• /images/200/myimage.jpg
• /images/90/myimage.jpg

Then all three will be downloaded. However, if you have three images using the same source, like:

• <img src="/images/myimage.jpg" width="375">
• <img src="/images/myimage.jpg" width="200">
• <img src="/images/myimage.jpg" width="90">

the image will only have to be downloaded once, and the other two times will be accessed by the browser cache.

Depending on the size of images, and how often they appear on the same page, it may still be worth it to create some different sizes. However, in simple (small) cases, it's probably best to use a single image.