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

Question

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">

Pairs

Which iOS version did you use to test the image markup? You need at least iOS 9 to make w descriptors work. You can find details about the browser support here: caniuse.com/#feat=srcset – Misrepresent

part of the mystery solved. I was using the 8.x simulator for my testing.. any fallbacks or ways around it? – Pairs

alright so I added a 110w as the first logo, it's picked up by 8.x , (I guess it's order-based if it doesnt understand the w descriptors) and the rest works fine. – Pairs

You can use Picturefill to add support for older browsers if needed. – Misrepresent

I saw, wanted to avoid a polyfill as It's not an img-heavy project, the small size and fallback src attribute will work for 99.99% of the cases:) – Pairs

Yes, using a good fallback src should be enough nowadays for most use cases. – Misrepresent

Answer 1

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/.

Misrepresent

hey @Misrepresent thanks :) the devil is in the details :) so I have : - an 150px wide image to be displayed in non retina, a 300px (2x) image to be displayed on hiDpi (retina) but still rendered as a 150px wide one in terms of how much space it takes - and a smaller version of it for viewports smaller than 450px which should take 80px (but its actually a 160px file as it's retina only).. – Pairs

Then your sizes attribute should look like sizes="(max-width: 450px) 80px, 150px" and the ...w parts in srcset should reflect the widths of your images. – Misrepresent

Thanks @Misrepresent : unfortunately I still can't get the syntax.. I set sizes="(max-width: 450px) 80px, 150px" , but I can't get the _small.png images to display as big as they should. Essentially I don't get the relation of sizes with the *w descriptors next to the images. (I get 1x and 2x) but when sizes and w enter the game, I lose it:) – Pairs

do you mind adding a working snippet with these 3 different scenarios? 150px wide (but 300px true size for hi dpi) and 80px wide (but 160px true size) for viewports lower than 450px? – Pairs

@GeorgeKatsanos I created an example of your code snippet: codepen.io/anon/pen/vyeyQm/left?editors=1100 – Misrepresent

Answer 2

You also can try using a couple more sources like that:

<picture>
    <source srcset="img.png"    media="(resolution: 150dpi)" type="image/png" />
    <source srcset="img2x.png"  media="(resolution: 300dpi)" type="image/png" />
    <img src="img.png" alt="alt text" />
</picture>

Or something like that - i didn't test it, i need to learn more about resolution media query to be sure.

Abcoulomb