Safari not requesting srcset images on resize

问题:

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.

回答1:

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:

...the different behavior causes confusion. The most common question I hear is from people testing srcset in Safari and not seeing new images download as the viewport size changes.

There is nothing that says that the browser needs to download new images as the viewport changes. In fact, it probably doesn’t make sense to download a new image if the browser already has a larger version of it and can downsize it. So while this may be a feature and not a bug, we could do a better job setting expectations for developers.

In the meantime I would be wary of quoting full support for srcset just yet. In my recent experience it has been anything but.

回答2:

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.