Feeling completely lost with responsive images using srcset and sizes

Question

I've been trying to optimize images on my photography site using srcset and sizes, but the inspector in the browser is telling me that it's loading the largest image size. To confirm this, I added a new image with numbers so I can see for sure which size image is being loaded.

But no matter how I mess with the media queries, I can't get it to work properly. I assume that my issue is related to writing the media queries incorrectly, but I'm kind of at my wits end. I've tested this in every way I could possibly think of. I read on a post here, that the browser could be caching the larger image. So I tried it in multiple browsers, and in incognito mode.

As shown below, the images called "test" sometimes load the middle sized image, but never the smallest one.

Below is a section of my code. You'll notice that I'm also using responsively loaded (sized) images in the href tag, as it's part of a lightbox.

You can see the page in question at https://www.jeffreygelt.com/alt/.

Here's my code:

    <a href="/alt/img/portfolio/test-1000x667.jpg" 
        data-sizes="(min-width: 880px) 1000px, 400px"
        data-srcset="
            /alt/img/portfolio/test-400x267.jpg 400w,
            /alt/img/portfolio/test-800x533.jpg 800w,
            /alt/img/portfolio/test-1000x667.jpg 1000w">
        <picture>
            <img class="img-responsive"
                sizes="(min-width: 880px) 400px,
                       (min-width: 660px) and (max-width: 879px) 800px,
                       (min-width: 400px) and (max-width: 659px) 400px, 1000px"
                srcset="
                    /alt/img/portfolio/test-400x267.jpg 400w,
                    /alt/img/portfolio/test-800x533.jpg 800w,
                    /alt/img/portfolio/test-1000x667.jpg 1000w"
                src="/alt/img/portfolio/test-1000x667.jpg"
                alt="Asbury Park">
        </picture>
    </a>

    <a href="/alt/img/portfolio/andy-533x800.jpg" 
        data-sizes="(min-width: 880px) 533px, 395px"
        data-srcset="
            /alt/img/portfolio/andy-395x593.jpg 395w,
            /alt/img/portfolio/andy-419x629.jpg 419w, 
            /alt/img/portfolio/andy-533x800.jpg 533w">
        <picture>
            <img class="img-responsive" 
                sizes="(max-width: 880px) 533px, 395px"
                srcset="
                    /alt/img/portfolio/andy-395x593.jpg 395w,
                    /alt/img/portfolio/andy-419x629.jpg 419w,
                    /alt/img/portfolio/andy-533x800.jpg 533w"
                src="/alt/img/portfolio/andy-533x800.jpg"
                alt="Andy's Portrait" />
        </picture>
    </a>

A few suggestions: 1 - which browser are you using? [IE doesn't support srcset at all](http://caniuse.com/srcset/embed), so don't test there. 2 - SIMPLIFY. You can do this without the sizes attribute, so start there. Once you get a simple version working, THEN expand (slowly) into more complex versions, so you can see exactly where things break down. [This Article](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) seems like a great starting point. — random_user_name, Nov 10 '16 at 19:07
Also, [this fiddle](https://jsfiddle.net/italoborges/v8yftgj2/2/) may prove to be helpful (or not). It's a working example of `srcset` in action. — random_user_name, Nov 10 '16 at 19:10
Which light-box exactly are you using? How does that light-box handle `data-srcset` from `` elements? You must know if you have a ``, `some-link.jpg` will not be loaded untill you click the link. Now if you click `some-link.jpg` will be loaded because by default no browser (from what I know) can handle tag elements with data-srcset except you programtically added something which does handle that. — caramba, Nov 10 '16 at 19:39
Sorry for the delay in responding. @cale_b, thanks for the links, I'm going to check them out right now. — jgelt, Nov 12 '16 at 18:38
@caramba, the lightbox I'm using is called [lightGallery](https://github.com/sachinchoolur/lightGallery). — jgelt, Nov 12 '16 at 18:38
@cale_b, as per the article you linked to I removed `picture` tag from around the `` tag as well as the `` tag but I'm still having the same issue, that being that the smallest image never shows. And the largest seems to show when it shouldn't. — jgelt, Nov 12 '16 at 19:57

score 2 · Answer 1 · edited May 23 '17 at 10:32

For your column view it is simple: sizes="(max-width: 400px) 99vh, (max-width: 880px) 49vw, 285px". I hope you start to understand this (with my example). For your lightbox view it is a little bit more complicated because it is both width and height dependent and sizes only supports width descriptors. In case of viewport width and viewport height constrained images you can calculate the image width by using the vh unit in combination width the aspect ratio of your image.

You can see more informations here: Can I use <picture> for both height and width-constrained images?

Also note: That all browser multiply the calculated sizes length with the devicePixelRatio to generate the needed width of the image. And that Chrome loads the largest image, if it is in the browser cache.

Feeling completely lost with responsive images using srcset and sizes

1 Answers1