6

One continual problem with clients is that they tend to upload 5MB images directly from their devices onto their websites. Best way around that, since we can't really enforce proper image sizing and cropping, is to magically do it with a wordpress function.

// add new Image sizes
add_image_size( 'sqr-thumb', 450, 450, true ); // Hard Crop Mode

Here's a custom image size being added, a 450 by 450 crop. Now it works, it's beautiful, BUT, the image coloring and quality has changed drasticly.

In the following image, I am calling the medium of both images (not the sqr-thumb, but if I were it would be square).

The one on the right was added prior to the custom image size. The one on the left was added after the custom image crop (it has a sqr-thumb version). I used the same image in both instances for uploading.

Obviously the one on the left is of lesser quality and coloring (as much as you can see in a black and white sample).

Is there a way to do this and maintain the image quality?

The image being used here is a PNG, saved RGB, created via Photoshop Creative Cloud. It can be found at: http://rehost.ca/temp/woman.png

Note: I've tried this with 6 different pngs, color and black and white. Happens with all of them.

Our development server uses GD.

Sample

  • Can you look up if your server has GD and / or Imagick installed and available to your PHP process? This will make a difference as PHP is just proxying it through to the program installed in your OS. – kaiser Nov 15 '16 at 19:40
  • Just asked my guy, he says it's GD – Faye Nov 15 '16 at 19:59
  • Do you have access to some colorTargetfile? (Protip: Do not download as this will already be compressed, instead generate your own uncompressed image in an uncompressed format – or ask as some photographers or similar forum). If so, you could make a test case with a plain PHP file and use the underlying PHP-GD functions to see which kind of images you need to treat differently. – kaiser Nov 15 '16 at 20:47
4

Use the jpeg_quality and wp_editor_set_quality filters to set the quality of resized images:

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 have not been able to reproduce the issue reported; the original PNG image looks the same as the thumbnails. Tested in Chrome on Windows 7, PHP Version 5.6.19, GD Support: enabled, ImageMagick not installed, wide gamut hardware-calibrated monitor.

Notes

  • Make sure that images have been saved in the sRGB Color Space prior to uploading them to WordPress. This will prevent color and saturation loss.

  • Changing the quality setting will not affect images that have already been uploaded. Use a plugin such as Regenerate Thumbnails to update images that have already been uploaded.

  • The default quality setting is 82 in WordPress v4.5 onward.

  • Sorry - I tried this and it didn't solve my problem. – Faye Nov 14 '16 at 22:53
  • I created a new post after adding the function. – Faye Nov 14 '16 at 23:07
  • I'm using pngs - would that impact? – Faye Nov 14 '16 at 23:10
  • (I'm aware already uploaded images wouldn't be affected by this - I'm testing new uploads) – Faye Nov 14 '16 at 23:14
  • Okay, sounds like we might be dealing with a different issue here then, since you're using PNGs. I added an edit to my answer under the Notes section: Make sure that images have been saved in the RGB Color Space prior to uploading them to WordPress. This will prevent color and saturation loss. – Dave Romsey Nov 14 '16 at 23:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.