[Resolved] Image quality on blog posts

[Wouter]

I’m working a website which uses the template INBOUND from the Generatepress site library. On the portfolio page I can’t get the image quality right. Have a look at the main image of URL Removed it’s this images that is loaded into the post: URL Removed

Wen comparing both images the one on URL Removed is a lot lower in quality. Does anyone know how I can resolve this?

Thank you.

[David]

Hi there,

so the image is output using src-set with very loose rules, allowing the browser to choose what it sees as the best size image for the device ( DPR ) and the images display size.

So on my 5k Mac, Chrome i see the full size image and the quality is the same as the original.
In Safari, it initially loads the Medium large image ie. this one:

https://staging.caddymarketing.nl/wp-content/uploads/2022/01/website-vernieuwd-van-tophockey-768×612.webp

So yes that one looks lower quality.

do you want it so only the full image size is loaded ?
As doing that for all images is probably doable but specific images gets tough. Also need to consider the impact that may have on loading time.

[Wouter]

Hello David,

Thank you for your time!

So basically WordPress creates multiple images and based on the device the correct size is displayed?

So either I have to choose between high quality on all devices and slower page loading speed or less quality, but faster page loading speed?

I want high quality images for the blog articles on all devices. What do you recommend here?

Thank you.

[David]

Yeah that kinda covers it 🙂

If you want to remove the srcset versions so only the full size image is loaded, then add this PHP Snippet to your site:

// disable image src-set
add_filter( 'wp_calculate_image_srcset', function(){
    return false;
});

This doc explains how to add PHP:
https://docs.generatepress.com/article/adding-php/

[Wouter]

Thank you.

[David]

You’re welcome

[Author]

Posts