Image Quality on Frontend Lower Than Actual File

[Alex]

Not entirely sure if this is a theme related issue but I’m noticing a huge discrepancy in the quality of images on the frontend of the site and the actual source image.

There are no WordPress image optimization plugins active on the site, any idea what could be causing this?

https://i.scalemath.com/Tm9xwE

Best,

Alex

Alex Panagis

[David]

Hi there,

couple of possible factors.

1. WordPress compresses images on upload. You can disable that with this PHP Snippet:

add_filter('jpeg_quality', function($arg){return 100;});

https://docs.generatepress.com/article/adding-php/

2. Downsizing of Image. You have a 1280px wide full image, that is be resized to 730px. This is disproportionate and can lead to pixels being lost. Ideally use a size that can be divided into an integer eg. 730px or 1460px.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Thank you for the reply David. Ah I see, with regard to the PHP snippet. Is this what you were suggesting?

https://cln.sh/FeQHQj

2. Downsizing of Image. You have a 1280px wide full image, that is be resized to 730px. This is disproportionate and can lead to pixels being lost. Ideally use a size that can be divided into an integer eg. 730px or 1460px.

So the size of the actual area where the featured image appears on the site is set to a width that causes it to resize disproportionately?

Best,

Alex

Alex Panagis

[David]

1. You will need to run that code everywhere – and you will need to run the Regenerate Thumbnails plugin to update any existing images. New images will automatically use the new setting.

2. yes, thats correct, you can’t easily avoid image resizing as WP will generate Attachment sizes for various uses, and browser resizing will also affect them. Ideally you want an image that is either the exact size of the container or double that if you want Retina screens to do their best.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

1. Thumbnails regenerated and set it to run everywhere. Still not seeing any difference on the frontend, can you? (after clearing cache, etc.)

2. Where is the 1280px size set in the theme? Sorry for the extra questions, would you be able to point me in the right direction?

Thank you…

Best,

Alex

Alex Panagis

[David]

Its not set anywhere – 1280px is the original size of the image that was uploaded.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

My bad, I thought you were referring to the size that it was being scaled down to.

So if I upload it at 1460px, this should no longer happen?

Alex Panagis

[Tom]

WordPress shouldn’t be changing the quality of your PNG images.

You can see the original image here: https://YOUR-URL.com/wp-content/uploads/when-does-content-marketing-make-sense.png

Is that not the quality that you’re uploading? If not, maybe there’s a plugin interfering?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Hey Tom,

Yeah, when accessed via the URL it loads at the original size/resolution.

I have no image optimization plugins installed so I’m not sure what’s causing it to be so pixelated/low-res on the frontend.

Alex Panagis

[Tom]

It looks sharper to me on the page than it does at the source URL.

What happens if you disable srcset just to test?:

add_filter( 'wp_calculate_image_srcset', '__return_false' );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Just added that filter…

Alex Panagis

[Tom]

That’s correct – on my 4K screen, the featured image on the page looks better than the source image. The source image itself seems to be quite pixelated.

Do you see an obvious issue if you upload a high-quality stock photo as a test?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

That’s correct – on my 4K screen, the featured image on the page looks better than the source image. The source image itself seems to be quite pixelated.

Well in that case it may be a display issue 🙂

I hadn’t actually considered that. I don’t want to take up any more of your time since this is clearly not really in the scope of support (since it is not theme related) so I’ll mark this as closed.

Thank you for all the help David & Tom 🙏

Best,

Alex

Alex Panagis

[Tom]

No worries, happy to help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts