[Resolved] Image Quality on Frontend Lower Than Actual File

Home Forums Support Image Quality on Frontend Lower Than Actual File

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1439097
    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

    #1439201
    David
    Staff
    Customer Support

    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.

    #1439211
    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

    #1439241
    David
    Staff
    Customer Support

    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.

    #1439250
    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

    #1439259
    David
    Staff
    Customer Support

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

    #1439646
    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

    #1439866
    Tom
    Lead Developer
    Lead Developer

    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?

    #1439871
    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

    #1439876
    Tom
    Lead Developer
    Lead Developer

    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' );

    #1439882
    Alex

    Just added that filter…

    Alex Panagis

    #1439884
    Tom
    Lead Developer
    Lead Developer

    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?

    #1439890
    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

    #1439892
    Tom
    Lead Developer
    Lead Developer

    No worries, happy to help! πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.