Retina and non retina images on tag

Question

I'm concerned about <picture> and srcset on <source> behaviour. I want to load different pictures dependent on:

• retina / non retina displays
• screen resolution
• webp format support

Code I've wrote (only for mobile):

    <picture>
      <source
        media="(max-width: 767px)"
        srcset="
          https://i.ibb.co/W6v8K6J/mob-2x-webp.png 2x,
          https://i.ibb.co/xzNtHnL/mob-webp.png    1x
        "
        type="image/webp"
      />
      <source
        media="(max-width: 767px)"
        srcset="
          https://i.ibb.co/DkyRD4z/mob-x2.png 2x,
          https://i.ibb.co/qC1JqMR/mob.png    1x
        "
        type="image/png"
      />
      <img src="" alt="Not mobile!" />
    </picture>

It works, however it always loads retina image - also for non-retina displays. Does anyone know why? And how can I achieve all the points I've listed?

Link to sandbox: https://codesandbox.io/s/relaxed-cloud-txynh

Live preview: https://txynh.csb.app/