Размеры изображений под тег picture 1x, 2x, 3x?

Question

[Олег Андрианов]

Верстаю под ретину, хочу чтобы всё было красиво.
Получается очень много кода, использую ориентиром статью https://dev.opera.com/articles/responsive-images/
JPG картинка может доходить до 500КБ, webp 200-350КБ. Объем весьма условный, но может доходить до каких то невероятно тяжелых значений, а это не наш метод. Использую Photoshop конечно же и Squosh. Ужимаю по максимуму, но качество картинки это тоже важная вещь. Хочу поинтересоваться у опытных разрабов как делать картинки для ретины, может мой способ плох, какие есть способы делать качественную графику. Прошу прощения если вопрос задан коряво, интересны методы и сервисы, которыми вы пользуетесь, ну и средний размер картинки jpg и webp для 1x, 2x, 3x.

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