Folder for responsive images is not generated. Wrong image sizes are being loaded

Developer help
1

I want Ghost to generate a set of responsive images automatically. The problem is that it doesn’t generate folder for “s” size (300px). As a result on mobile views browser supplies image with a resolution of 600px. Also, from 1000px to 1600px viewport size browser serves xl (2000px) which is too large.

These are folders I have: w100, w1000, w2000, w600. As you can see w300 is missing. Here is package.json config:

},
    "browserslist": [
        "defaults"
    ],
    "config": {
        "posts_per_page": 25,
        "image_sizes": {
            "xxs": {
                "width": 30
            },
            "xs": {
                "width": 100
            },
            "s": {
                "width": 300
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 1000
            },
            "xl": {
                "width": 2000
            }
        },
        "card_assets": true
    },
    "renovate": {
        "extends": [
            "@tryghost:theme"
        ]
    }
}

Here is what I have in post-card.hbs:

<picture>
    <source 
        srcset="{{img_url feature_image size="s" format="webp"}} 300w,
                {{img_url feature_image size="m" format="webp"}} 600w,
                {{img_url feature_image size="l" format="webp"}} 1000w,
                {{img_url feature_image size="xl" format="webp"}} 2000w"
        sizes="(max-width: 600px) 300px,
               (max-width: 1000px) 600px,
               (max-width: 1600px) 1000px,
               2000px"
        type="image/webp"
    />
    
    <img class="post-card-image"
        srcset="{{img_url feature_image size="s"}} 300w,
                {{img_url feature_image size="m"}} 600w,
                {{img_url feature_image size="l"}} 1000w,
                {{img_url feature_image size="xl"}} 2000w"
        sizes="(max-width: 600px) 300px,
               (max-width: 1000px) 600px,
               (max-width: 1600px) 1000px,
               2000px"
        src="{{img_url feature_image size="m"}}"
        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
    />
</picture>

Probably the last code snippet is irrelevant, because the folder is not generated anyway. I suppose it is an issue with the image generation process in the content management system or with the configuration settings.

Do you know how to fix it?
I’m using Casper theme so maybe someone can check if they have all the folders generated? handle-image-sizes.js seems to be responsible for that, but the code is too complicated for me to debug.

Thank you in advance!

2

I’m not aware of many phones where the browser will pick a 300px image as it would be too small for their high-dpi screens. Even the iPhone SE from 2016 had a screen width of 640px.

If you access the URL for your w300 image directly you should see the folder be created (they are created when first accessed). However, it being created does not mean that phones will choose to use to use it.

1 Like
3

You are right, the folder got created when I directly accessed the URL.

I understand the reasoning for the browser to serve images from w600 folder instead of w300 for mobile devices (up to 600px screen width).

However, when the viewport size is above 600px browser serves images from w2000. I consider that image too large. Is there a way to override a browser behaviour?

4

By and large, the browser knows what it’s doing and you’ll likely not want to override it.

When the browser chooses from the list of available images, it looks at the media query or sizes set for the img element and the DPR or display pixel ratio of the screen. (Check out https://whatismyviewport.com/ to see the DPR for your display). This means that if the media query stipulates a 500 px image, but the DPR is 3, then the browser will request a 1500 px image, as anything smaller will look blurry.

I would look at your sizes attribute and make sure it’s right for your site’s design. If you share your URL, I can take a look, too. Also, responsive images are only generated on demand, so the folder will only be populated as needed.

1 Like