Image Compression Artifacts on basic light grey backgrounds

Hey there!
I'm using product pictures with big areas of light grey and the images created/ compressed by Wordpress show up full of artifacts. Tried everything already, lossless compression with EWWW, made sure I add ImageMagick installed in the php environment, a filter on the 'jpeg_quality' hook to return '100', pngs (which show a little less artifacts but still)...

Have you experienced anything like this? Its the second site already, and for this client this prevented me from using responsive images...

I'm almost jumping to this kinds of solutions, but they seem a complete overkill...

An example:

(in some computer screens you may have to look from certain angles to see, but others it's just rubbish...)

Hope you have some thoughts!
Cheers and thanks!

  • Nastia

    Hello Alexandre Rosario

    Welcome to WPMU DEV Community!

    From the image you posted, the losseles it's not visible for me. Would you please upload the original image here so we could compare?

    As far as I know the WordPress doesn't compress images by default, it's resizing them only.

    You may try the WP Smush Pro plugin that compress images with little quality loss.

    Also, if you are using images with large single color area, try to upload them in the .png format and not in .jpg.

    Check here relative articles:
    http://lifehacker.com/learn-when-to-use-jpeg-gif-or-png-with-this-graphic-1669336151
    http://www.sitepoint.com/gif-jpg-png-whats-difference/
    http://www.sitepoint.com/gif-png-jpg-which-one-to-use/

    I hope this helps!

    Cheers,
    Nastia

  • Masserra

    Hey Nastia, thanks a lot for the reply and the welcome! :slight_smile:

    Yeah, in some computers you see it more than others, but you can always see it by looking from beneath in any screen. You'll see some horizontal lines that were not there. As for the PNGs, they behaved better but still some artifacts were present although in a different shape/ pattern.

    Here's the original one:

    Don't understand what happens, since its a flat color painted directly in photoshop, there's not even the smallest pattern or noise in there to make it create weird shapes and artifacts when resized.

    I havn't tried Smush yet, but I have one question regarding those compression plugins. Do they come in a second stage compressing the images created and resized already by Wordpress or do they take over the all process and stay responsible for the image resizing mixing up their own compression algorithms in the process?

    I've checked your articles, cool ones, and I'll give Smush a try, but I have the feeling it's going to be the same given that it is a lossy algorithm and I've tried lossless.. :disappointed:

    Thanks again,
    Cheers! :slight_smile:

  • Panos

    Hello Alexandre Rosario ,

    I'm also unable to see differences from my screen, but to answer your question WordPress handles the upload where it crops and resizes images and produces several copies of that image in different sizes also by default it compresses jpeg images to 82% (since v4.5. Used to be 90% in previous versions).

    images created/ compressed by Wordpress show up full of artifacts

    As wordpress tries to "fit" the dimensions of the uploaded image to the size that is required (wp, themes or even plugins may require different image sizes.), perhaps it's not the compression that causes this, but the difference of the dimensions of the original image with the dimensions needed, scaling. Eg, you upload images with smaller dimensions, or with different x-y proportions. I would recommend to try upload images with higher dimensions than required but with the exact same proportions. So if you want to display a product image 600x200 px, you could try uploading an image with dimensions 800x267px.

    Kind regards,
    Panos

  • Masserra

    Hey! Thanks a lot Panoskatws for the effort even though you've both been able to see the artifacts! I feel stupid by not even being able to show you what me and my studio were so picky about, but if I would be by your side I would show you, and in certain computers it's really clear. Have you lowered your screen so you would see the image slightly from beneath? Btw the image I was uploading was really big, 4000 in width and also if you don't use the hardcrop argument when adding image sizes they'll resize properly using the native ratio and never forcing a size that the image can't go to, like bigger sizes.

    Well... this made me learn really a lot in the last few days about image compression and how it's handled by Wordpress, and it's solved already! It was not easy to find.

    So, for the ones coming here in the future with the same problem:

    I tried everything from using lossy and lossless image compression plugins, experimenting with png file type, applying a filter on 'jpeg_quality' hook to return '100' instead of the 82% standard Panoskatws was talking about, and even enabling ImageMagick (this was actually the first step into the right direction) and nothing made any difference.

    I went to understand further about image compression and what were the options these days in PHP and what was Wordpress using and it turns out it's using the GD Library, which doesn't cut it to these photographic standards were looking sometimes for certain jobs. I went on to the Command Line to try the powers of ImageMagick reading along this article, and tried resizing some images myself to the exact sizes I add previously added in the Wordpress and they were no less then perfect after the resizing!!

    That's when I focused all my efforts into searching how could I make ImageMagick work on Wordpress and that's when I found this life saver plugin.

    Even after having installed ImageMagick in the PHP environment on the remote/local server it turns out that that's not enough and Wordpress wont immediately start using it like I had read somewhere. The only way and probably the easier you'll find to enable it is by using the plugin above (ImageMagick Engine), you'll need to enable it on their plugin configuration panel also, and you're ready to go!! They even give you the capacity to regenerate all images including all the sizes you've added to Wordpress and even choose which sizes you want or not to be using ImageMagick.

    I can't stress enough how good ImageMagick is in these situations of clean flat color surfaces. You wont notice any artifacts anymore!

    Previous image not using ImageMagick:

    New image using ImageMagick:

    Hope this helps someone in the future and thanks Nastia and Panoskatws again!
    Cheers! :smiley:
    Alex

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.