Ran into the same problem with my a recent website. I think I am still going to create at least one smaller version for mobile.
Additionally to your technique I defined a really small image as a background image in order to get a “progressive loading for avif” kind of effect on slower connections.
- 1x vs. 2x dpi for high-density monitors
- png/jpg + webp + avif
I don't create additional screen-optimized image versions, as the work would require 6 additional files per screen resolution.
It's already quite some work, but I think it is worth it. Especially AVIF is often significantly smaller than other formats. I recently wrote a short guide on this topic [1].
[1] https://darekkay.com/blog/avif-images/