I want to provide responsive images, for that I use srcset attribute.
<img
src="https://res.cloudinary.com/demo/image/upload/w_480/group.jpg"
alt=""
srcset="
https://res.cloudinary.com/demo/image/upload/w_480/group.jpg 480w,
https://res.cloudinary.com/demo/image/upload/w_750/group.jpg 750w,
https://res.cloudinary.com/demo/image/upload/w_1334/group.jpg 1334w,
https://res.cloudinary.com/demo/image/upload/w_1536/group.jpg 1536w,
https://res.cloudinary.com/demo/image/upload/w_2048/group.jpg 2048w
"
>
Chrome and android works as expected; in a mobile in portrait it will load a 'small' image, just the needed to fill the width, if you turn the phone it will request a new image according to the new width.
In Chrome inspector tool selecting an iOS devices (iPhone 6, iPad) works well:
But Safari both desktop and mobile doesn't request a new image on resize/turn device. But it does request the correct image on reload.
I tried with Safari 9.1.2 and 11.0, iPhone 6 (iOS 10.3.2), iPhone 6s (iOS 11.0) and iPad Air 2 (iOS 11.0).
Does Safari have still a lack of support for srcset? It is suppose to be fully supported.
Test yourself at codepen. Code at codepen too.
The current state of srcset is such that I am not entirely sure what you are looking for is a requirement.
This article by Jason Grigsby entitled State of Responsive Images in 2017 helps explain that while some of this ambiguity is by design to promote competition between browsers, some of this could probably be clarified better:
In the meantime I would be wary of quoting full support for srcset just yet. In my recent experience it has been anything but.
Nor does it use 1.1x or higher srcset images on 110% zoom etc. as Chrome does properly.
To make it simple: When I use zoom, the images are unsharp in Safari and sharp in Chrome. Nopthing to discuss there. Safari loses, Chrome wins.