- This topic has 13 replies, 3 voices, and was last updated 4 months, 1 week ago by
Tom.
-
AuthorPosts
-
September 11, 2020 at 3:58 am #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
September 11, 2020 at 5:28 am #1439201David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 11, 2020 at 5:36 am #1439211Alex
Thank 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
Alex Panagis
September 11, 2020 at 6:05 am #1439241David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 11, 2020 at 6:15 am #1439250Alex
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
September 11, 2020 at 6:23 am #1439259David
StaffCustomer SupportIts 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/September 11, 2020 at 9:52 am #1439646Alex
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
September 11, 2020 at 1:44 pm #1439866Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 11, 2020 at 1:48 pm #1439871Alex
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
September 11, 2020 at 1:51 pm #1439876Tom
Lead 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' );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 11, 2020 at 1:57 pm #1439882Alex
Just added that filter…
Alex Panagis
September 11, 2020 at 1:59 pm #1439884Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 11, 2020 at 2:05 pm #1439890Alex
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
September 11, 2020 at 2:06 pm #1439892Tom
Lead DeveloperLead DeveloperNo 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 -
AuthorPosts
- You must be logged in to reply to this topic.