Image Quality Thumbnail Compression in Wordpress?

Question

I’m lost I don’t know where to turn.

I am trying to get my thumbnails to NOT be compressed at all. My uploads are nice and colorful, but the thumbnails gets very visibly duller and poorer quality. I already added this code to my function.php file in my child and parent theme:

add_filter(‘jpeg_quality’, function($arg){return 100;});
echo get_the_post_thumbnail($id, array(100,100) );
add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) );
add_filter( 'wp_editor_set_quality', 'wpse246186_image_quality' );
add_filter( 'jpeg_quality', 'wpse246186_image_quality' );
function wpse246186_image_quality( $quality ) {
    return 100; // 0 - 100% quality
}

I’ve installed ‘Disable JPEG Compression’, and I’ve installed EWWW Image Optimizer and upped the compression quality to 100. I keep regenerating thumbnails using the ‘Regenerate Thumbnails’ plugin. But there is still a huge difference. I do not know what to do, I’ve searched the web up and down, idk what I am missing. Is it because my images are Adobe 1998 and not sRGB when I uploaded them?

Here is an example of the good image: http://ninasveganrecipes.com/wp-content/uploads/2018/03/web-blackberry-icecream-4863.jpg

Here is a thumbnail of it looking BAD (dull!): http://ninasveganrecipes.com/wp-content/uploads/2018/03/web-blackberry-icecream-4863-1080×1619.jpg

Please help me! I don’t know what to try or what I am doing wrong. Running PHP 5.6.30 on my wordpress site.

Thank you. -Nina Marie

Answer 1

(this should be a comment, but my reputation is too low)

Setting jpeg_quality will not disable compression because it does not disable processing. JPEGs will be always compressed, and they are almost never lossless, not even at 100 - it does not stand for "100% original quality".

What happens here, is that WordPress's default image processing does not respect color profiles, just as @Bigue Nique says.
To add some insight: WP ignores color profiles from the images and the browser sees them as unprofiled/sRGB. The loss of saturation is a typical artifact when the AdobeRGB profile is stripped.
As a photography student I had made that mistake for years (luckily, my pictures were usally grey ;).

It still makes sense to shoot and use AdobeRGB, or other color profiles, just make sure to convert to sRGB (important: convert to profile, not apply profile) at the very last step of your workflow. You can then even strip the potentially embedded sRGB profile and thus make the image unprofiled, since it does not make a difference in appearance - this is what image size optimizers do to save a couple of bytes.

I'm sure there are plugins to do the profile conversions automatically, but it is good practice to be aware of color profile issues when you publish to the web (say, forums or customers who don't have that plugin).

@Nina Marie - please mark an answer (Bigue Nique's) as the correct one.

Answer 2

Uninstall the plugin and add this to your functions.php file

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

However please be aware that . you should still compress you images prior to uploading them for the performance enhancement.

Answer 3

Make sure you convert your images to sRGB before uploading them to WordPress.

Image compression should not dramatically affect the colors and tones of the picture. When you witness a significant shift in color, hue, saturation or contrast, it might be a color space issue (as the asker pointed out herself).