CODEWITHSUNDEEP
htmlcssimageresponsive-imagessrcset
jgelt
jgelt

Reputation: 45

Feeling completely lost with responsive images using srcset and sizes

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>

Upvotes: 0

Views: 954

Answers (1)

alexander farkas
alexander farkas

Reputation: 14154

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.

Upvotes: 2

Related Questions