Archived topic
Image quality on blog posts
5 replies · Started by Wouter on January 11, 2023
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.
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:
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.
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.
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/
Thank you.
You're welcome