Thread tagged as: Question, Problem

Poor image quality when resizing png

I am having some problems with using perch to generate multiple images of different sizes. I am uploading a larger png at 400x400px and resizing down to 60x60px. The small image looks very jagged and has the top and sides very slightly cropped off. Any help would be greatly appreciated!

Here is my detail template:

<div class="detail__treatment--icon">
        <img src="<perch:content type="image" id="treatment-icon" label="Treatment Icon" width="400" height="400" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Detailed description for search engines and screen readers" />" />
        <img src="<perch:content type="image" id="treatment-icon" label="Treatment Icon" width="60" height="60" />" />

and the listing template:

<div class="listing__treatments--treatment">
        <a href="?tr=<perch:content id="slug" type="slug" />">
          <perch:content id="treatment-icon" type="image" width="60" height="60" output="tag" />
          <h3><perch:content id="treatment-title" type="text" /></h3>



Perch is up to date
PHP 5.6.7 is up to date
MySQL 5.5.42 is up to date
Image processing available

Perch: 2.8.6, PHP: 5.6.7, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.6), assets (2.8.6), categories (2.8.6)
App runtimes: <?php $apps_list = array( 'content', 'categories', );
PERCH_PATH: /Users/Rob/Sites/hawley-health/build/admin
PERCH_CORE: /Users/Rob/Sites/hawley-health/build/admin/core
PERCH_RESFILEPATH: /Users/Rob/Sites/hawley-health/build/admin/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
Resource folder writeable: Yes
DOCUMENT_ROOT: /Users/Rob/Sites/hawley-health/build
REQUEST_URI: /admin/core/settings/diagnostics/
SCRIPT_NAME: /admin/core/settings/diagnostics/index.php
Rob Saunders

Rob Saunders 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Could we see an example of the original and the result?

Working offline using mamp at the moment but here are some screen shots:

Large image all ok but you can see the smaller version beneath:

Small image not so good:

Drew McLellan

Drew McLellan 2638 points
Perch Support

Could you upload the original rather than a screenshot? I can't try to reproduce the problem from a screenshot.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I get that same result. I'm not sure if it's anything we're doing or if it's GD. All I can do is log it to look into.

ok thanks, btw it looks fine with a jpg but is no use in this case as it doesn't retain the transparency which i need for rollover highlighting etc. Gif is also bad.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You can get a better result setting density="2" on the tag.

Thanks Drew. For the moment I have re-edited in photoshop and added 10px of transparent space around the icon. That plus density="2" seems to work. It seems whatever image processing was happening struggles with detailed lines that close to the edge of the image...

Drew McLellan

Drew McLellan 2638 points
Perch Support

I think it's more likely a rounding error.

This has probably been solved by now, however I'm new to Perch and found a solution. Open the perchImageClass.php:


and change the $sharpening values from '4' to '0'.

You may have to save the page again, or change the template file slightly to force Perch to regenerate the image file.