jpg compression

[Eirik]

I love that you added an imageditor to Rad Editor, but is there any way to the adjust the jpg compression? I've tried resizing an image, and cropping an image. In both tests the thumb created has so low quality that its useless.

[Tervel]

Hello Eirik,

Thank you for the feedback. We will investigate what options there are for improving the quality of the saved image. Let me provide you with some more information on how the current implementation works, as well as some immediate suggestions to try.

There is a level of abstraction behind the ImageManager, allowing for developers to plug in a different image provider, such as a database. It is this provider, and not the ImageEditor itself that does the actual saving. It is also possible to subclass this provider, and implement an alternative saving method.

More information on this provider can be found in this online demo:
http://www.telerik.com/demos/aspnet/prometheus/Editor/Examples/DBFileBrowserContentProvider/DefaultCS.aspx


At present this is how the "default" ImageProvider saves the [cropped] image file:

public

override string StoreBitmap(Bitmap bitmap, string url, ImageFormat format)
{
   bitmap.Save(Context.Server.MapPath(url), format);
   return url;
}

As you see, the implementation lets the .NET framework take care of the save process. It seems that the frameowrk does not do such a good job with its default algorithm when it comes to saving .jpegs.

For the time being, what you can try is subclass the Telerik.Web.UI.Widgets.FileSystemContentProvider class (it is public), override just this one method with a more advanced save method, and set the editor to use the subclassed provider, e.g.

RadEditor1.ImageManager.ContentProviderTypeName = typeof(

Telerik.Web.UI.Widgets.

FileSystemContentProvider).AssemblyQualifiedName;

We will research ourselves what alternatives exist to the default .NET jpeg saving mechanism, and we hope to soon come out with a solution that provides better results.

Best Regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Eirik]

In our CMS we are using a component from Pegasus Images for resizing images which i very good.

Before this we were using this code which also works ok, but the quality isn't as good as with Pegasus. But I think it's a lot better than using the default .net method you are using:
http://www.codeproject.com/KB/GDI-plus/imageresize.aspx

[Tervel]

Hi,

Thank you for the provided link. However, the CodeProject entry listed seems to be quite similar to what we are alredy doing internally with the bitmap.

On a side note, we just enabled a code library project, sent to us by one of our MVPs.
http://www.telerik.com/community/code-library/submission/b311D-bdcktd.aspx

What it does is allow upload of a .zip with images, and unzip it on the server.
The approach taken is very similar to what I suggested to you - it subclasses the FileSystemContentProvider and overrides a single method.

In case you decide to build upon my original suggestion this Code Library will definitely help you set up things.

Kind regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shaun Peet]

I just spent a few hours learning more new things about this issue and have found the way to fix it.  The problem stems from Image Quantization (google it) and the fact that by default ASP.NET saves images using web-safe only colors.

The reason I spent so much time on it is because I've got a bunch of sites that are dynamically producting resized images because IE6 doesn't support the max-width css property (and a few other reasons, but that's the main one).

There is a tried and tested dll out there that solves this problem, located here.  Before implementing the ImageQuantization most of my dynamically created images were coming out grainy; after using this they are crystal clear!

I'm going to use this in my own FileBrowserContentProvider class for testing, but due to the extreme advanced-ness of this topic I would highly recommend that this become part of the Telerik.Web.UI.Widgets codebase.  I'll post again if there are any issues with using this in conjunction with the Image Editor.

[Shaun Peet]

FYI: Here's the code for how to use it:

Public Overrides Function StoreBitmap(ByVal bitmap As System.Drawing.Bitmap, ByVal url As String, ByVal format As System.Drawing.Imaging.ImageFormat) As String
  Dim quant As OctreeQuantizer = New OctreeQuantizer(128, 8)
  Return MyBase.StoreBitmap(quant.Quantize(bitmap), url, format)
End Function

Shaun.

[Lini]

Hello Shaun,

We are already using the quantizer workaround to fix the colors of gif images. Erik's problem was with jpg files and it turned out to be a problem with the resize and crop settings we applied by default. We have modified the resize and crop functions and now jpg images are properly changed without loss of quality. If you wish to get a new build with these fixes, open a support ticket and we will send it to you.

Regards,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Idar Sprock]

Hi Telerik,
I wonder if it is possible to use the imageeditor tools (resize,crop and the other nice gadgets) in code behind?

for example:
foreach (UploadedFile file in RadUpload1.UploadedFiles)
{
 string target = Server.MapPath(~/Images);
            file.SaveAs(Path.Combine(target, file.GetName()));
            using (Imageeditor editor)
            {
              ....
             }
}

or somthing similar ?

[Tervel]

Hello Idar,

The "engine" which performs image manipulation is in fact a public class which can be called from server-side code.
Please review the following blog post for extra information:
http://blogs.telerik.com/tervelpeykov/posts/08-10-23/a_quick_but_not_so_dirty_image_editor_using_the_public_radeditor_imageediting_api.aspx


Greetings,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Albert Shenker]

I have been playing around with the latest build (Q1 2009 527) and there still appears to be a great deal of distortion when resizing JPGs. I took an image which was 1250x940 and shrank it to 500x375. The result was very grainy. I also took another image which was 500x375 and blew it up to 1250x940. The result was a ittle better, but still quite grainy. I compared these results to what I was able to accomplish with Adobe Image Ready 2.0. Now, I wouldn't expect web compression to be as good as photo editing software, but that version of Image Ready is about 10 years old, so I didn't think the difference would be so striking. I also tried making lesser modifications, altering a 500x375 image and making it 400x300 and the results were less than inspiring. I also compared all of these results to what can be accomplished through software like Snag-It. Like I said, I wouldn't expect the Rad Image Editor to be as good a sophisticated photo editing software, but I believe it's usefulness is greatly deminished if the resizing feature delivers such poor results. Lini's post on Apr 25, 2008 made it seem like Teleirk had solved this issue, but I am afraid that is not the case. Are you guys still looking into this and have you found a work-around if a built-in solution isn't available yet?

[Lini]

Hi Albert,

The modifications we made last year due to Eirik's feedback improved the output quality of the Image Editor a lot. We did some tests today resizing .jpg images and the results were of satisfactory quality. We are still using the built-in .NET framework image manipulation routines. I am not surprised that 3rd party tools will perform better than the .NET's System.Drawing assembly. However, we are not trying to achieve maximum picture quality. If you need that, then you can probably hook in the Image editor routines for getting and saving the image and use another tool to modify it instead. The functions are in the file browser content provider (GetFile() to get the image stream and StoreBitmap() to store it back). On the other hand, you can open a formal support ticket and send us some sample images so we can see what you are using for input and what the Image Editor dialog produces.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.