Responsive images using srcset/sizes isn't respected by Safari iOS

I have the following

        <img
            src="/img/footer/logo_white.png?v=2.0"
            srcset="/img/footer/logo_white.png?v=2.0 1x,
                    /img/footer/logo_white2x.png?v=2.0 2x"
        >

which works fine on normal and hiDPI screens.

But when the viewport's very small (below 400px) the logo doesn't fit therefore I need a smaller version of the image in terms of real length, which I created. Then I tried

            <img
                class="biw-logo"
                sizes="(max-width: 390px) 110px, 175px"
                src="/img/footer/biw_logo.png?v=2.0"
                srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
                        /img/footer/biw_logo.png?v=2.0 175w,
                        /img/footer/biw_logo2x.png?v=2.0 350w"
            >

Which works in terms of showing the _small image for viewports lower than 390 pixels - but now I've lost the "high resolution" factor; I cannot force the iOS browser in iphone5s to display a 220px image in length of 110px with the above syntax.

Could you correct my syntax?

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">

Solution

You can do that with srcset and sizes. At first tell the browser which images you have available and how many pixels wide these images are, this can be done with srcset:

<img srcset="
    /img/footer/logo_white.png?v=2.0 300w,
    /img/footer/logo_white2x.png?v=2.0 600w,
    /img/footer/logo_white_small.png?v=2.0 150w
">

Now the browser knows it can select from three images that are 150, 300 and 600 pixels wide (I guessed the dimensions, your actual widths might be different).

Second, you tell the browser how large the image will be displayed in the webpage, this can be achieved with sizes:

<img
    sizes="(max-width: 400px) 150px, 300px"
    srcset="..."
>

The browser knows now, that if the width of the viewport is 400px or less the image will be displayed 150px wide, for viewports larger than 400px it is displayed 300px wide.

This is enough information for the browser to select the right image. On a normal desktop with a normal screen it will select the 300w-image and on a HiDPI desktop it will be the 600w one. On a small viewport with a normal screen the 150w will get selected and on a small viewport with HiDPI the 300w one.

If you want more information about srcset and sizes, take a look at http://ericportis.com/posts/2014/srcset-sizes/.