OT: Srcset

osgood_  wrote At this stage I'm not concerned with retina, just need to keep it simple to try and save on download time.

This is built in to the browser calculation for which image to display, and is why many current examples of using srcset are wrong.

Info, warning when using resolution images, (1x, 2x etc) - Edge, Firefox will use the image with the resolution you say it is. Chrome, Opera will use the image that best fits in the defined area for the image, modified by download speed and resolution even when using a desktop browser.

I'm on my iPad at the moment, so specifics are only what I can remember.

Nancy's info is usefull, but only if you are using the resolution srcset, which is not the most usefull except in limited circumstances, (plus i would, Not recommend using Ps's settings, but that another subject).

The srcset atribute you should be looking at using is the 'sizes' atribute, which functions the same as a css media-query, but is part of the html srcset, (in fact the code is almost the same).

If you look at the responsive image working group, (the ones who developed srcset and picture) you will see an example of using sizes -

https://responsiveimages.org

Basically you are creating an image that is specific in size to the device viewport, but don't forget that ppi will also be calculated by the drowser/device when it decides which image to download for use.

In Phothsop, I use ExportAs 1x,  2x and 3x. 

For a full sized, square product image, I would probably use @1x 500 x 500,  @2x 700 x 700 and @3x 900 x 900 adjusting quality slider down to around 100-150KB for the largest image.   The smallest image around 30-40 KB.

Nancy