- This topic has 13 replies, 3 voices, and was last updated 3 years, 7 months ago by Tom.
-
AuthorPosts
-
September 11, 2020 at 3:58 am #1439097Alex
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
September 11, 2020 at 5:28 am #1439201DavidStaffCustomer SupportHi 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.
September 11, 2020 at 5:36 am #1439211AlexThank you for the reply David. Ah I see, with regard to the PHP snippet. Is this what you were suggesting?
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
September 11, 2020 at 6:05 am #1439241DavidStaffCustomer Support1. 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.
September 11, 2020 at 6:15 am #1439250Alex1. 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
September 11, 2020 at 6:23 am #1439259DavidStaffCustomer SupportIts not set anywhere – 1280px is the original size of the image that was uploaded.
September 11, 2020 at 9:52 am #1439646AlexMy 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?
September 11, 2020 at 1:44 pm #1439866TomLead DeveloperLead DeveloperWordPress 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?
September 11, 2020 at 1:48 pm #1439871AlexHey 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.
September 11, 2020 at 1:51 pm #1439876TomLead DeveloperLead DeveloperIt 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' );
September 11, 2020 at 1:57 pm #1439882AlexJust added that filter…
September 11, 2020 at 1:59 pm #1439884TomLead DeveloperLead DeveloperThat’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?
September 11, 2020 at 2:05 pm #1439890AlexThatโ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
September 11, 2020 at 2:06 pm #1439892TomLead DeveloperLead DeveloperNo worries, happy to help! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.