I am trying to use srcset to optimize load speed/resolution, and have 2 things that would like to confirm.
Say if I use 4 images inside one row, should I announce the image width inside srcset at full row width (say 800w, 1600w, 2400w) or 1/4 row width (200w, 400w, 600w). I have been testing in codepen --> https://codepen.io/abc-analytics/pen/GRpVyvO It seems to me the each image's width is assumed 100% the row, rather than its actual width when rendered. So I should write the width 4x its actual size, such as
srcset="/image_200px 800w, /image_400px 1600w, /image_600px 2400w" Can someone please confirm?
A follow-on question, when 1x 2x 3x is used in srcset or css image-set, is it that the browser downloads the 1x image and checks its size, then decides which image to actually use in the provided list? So if the browser wants a 2000x1000 image, it first downloads and finds that 1x is 500x250, then it goes for the 4x image (if there is one)?