I have a lot of small preview size images that are being rendered with rounded corners. For the most part, they look great, but unfortunately they don't render properly from corner to corner.

The lower right corner is the worst offender and generally looks smaller or cut off rather than being rounded, while all the other corners look more normal -- even though they don't match pixel to pixel when enlarged and compared in Photoshop. Larger images are still not balanced, but are not as noticeable because of their size.

I've run a lot of tests and have found that the pixel dimensions don't seem to matter, so the source image and conversions can be odd or even. I prefer non-aliased corners for clean lines, and while aliasing improves the results, it doesn't fix the underlying problem. Setting the corners individually doesn't fix it an actually exacerbates the issue.

Here's a setup that shows the problem with the bottom-right corner:

- scale (width 80px)
- change file format (convert to: png)
- crop (width: 80, height: 45, xoffset: center, yoffset: center)
- define canvas (80x45 (center, center) #333333 under image)
- rounded corners (6px | 6px | 6px | 12px |)
- define canvas (82x47 (center, center) under image)
- rounded corners (6px | 6px | 6px | 12px |)

My configuration:

Image Resize Filter 6.x-1.6
ImageAPI 6.x-1.6
ImageCache 6.x-2.0-beta10
Imagecache Actions 6.x-1.6
Imagecache Effects 6.x-1.1
Imagecache javascript crop 6.x-1.x-dev (2009-Jun-04)
ImageCache Profiles 6.x-1.1
ImageCache Scale-9 Actions 6.x-1.0
ImageField 6.x-3.2

CommentFileSizeAuthor
#3 ai_to_ps_stroke_1px_vs_imageCache.png1.61 KBmichael.k
#2 8px.png18.67 KBmichael.k
#2 10px.png18.7 KBmichael.k
#2 12px.png18.95 KBmichael.k
#1 imagecache_sample-cornerproblem.png7.86 KBdman
#1 imagecache_sample-cornerproblem2.png7.89 KBdman

Comments

dman’s picture

dman commented
StatusFileSize
new imagecache_sample-cornerproblem2.png7.89 KB
new imagecache_sample-cornerproblem.png7.86 KB

Do I need glasses?
I don't see any obvious issue on this example

although the first define canvas is redundant, it produces pretty much what I'd expect. I thought there may actually be a chance for an off-by-one error in the last corner .... but I just can't see it.

FWIW, you'll get slightly better results with a wider radius on the outside border to allow for the effect of enlarging the base.

Scale	80x100%
Change File format	Convert to : png
Crop	width: 80, height: 45, xoffset: center, yoffset: center
Rounded Corners	Radius: 6px	
Define Canvas	82x47 (center, center)  #333333  under image
Rounded Corners	Radius: 7px

So I'm not seeing the issue on my set-up.
You can try adding a bigger thicker border and THEN scaling down. YMMV.

michael.k’s picture

michael.k commented
StatusFileSize
new 12px.png18.95 KB
new 10px.png18.7 KB
new 8px.png18.67 KB

Thanks for responding so quickly. Hope these attachments show the subtle but significant difference among the corners. (Non-aliased, which is cleaner for single lines and I assume faster?)

As far as the redundancy goes, if I don't use two instances of the rounded corners function, how else do I get the outline with transparency?

michael.k’s picture

michael.k commented
StatusFileSize
new ai_to_ps_stroke_1px_vs_imageCache.png1.61 KB

In case it helps, here's another way of looking at the issue. You can see the symmetry of a yellow line produced by Illustrator and Photoshop vs. the ImageCache output underneath.

The symmetrical line was created in Illustrator using a 96x54 rectangle with a 10px rounded corner effect. I pulled that into Photoshop and created a work path that was stroked 1px (inside). Then I scaled it 600% (using Nearest Neighbor) for this example.

Sorry if this seems trivial, and it's not a big deal as things go, but the eye does see these differences when a lot of these images are on the page — especially when they're not antialiased. It seems this is a matter of balance more than anything because the module appears to be calculating the radius differently for each corner.

Thanks!

fietserwin’s picture

fietserwin
Location Le Mont-Dore
commented
Status: Active » Closed (won't fix)

D6 EOL. This module's D6 issues already haven't received any attention for over a year. Closing them all unconditionally now.