Sizes of images under the picture tag 1x, 2x, 3x?

Question

HTML

I type for retina, I want everything to be beautiful.
It turns out a lot of code, I use the reference article https://dev.opera.com/articles/responsive-images/
JPG picture can reach up to 500KB, webp 200-350KB. The volume is very conditional, but it can reach some incredibly heavy values, and this is not our method. I use Photoshop of course and Squosh. I squeeze it to the maximum, but the quality of the picture is also an important thing. I want to ask experienced developers how to make pictures for retina, maybe my way is bad, what are the ways to make high-quality graphics. I apologize if the question is clumsily asked, the methods and services that you use are interesting, well, the average size of a jpg and webp picture for 1x, 2x, 3x.

<picture>
   <source
      media="(max-width: 1200px)"
      srcset="images/work-slider/full/1/1-1200.webp 1x,
      images/work-slider/full/1/[email protected] 2x,
      images/work-slider/full/1/[email protected] 3x"
      type="image/webp">
   <source
      media="(max-width: 1200px)"
      srcset="images/work-slider/full/1/1-1200.jpg 1x,
      images/work-slider/full/1/[email protected] 2x,
      images/work-slider/full/1/[email protected] 3x">
   <source
      srcset="images/work-slider/full/1/1-1800.webp 1x,
      images/work-slider/full/1/[email protected] 2x,
      images/work-slider/full/1/[email protected] 3x"
      type="image/webp">
   <img
      src="images/work-slider/full/1/1-1800.jpg" alt=""
      srcset="images/work-slider/full/1/[email protected] 2x,
      images/work-slider/full/1/[email protected] 3x">
</picture>