Image Editor aliasing
Permalink 1 user found helpful
Hello,
When I edit thumbnails using the image editor, the result comes out aliased. I can actually already see the aliasing while editing the image. The only way I can get an acceptable result is by applying a 3px gaussian blur filter.
Is there anything I can do to improve the quality of the image generated by the image editor?
I've attached an example to illustrate what I am talking about.
When I edit thumbnails using the image editor, the result comes out aliased. I can actually already see the aliasing while editing the image. The only way I can get an acceptable result is by applying a 3px gaussian blur filter.
Is there anything I can do to improve the quality of the image generated by the image editor?
I've attached an example to illustrate what I am talking about.
Thanks for the reply. My browser settings are fine, I think this has something to do with the problem described in this thread:http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-...
The images I am uploading are quite large (2556px wide) and the thumbnails I am creating are 300 px. I suspect Concrete5 is not using the step-down technique when downsizing images and that is what creates the aliasing.
Any ideas?
The images I am uploading are quite large (2556px wide) and the thumbnails I am creating are 300 px. I suspect Concrete5 is not using the step-down technique when downsizing images and that is what creates the aliasing.
Any ideas?
Hi Heisei,
For testing, please attach the original image as a reply.
What browser are you using? It appears that the type of browser used can affect the results.
For testing, please attach the original image as a reply.
What browser are you using? It appears that the type of browser used can affect the results.
Hello, here is the original image.
I am using the latest Chrome on fully updated Windows 10 64-bit.
I am using the latest Chrome on fully updated Windows 10 64-bit.
@Heisei
I can confirm that the Image Editor resizing creates artifacting. The artifacting is more noticeable depending on the image. It appears to be more pronounced when the source image is very large.
Using the image you attached, I compared the results at different thumbnail sizes:
- the default appearance before resizing with the Image Editor (using the GD image processor)
- resized using the Image Editor (full size source image 4700x3133)
- resized using the Image Editor (source image resized to 1620x1080)
I can create a GitHub issue for this.
I can confirm that the Image Editor resizing creates artifacting. The artifacting is more noticeable depending on the image. It appears to be more pronounced when the source image is very large.
Using the image you attached, I compared the results at different thumbnail sizes:
- the default appearance before resizing with the Image Editor (using the GD image processor)
- resized using the Image Editor (full size source image 4700x3133)
- resized using the Image Editor (source image resized to 1620x1080)
I can create a GitHub issue for this.
Thank you for looking into this. I agree that the larger the size difference between the source image and the thumbnail is, the more pronounced the issue becomes. I believe that the step-down resizing technique I've linked to above can fix this.
If you can report this on GitHub, it would be awesome!
Thank you for you time.
If you can report this on GitHub, it would be awesome!
Thank you for you time.
I'm curious to know if this was ever resolved in core? we've had a client complain about the thumbnail quality and I wonder if it's related to this.
Has any one had a better experience using the thumbnailer with ImageMagick?
Has any one had a better experience using the thumbnailer with ImageMagick?
@TheRealSean
The GitHub issue for this is still open. I recommend commenting if you are encountering it and want to raise interest in it.
https://github.com/concrete5/concrete5/issues/3591...
The Image Editor uses JavaScript to resize images, I don't believe ImageMagick would affect the images produced.
The GitHub issue for this is still open. I recommend commenting if you are encountering it and want to raise interest in it.
https://github.com/concrete5/concrete5/issues/3591...
The Image Editor uses JavaScript to resize images, I don't believe ImageMagick would affect the images produced.
Its very "long" and hard to edit all the images thumbs by hand in any CMS. Its better to use photosop actions or online endless tools for auto crop and re-size.
Better approach is to use this Image Thumbnails feature:
http://documentation.concrete5.org/developers/working-with-files-an...
Or you can find galleries that create the thumb cache for you (Its always better for performance to have smaller images ready)
http://fotorama.io/#unsplash__23b818d0-07c3-40de-a070-c999c1323ff3...
Anyway If you find alias problem you can add this issue to github.
Better approach is to use this Image Thumbnails feature:
http://documentation.concrete5.org/developers/working-with-files-an...
Or you can find galleries that create the thumb cache for you (Its always better for performance to have smaller images ready)
http://fotorama.io/#unsplash__23b818d0-07c3-40de-a070-c999c1323ff3...
Anyway If you find alias problem you can add this issue to github.
Thanks for the tip, however, I am using the thumbnail feature already. I simply want to adjust the generated thumbnail's crop for art direction purposes using C5's built in Image editor.
Agree with siton,
Use Photoshop to edit your image or another option is graphic designer who can help out to make your image perfect.
Use Photoshop to edit your image or another option is graphic designer who can help out to make your image perfect.
Anyway you can "destroy" image quality by scale it up and save (like in Photoshop or any other graphic editor)
I think you zoom up the browser view (ctr+) - to 125% for example. So in the "image-editor" the picture look little blur compare to 100% desktop image viewer. Change the browser to 100% (ctr+1 in chrome) and check again.