With the goal of showing nice, clear images to as many devices as possible, while optimizing the file size, I would:
1. decide if I want to use any of the newer image formats. If so, each needs its own `<source type=''>` in a `<picture>` element, front-loading the most efficient formats.
2. decide if I want to serve different densities for the image.
For specifying densities, width descriptors + `sizes` attribute will always compute to a more useful effective density than density descriptors, if you can get `sizes` in the ballpark of how the image is actually laid out.
For lazily-loaded images, `sizes=auto` will do that for you, when it becomes universally supported.
1. decide if I want to use any of the newer image formats. If so, each needs its own `<source type=''>` in a `<picture>` element, front-loading the most efficient formats. 2. decide if I want to serve different densities for the image.
For specifying densities, width descriptors + `sizes` attribute will always compute to a more useful effective density than density descriptors, if you can get `sizes` in the ballpark of how the image is actually laid out.
For lazily-loaded images, `sizes=auto` will do that for you, when it becomes universally supported.