I am noticing a slight reduction in quality between the images I am uploading to the media library and the images being served to the browser. I am testing with JPG images. This happens even if I do not change the size of the image. It also happens even if I add a quality=100 parameter to the URL.
Is there some other default processing happening to the images? And if so, how can I disable it?
Update: It only happens if I add a "width=" parameter to the URL. Even if the width parameter does not change the size of the image. Is this just an unavoidable artifact of the resizing algorithm? Or is it doing something else that I can control?
Thanks for getting back to us on this. But, actually, I have moved on and solved the issue by using the paid-for ImageResizer from Imazen. The website is http://www.daveandbusters.com.
I am working on a new website now and I am afraid the same issue may come up because we need very high quality images for this new site too. For this new site, I will definitely consider using ImageProcessor if we can solve the quality problem (if it even arises). I am using it in dev already.
I restored the images mentioned in my original post, so that you can see them. I do not know how else to share the images in a more permanent way. Any suggestions are welcome.
I do not know if the images were always a problem. In fact, I didn't notice until my keen-eyed client spotted it. Also, I didn't try upgrading to a newer version - I don't believe there was a newer version at the time I had the problem.
Was that first image definitely a jpeg? It's being quantized which the jpeg encoder in .NET doesn't do. That looks like pngquant in the postprocessor (now an optional plugin) must have processed it.
I'm using the highest quality algorithm System.Drawing offers for resizing images but I do know ImageResizer now uses a custom algorithm which will offer higher quality.
I've actually implemented much better algorithms for the CoreFX version I am writing but they won't ever get ported back.
Definitely give ImageProcessor a try in your new site (since it's free), I've removed the post processors due to issues so there might be enough of an improvement for you.
We are having the same problem with the newest version of UaaS. Specifically visible then displaying images with solid colors or PNGs with transparency.
Can you share some insight on your implementation of ImageResizer from Imazen? Is it advanced stuff or plug and play?
For the most part ImageResizer and ImageProcessor are interchangeable, maybe with some minor configuration changes. But they both do much the same thing.
Could you demonstrate what issues you are having with images. I don't know of any issues regarding png transparency nor solid colours.
There is a known issue regarding gif quality just now that we introduced accidentally in the last release but I have a new release waiting to be deployed which fixes that.
Paul, great to hear it is now working well for you.
Of course, the most visible example would be this PNG cloud that we wanted to scale to the needed size.
Attached is the original image and the image from Umbraco, the Umbraco image was retrived width these parameters(same width as original) to prove the issue:
.../image.png?width=1476&quality=100
Notice the bands appearing in the cloud, looks a bit like oil. If your on a bad laptop screen or something similar i have added a version with extra contrast to show the problem.
Aha! Right.... Would you be able to do me a favor and tell me what version of ImageProcessor.Web and ImageProcessor is installed?
The issue you are seeing is caused by rounding errors when converting colorspaces during resizing (Doing the conversion fixes gamma issues). Unfortunately the fix causes issues with greyscale images due to System.Drawing crappiness.
In the latest versions that is turned off by default.
We are using UaaS with Umbraco version 7.3.8, I´m sorry but I dont know how to see which version of ImageProcessor its using.
I can have somebody from Umbraco to get it for me if needed? But if i understand it correctly you're saying that the newest version of ImageProcessor should fix this issue?
You can actually check the version of ImageProcessor.Web by looking at the response headers of the returned image. I put the version number in there to help debugging.
Image Quality Issues
Hi,
I am using the ImageProcessor in a new website to help me optimize images for mobile. These are the versions I have installed:
ImageProcessor: 2.3.0.0 ImageProcessor.Web: 4.4.0.0 ImageProcessor.Web.Config: 2.2.3.0
I have not changed any of the default settings.
I am noticing a slight reduction in quality between the images I am uploading to the media library and the images being served to the browser. I am testing with JPG images. This happens even if I do not change the size of the image. It also happens even if I add a quality=100 parameter to the URL.
Have a look at these examples: http://1drv.ms/1MZBfJL
Is there some other default processing happening to the images? And if so, how can I disable it?
Update: It only happens if I add a "width=" parameter to the URL. Even if the width parameter does not change the size of the image. Is this just an unavoidable artifact of the resizing algorithm? Or is it doing something else that I can control?
Thanks. Paul.
Hi Paul,
Did you ever find a solution to this issue? I am also experiencing the same problem.
Matt
Hi Paul, Matt,
Can you please both give me a little more to go on?
That link is a dead end so I can't see anything.
Cheers
James
Hi James,
Thanks for getting back to us on this. But, actually, I have moved on and solved the issue by using the paid-for ImageResizer from Imazen. The website is http://www.daveandbusters.com.
I am working on a new website now and I am afraid the same issue may come up because we need very high quality images for this new site too. For this new site, I will definitely consider using ImageProcessor if we can solve the quality problem (if it even arises). I am using it in dev already.
I restored the images mentioned in my original post, so that you can see them. I do not know how else to share the images in a more permanent way. Any suggestions are welcome.
I do not know if the images were always a problem. In fact, I didn't notice until my keen-eyed client spotted it. Also, I didn't try upgrading to a newer version - I don't believe there was a newer version at the time I had the problem.
Either way, thanks for following up on this Jame.
Regards, Paul.
Hi Paul,
I'm glad you managed a workaround.
Was that first image definitely a jpeg? It's being quantized which the jpeg encoder in .NET doesn't do. That looks like pngquant in the postprocessor (now an optional plugin) must have processed it.
I'm using the highest quality algorithm System.Drawing offers for resizing images but I do know ImageResizer now uses a custom algorithm which will offer higher quality.
I've actually implemented much better algorithms for the CoreFX version I am writing but they won't ever get ported back.
Definitely give ImageProcessor a try in your new site (since it's free), I've removed the post processors due to issues so there might be enough of an improvement for you.
Cheers
James
Hi Paul,
We are having the same problem with the newest version of UaaS. Specifically visible then displaying images with solid colors or PNGs with transparency.
Can you share some insight on your implementation of ImageResizer from Imazen? Is it advanced stuff or plug and play?
Thanks, Niels
Hi Niels,
For the most part ImageResizer and ImageProcessor are interchangeable, maybe with some minor configuration changes. But they both do much the same thing.
Regards, Paul.
Hi,
By the way, just for the record. I am using ImageProcessor on newer sites and it works fine.
Regards, Paul.
Hi Niels,
Could you demonstrate what issues you are having with images. I don't know of any issues regarding png transparency nor solid colours.
There is a known issue regarding gif quality just now that we introduced accidentally in the last release but I have a new release waiting to be deployed which fixes that.
Paul, great to hear it is now working well for you.
Cheers
James
Hi James
Of course, the most visible example would be this PNG cloud that we wanted to scale to the needed size.
Attached is the original image and the image from Umbraco, the Umbraco image was retrived width these parameters(same width as original) to prove the issue: .../image.png?width=1476&quality=100
Notice the bands appearing in the cloud, looks a bit like oil. If your on a bad laptop screen or something similar i have added a version with extra contrast to show the problem.
Aha! Right.... Would you be able to do me a favor and tell me what version of ImageProcessor.Web and ImageProcessor is installed?
The issue you are seeing is caused by rounding errors when converting colorspaces during resizing (Doing the conversion fixes gamma issues). Unfortunately the fix causes issues with greyscale images due to System.Drawing crappiness.
In the latest versions that is turned off by default.
Just to note quality has no effect on png's
We are using UaaS with Umbraco version 7.3.8, I´m sorry but I dont know how to see which version of ImageProcessor its using.
I can have somebody from Umbraco to get it for me if needed? But if i understand it correctly you're saying that the newest version of ImageProcessor should fix this issue?
Hi Neils,
Yeah It should do.
You can actually check the version of ImageProcessor.Web by looking at the response headers of the returned image. I put the version number in there to help debugging.
is working on a reply...