Responsive images using img srcset

I'm having bit trouble understanding how it works / should work..

The below is generated code, I added some linebreaks and spaces for readability.

<img 
    srcset="https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/338x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?mobile_0.8701242290003701 1534w, 
    https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/446x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?tablet_0.9660079932306127 1536w, 
    https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/568x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?desktop_0.3538608252974025 1986w, " 

    sizes="(max-width: 767px) 1534px, 
    (min-width: 768px) 1536px, 
    (min-width: 993px) 1986px, " 
    src="https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/568x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg" 
    alt="" />

I want to use the img element, srcSet and src to have legacy browser support. (So no picture element)

Inspecting using Safari & xCode Simulator it seems to hover download both the desktop and mobile version for some reason?

We are going to serve only retina images due to backend performance contrains, there is a ton of images which has to be generated in the different sizes.

This particular image is about 50% of the screen in displayed size on mobile, 1/3 on tablet and less than 1/4 on desktop.

enter image description here

1 answer

  • answered 2018-07-12 10:13 OZZIE

    I just dropped the sizes attribute and then it works like expected :P