Safari load two images (dublicate with different sizes) from srcset in tag img

Question

I had a problem in Safari when the page loaded in Devtools > Network drowser loaded two versions of the same image.

For example:

yNG3yARUuYG2BUZL___media_library_original_1080_1080.jpg
and
yNG3yARUuYG2BUZL___media_library_original_529_529.jpg

I noticed that the first image is loaded (1080) and the image is logically closest to the width of the image. I use it in vueJS component. This data i pass into img:

          image: {
            src: 'https://example.com/media/3276/yNG3yARUuYG2BUZL.jpg',
            srcset: 'https://example.com/media/3276/responsive-images/yNG3yARUuYG2BUZL___media_library_original_1080_1080.jpg 1080w, https://example.com/media/3276/responsive-images/yNG3yARUuYG2BUZL___media_library_original_903_903.jpg 903w, https://example.com/media/3276/responsive-images/yNG3yARUuYG2BUZL___media_library_original_755_755.jpg 755w, https://example.com/media/3276/responsive-images/yNG3yARUuYG2BUZL___media_library_original_632_632.jpg 632w, https://example.com/media/3276/responsive-images/yNG3yARUuYG2BUZL___media_library_original_529_529.jpg 529w, data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///8AAABLS0vc3Ny7u7vl5eWdnZ2lpaXW1tZVVVXy8vIWFhaWlpbo6Oj39/fR0dE1NTV9fX0fHx+MjIwaGhq3t7cLCwuHh4dpaWk+Pj7MzMxycnJdXV3CwsKtra2QkJAlJSVDQ0NkZGQyMjIkJCQUVGSgAAADzElEQVR4nO3d61raQBCAYeVsMAl4AI+o1fu/xtYGH5NJWLLJLLPR7/1bSPNJnW4OwNkZAAAAAAAAAAAAAAAAAPxa+XpkbZ0H7EsuzmNwkQQLXFq37S1DJcbxCn66CBM4se4qmYQIzK6ss0qusgCF19ZVFdf6gVPrJmGqXjiyThJG2oExjZmC8rCJaswUbnSHzYt1TwPVYTO2rmk0ViyMZzVTpriykWNmk48t5BuxH3rDRm55rrZlP3P5KmpteCu2e6+1YW/3Yk+2OputjZmQh6BuudwVnWHzJLZ6p7LVbu7EvjxpbLS2mgl2hN1CIndGY9jIbVqNmUKAYRPPmCmoD5vaQdODxm728CB3qO9hlFzNWI6ZwqPYo54rm6jGTKE2bG77bK120GQ7Zgpy2PQ6ZyPPzazUdrMPOWx6HEbVxozdaqastrLpPmzkmHlU3M0+1IZNhGOmoLWyyV7FdmIYMwU5bD66DZs4x0xhJfat08omutVMmcqwiXXMFOSw6XCCWI6Z/enJycxaMVWyG7F/3iub7EP+Fm7X/8h/HCY+d2QrfxO9VzYxngJ281zZxHalqQ2/czaxXWlq49UnsDaMB2HnUShn8TC8eRTK9dowbDwK47ta2IrHkcG79b524vMaylOIw+BzmDjE/w49Dw3iunmmHc8TncP7/+LJd2F6Ky+LRq7LCYjFpOK5upqfT06reuJi9Vz9U52j8+paVfNGiDaq12nV74j6j8KwKNRAYVgUaqAwLAo1UBgWhRooDItCDRSGRaGG31yY7ubt7Wo/m+mhp5fPL1kWpn/O/awqt8eNHVdjb77vPzAs7PKeqNKNE0fe9nfd/NecsjDrEFi6yfHoz2fX+MBTFna7AeW+eaMNNolxYe3OnZYWxdPT44/cGRd2fWfi/jJDizffPhoXLjoWzoqn3x5/5N2wC3/+a9jiYrP172HPwtp993XpwAuPTqrmBw6o8Nhv4vrrccMtPMvfDj9q+X2rWiSF77PLQ2bVt6LOShteHHrWc+nmg0gKXffsVC/EzxyPbDSAwhmFbhRqoJBCCt0o1EAhhRS6UaiBQgopdKNQA4UUUuhGoQYKKaTQjUINFFJIoRuFGiikkEI3CjVQSCGFbhRqoJBCCt0o1EAhhRS6UajhtxXmyaes+tU9oyQ9JKl+QvhllvipfnjzKQqXe+fdbJa+Tl5oi0IKKbRHIYXNfD/CJKQwX+HX4tMBTkb5a8e/yK+esfMRJrDzu5r1LQIV1r8h00jA79bKXuy/2+P1pc83OraQTm2lYfMAAAAAAAAAAICdvynTXWdGs+9dAAAAAElFTkSuQmCC 32w',
          },

<template>
  <img
    class="responsive-image"
    :srcset="image.srcset"
    :src="image.src"
    loading="lazy"
    onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});"
    sizes="1px"
  >
</template>

<style scoped>
.responsive-image {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
</style>

The function after loading the image sets the value of the size attribute to the relative size of the image to the width of the display. This is required because the image is used in the gallery grid. When changing the width of the display, the grid adapts using CSS media queries. Desktop - 3 elements in a line, tablet - 2 elements, phone - 1 element.

I tried to set sizes attribute based on this.$parent.$l.getBoundingClientRect().width not on img.getBoundingClientRect().width in mounted() hook before onload event on img run simmilsr code but it's not fix my problem.

Tested in Chrome, Firefox and Safari (by Lambdatest). In Chrome and Firefox it works correctly.