Docs

[Afroz]

Hi,

I know that uploading a featured image results in X creating multiple versions of the image at different sizes. Unfortunately, I’m seeing a very noticeable (to my non-photographer eyes) drop in image quality.

For example, I uploaded this image (1024px x 500px): https://lifesmemori.es/wp-content/uploads/2017/03/Family-Luxury-Campaign-testfull.jpg

These are two of the images that X then creates:
1024px x 500px: https://lifesmemori.es/wp-content/uploads/2017/03/Family-Luxury-Campaign-testfull-1024×500.jpg
862px x 421px: https://lifesmemori.es/wp-content/uploads/2017/03/Family-Luxury-Campaign-testfull-862×421.jpg

The 862px wide image is what’s loaded on a blog post as the featured image. Unfortunately, the drop in image quality is more than what I’d be happy with, especially as I’ve already optimized the image prior to uploading.

What can I do to reduce the loss in image quality?

Cheers,
Afroz

[Afroz]

To be clear, I’m fine with the 862px version of the image being used as the featured image on the blog post. I just want the auto-resize to not result in that much of a drop in image quality.

[Rue Nel]

Hello Afroz,

Thanks for writing in! The minimum width of the featured image is 100%. In most cases, the images will be stretched out. To avoid this to happen, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.has-post-thumbnail .entry-featured {
    text-align: center;
}

.has-post-thumbnail .entry-featured .entry-thumb img {
    min-width: 300px !important;
}

.x-recent-posts .x-recent-posts-img {
    background-size: contain !important;
}

Hope this helps.

[Afroz]

Hi Rue,

I appreciate your quick response!

I just tried out your code and did a hard refresh. However, the image quality didn’t change.

Also, as far as I can tell, this isn’t a CSS issue. When X (or WP, I’m not sure) resizes my original image, the resulting images are of lower quality. The links I posted above are directly to the image.

If you compare
https://lifesmemori.es/wp-content/uploads/2017/03/Family-Luxury-Campaign-testfull.jpg (the image I uploaded, 1024px x 500px)
with
https://lifesmemori.es/wp-content/uploads/2017/03/Family-Luxury-Campaign-testfull-862×421.jpg (one of the automatically resized versions),
you’ll see that the resized version has a noticeable blur to it.

My guess is that this has something to do with the quality settings when resizing.

[Rad]

Hi there,

Wordpress has image compression, it will still compress your image even if you already optimized it. I think it’s 80% quality.

Please add this code to your child theme’s functions.php

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

Then install force regenerate thumbnail plugin and generate your images again.

Thanks!

[Afroz]

Got it, I’ll try it out. Thanks Rad!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts