Forum

Thread tagged as: Problem

Poor image quality

I'm struggling with image quality.

Images uploaded via Perch with a uniform colour background (e.g. illustrations, logos) are appearing with lightly flecked backgrounds. I'm specifying quality="100" and sharpen="0" in an attempt to stop Perch processing the images too much (is this right?). The only processing I'm asking Perch to do is a resize.

JPGs are bad, but PNGs containing transparencies contain very unsightly artifacts - so much so that they are unusable.

Plus, PNGs are often cropped a few pixels too short. Frustrating!!!

It only seems to occur when asking Perch to resize images. As a work-around I'm cropping images manually and not asking Perch to do anything - fine for me, but not great for my client!

I've tried on sites running on both Windows and Unix and both have the same trouble.

Can you offer any advice, please? Thanks.

Also posted here (https://forum.grabaperch.com/forum/07-04-2014-any-image-uploadcropresize-alternatives).

Jonathan Brain

Jonathan Brain 0 points

  • 7 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

Can you give us an example image that does this?

Here's an example image that I'm having trouble with: https://beamans.jonathanbrain.com/assets/images/test2.png

You can see it in the wild here: https://beamans.jonathanbrain.com (it's the fourth item labelled "Assessment services"). You can see that its white background is showing with a light grey fleck (you might need to view your monitor from a steep angle).

The template tag looks like:

<perch:content id="image" type="image" label="Image" required="true" width="315" height="262" quality="100" sharpen="0" crop="true" />

Thanks for your help, Rachel.

As for the other issues, I'm no longer able to reproduce the PNG artifacts issue - it was possibly removed by tweaking the sharpening/quality controls. And please ignore my comments about cropping problems - turns out that's a peculiarity to Firefox and percentage calculations (not Perch).

Drew McLellan

Drew McLellan 2638 points
Perch Support

The resized image looks a little soft, but I can't see any flecking.

It's definitely there.

Are you working on a laptop? If so, if you position your head near the keyboard, and then look up at the screen, you'll see it. (OK, not the most natural pose, I'll grant you!)

Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you using GD or Imagemagick?

I can attest Jonathan's flecking, if you take the original image and fill the white background you get a clean covering:

If you fill the image after it's gone through Perch you get artifact city:

On the site it is barely visible to me appearing as a very light grey box around the image.

Drew - using GD.

Tom - clever way of illustrating the issue - thanks!

Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok. I'm not sure what I can do if the settings for quality don't help. Resizing with PHP is always going to be worse than something like Photoshop.

Adding post here to let people know that I fixed this issue on my server, I got the host to install ImageMagick for PHP on the server, and added define('PERCH_IMAGE_LIB', 'imagick'); to the config file.

Now images resize with clean white backgrounds!

I can confirm this also fixed it for me.

I was starting to think I was going mad, it seemed any resized jpegs with large areas of flat colour had artefacts like they had been over compressed. I tried everything I could think of then stumbled on this post.

Was not sure it would work as my issue is not png but jpg.

Anyway got my ISP to install imagick instead of the default GD and presto, images are smooth again!