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.

    srcset=" 1534w, 1536w, 1986w, " 

    sizes="(max-width: 767px) 1534px, 
    (min-width: 768px) 1536px, 
    (min-width: 993px) 1986px, " 
    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