Blurry post-card pictures

Developer help
1

Hey folks,

I run a small personal website/blog at https://www.yathprem.com

My issue is that post-card pictures on the home screen always appear blurry no matter what format I upload them in. This is not an issue in the post itself, just in the thumbnails that appear on the home page.

Is there a fix to this? Any help appreciated!

2

Hi @yathprem,

Can you please show us images_sizes settings which you can find in the theme’s package.json file? It should look like:

"image_sizes": {
    "xxs": {
        "width": 30
    },
    ...Other image sizes
}
1 Like
3

I agree with @minimaluminium - looks like an issue in your theme package.json?

You can see from the srcset that your intrinsic images are being up-scaled - for example, your srcset is using /w400/ image for up to 600w display, so the 400px image is being up-scaled, and appears blurred.

Responsive images in themes are covered here: How to use responsive images in Ghost themes

I’m not sure why the image upload is not generating the right widths, but you could update your image_sizes to match what you have on disk.

Nice blog BTW :slight_smile:

2 Likes
4

Oh - I though Ghost generated the <img tag in a helper, using the package.json sizes - but I see in the templates that this is hard-coded…

I recommend you make sure the sizes configured in your package.json match the sizes in post.hbs, page.hbs and partials/post-card.hbs - or wherever your templates contain srcset.

1 Like
5

Dude thanks for helping. it looks like this:

“config”: {
“posts_per_page”: 5,
“image_sizes”: {
“xxs”: {
“width”: 30
},
“xs”: {
“width”: 100
},
“s”: {
“width”: 300
},
“m”: {
“width”: 400
},
“l”: {
“width”: 500
},
“xl”: {
“width”: 500
}

Does this help at all? Thanks a million!

6

well, the XL looks too small? 500px? you should probably increase that to 1000px.

If you post config/code with 4 leading spaces, the forum will display it nicely :slight_smile:

Really - you need to talk to whom-ever set these sizes and ask them if they forgot to update the theme srcset to match. They need to keep the config file sizes in step with the theme templates.

7

Thanks for posting your config, that really helps! The theme is configured to show 700px or the closest high width image when the screen size larger than 1000px.

And if you look at partials/post-card.hbs file, you can see that the closest image size is 1000px which looks like:

{{img_url feature_image size="l"}} 1000w,

That means the “l” image size is being used, but the image size is 500px on your site and it’s getting upscaled and appearing blurry.

Here is Casper’s default image_sizes config. Can you please update your package.json file to revert the config to default?

1 Like
8

Oh wow this has completely fixed my problem, how stupid of me! Damn - such a neat fix, also I have changed

loading="lazy"

to

loading="eager"

What are the main downsides to this?

9

Thanks Jeff, this helped! and thanks for telling me about 4 leading spaces, new to this so that is also great to learn!

10

Glad to hear that the problem was solved :slight_smile:

loading="lazy" delays loading of the image until it reaches a distance from the viewport and it has several benefits like reduced load time and bandwidth saving.

On the other hand, loading="eager" does the opposite - it loads the image immediately.

1 Like