Return to Answer

This solution works for full-screen images, and chooses the corrent sources.

This solution for all images, even if they are not full size. But on the 3x desity it still chooses wrong breakpoints, currently I dont know why.

<?php $viewport = [ // Viewport => Image-Size 600 => 500, 1200 => 1000 ]; // walk over all pixel-densities for($i=3; $i>0; $i--) { foreach($viewport as $vp => $w) echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) " .round($w/$i) . "px,\n"; } ?> 

This solution works for full-screen images, but you can use custom viewports.

This solution for all images, even if they are not full size. Here you can use custom viewports, but it is relativ much code.

<?php $viewport = [ // Viewport => Image-Size 600 => 500, 1200 => 1000 ]; // walk over all pixel-densities for($i=3; $i>0; $i--) { foreach($viewport as $vp => $w) echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) " .floor($w/$i) . "px,\n"; } ?> 

<img src="500.jpg" title="..." alt="..." srcset=" 500.jpg 500w, 1000.jpg 1000w" sizes=" (min-resolution: 3dppx) 33vw, (min-resolution: 2dppx) 50vw, (min-resolution: 1dppx) 100vw /> 

<img src="500.jpg" title="..." alt="..." srcset=" 500.jpg 500w, 1000.jpg 1000w" sizes=" (min-resolution: 3dppx) and (max-width: 600px) 1500px, (min-resolution: 3dppx) and (max-width: 1200px) 2000px (min-resolution: 2dppx) and (max-width: 600px) 1000px, (min-resolution: 2dppx) and (max-width: 1200px) 2000px (min-resolution: 1dppx) and (max-width: 600px) 500px, (min-resolution: 1dppx) and (max-width: 1200px) 1000px /> 

<img src="500.jpg" title="..." alt="..." srcset=" 500.jpg 500w, 1000.jpg 1000w" sizes=" (min-resolution: 3dppx) 33vw, (min-resolution: 2dppx) 50vw, (min-resolution: 1dppx) 100vw" /> 

<img src="500.jpg" title="..." alt="..." srcset=" 500.jpg 500w, 1000.jpg 1000w" sizes=" (min-resolution: 3dppx) and (max-width: 600px) 1500px, (min-resolution: 3dppx) and (max-width: 1200px) 2000px, (min-resolution: 2dppx) and (max-width: 600px) 1000px, (min-resolution: 2dppx) and (max-width: 1200px) 2000px, (min-resolution: 1dppx) and (max-width: 600px) 500px, (min-resolution: 1dppx) and (max-width: 1200px) 1000px" /> 

E.g. this example simple php-code shows that:

For both solutions you should define the display sizes via css too.

E.g. this example simple php-code shows that: