Ruby - image sizes are wrong on collections/home?

[Cathy_Sarisky]

Hi!

I’m using Ruby, and just noticed that PageSpeed says I’m loading too big images. And it’s right. All these little thumbnails are loading at 2000px wide. There’s NO browser size that makes sense for.

Here’s the relevant code from the loop.hbs partial.

    {{#if feature_image}}
        {{#if featured}}
            <img
                class="post-image u-object-fit"
                src="{{img_url feature_image}}"
                alt="{{title}}"
                loading="lazy"
            >
        {{else}}
        <figure class="post-media">
            <div class="u-placeholder same-height rectangle">
                <img
                    class="post-image u-object-fit"
                    srcset="{{img_url feature_image size="s"}} 400w,
                            {{img_url feature_image size="m"}} 750w,
                            {{img_url feature_image size="l"}} 960w,
                            {{img_url feature_image size="xl"}} 1140w,
                            {{img_url feature_image size="xxl"}} 1920w"
                    sizes="600px"
                    src="{{img_url feature_image size="l"}}"
                    alt="{{title}}"
                    loading="lazy"
                >
            </div>
        </figure>
        {{/if}}
    {{/if}}

I think two different things are going wrong here.
(1) There’s no attempt to use a srcset at all for featured images, and since they’re packed into cards on the index page, there really should be.
(2) For reasons I’m stumped on, non featured images are still loading at 2000px, despite this srcset. [I’m using Chrome, and PageSpeed says the same thing.]

srcsets are not really my forte, but my understanding of this code is that it should be grabbing the 750px (“m”) size (because 750px is the first one >600px), or if the browser doesn’t support srcsets, it should grab the “large image”, which I guess I’d assumed was something reasonable, but maybe that’s the problem?

[Cathy_Sarisky]

As a workaround (because I’m stumped as to how to actually get the right image used), I removed the xl and xxl options from loop.hbs, and I added the same srcset to the featured block. That took my mobile PageSpeed calculation from 87 to 98.

[RyanF]

I’m going to ping our theme dev about updating this code to include srcset.

Your thinking about this and your solution are the same as what I would’ve done. For why images wouldn’t be loading as expected:

• This only applies to internal images. If you’re using Unsplash, e.g., this won’t have any effect.
• In your local browser, if a larger image is already cached, the browser will reuse that one rather than fetching a new one
• Screen resolution also plays a factor. If you have a high-resolution display, then a 1200px image will be fetched for a 600px spot in order not to appear pixelated. You can simulate this in your dev tools by changing the DPI.

[Cathy_Sarisky]

Right, my issues were internal images, not unsplash. I did clear the cache - will have to look into how to change the DPI, thanks for that tip!

If the theme dev is going to touch this code anyway, it’d be nice to add the new webp support as well.