Forum
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" />" />
</div><!--/icon-->
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>
</a>
</div><!--/treatment-->
Diagnostics:
HEALTH CHECK
Perch is up to date
PHP 5.6.7 is up to date
MySQL 5.5.42 is up to date
Image processing available
SUMMARY INFORMATION
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_LOGINPATH: /admin
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
HTTP_HOST: dev.hawleyhealthcentre.co.uk
DOCUMENT_ROOT: /Users/Rob/Sites/hawley-health/build
REQUEST_URI: /admin/core/settings/diagnostics/
SCRIPT_NAME: /admin/core/settings/diagnostics/index.php
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: https://splendidsound.co.uk/testimages/skelington_lrg.png
Small image not so good: https://splendidsound.co.uk/testimages/skelington_sml.png
Could you upload the original rather than a screenshot? I can't try to reproduce the problem from a screenshot.
here you go: https://splendidsound.co.uk/testimages/skeletons-Lrg.png
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.
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...
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:
/site-folder/perch/core/lib/PerchImage.class.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.