Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
We currently got some problems with the ImageCropper that i hope you guys can help us with :)
Because we got a crop which is 1920x800, and an image which is 1920x800 when we call the GetCrolUrl with the crop, we get an URL that looks like this
But as said it looks very blurry, then if we simply just take the URL then it looks sharp and crispy..
What is going wrong? :/
I'm guessing that's maybe a quality issue - i.e., what happens when you add something like &quality=90 to the cropper URL?
Don't know what the default quality is, but that would explain the difference between the original image (just the image's URL) and the "cropped" version...
It does not help anything :/
Ah - forgot one thing:
There's a setting for the maximum output sizes too - maybe that's influencing the output?
When you get the "cropped" version, can you maybe see if the blurriness is due to upscaling or quality? (Assuming the resulting image is actually 1920 x 800).
I'm not quite sure if it's quality or upscaling ..
Can i DM you on Twitter with the two urls? :)
Yes, no problem!
Thanks alot :)
I had this issue. Spent absolutely AGES investigating it, but it was CSS that was causing the issue not Image Cropper.
Check any CSS/Image sizing that is happening client side :-) I can't remember exactly what styling it was that caused it. Sorry :-)
It's blurry when i open the image directly :)
So if i go directly to this file, http://localhost:52212/media/1008/imageName1920x800.jpg?anchor=center&mode=crop&width=1920&height=800&rnd=131782805070000000 i would see a blurry image but if i remove all ImageCropper querystrings it's sharp :)
Could simply be System.Drawing's crappy encoder. If you could send me the image URL, I could tell you everything about it. @James_M_South
Having had a look at the input and output images I can confirm that it's System.Drawing's jpeg encoder causing the issue.
Basically the issue is caused by chroma subsampling in the encoded image. This affects how color information is shared across pixels.
The input is encoded at 4:4:4, the output at 4:2:0. The reduced number of chrominance samples shared across pixels is what is causing the blurriness as the color bleeds from one pixel to the next.
I was able to save the image at both using my ImageSharp library and easily replicated the issue.
Unfortunately there's no simple way to work around this. System.Drawing always uses 4:2:0 chroma subsampling regardless of the quality setting you choose, and it offers no way to change that. Using a lossless format such as png will double the output size.
Then we have something to tell the client :)
I understand that the problem is with System.Drawing.
Just one question. I did not understood about the 4:4:4 - 4:2:0 stuff.
But, is there something that i could do to the image before uploading it, that could make the problem smaller?
Thanks for all the help
I’m afraid not. The encoder will undo anything you attempt as it stores the pixel data.
I had the same issue and didn't find any solution inside umbraco image cropper.
So I managed with server imageresizing - https://imageresizing.net/docs/basics
It works good without loosing quality. You must give the crop mode else some images shows a black background with in the image. Because the normal dimension may be less than given in the cropper parameters.
By default the image will crop to centre.
If you want to give different focal point for the same image, you have to go with imagecroppers.
I hope it may help you :)
You didn't have the same issue at all if you were able to solve it using ImageResizer as that also uses System.Drawing to encode jpeg files
We solved it on our site by changing to using slimsy for many of the images where the visual impact was important.
No you didn't.
Slimsy dynamically generates urls for ImageProcessor.Web to use based on your viewport dimensions.
Any improvement you were seeing was probably due to the creation of retina image requests (high dimensions, low quality) that are then scaled down in the browser making them appear sharper.
To anyone else reading this. I've already answered the question, please stop polluting the thread with irrelevance.
I know the jpeg format more than most having written both a decoder and encoder.
I also wrote ImageProcessor.Web which the cropper uses.
Is it possible to get around this ?
My images are very blurry when using the slumsy cropping.
<source media="(min-width: 1000px)" srcset="@Model.BackgroundImage.GetCropUrl(cropAlias: "top hero", useCropDimensions:true, furtherOptions:"&format=jpeg")">
<source media="(min-width: 768px)" srcset="@Model.BackgroundImage.GetCropUrl(cropAlias: "top hero tablet", useCropDimensions:true, furtherOptions:"&format=jpeg")">
<source media="(min-width: 0px)" srcset="@Model.BackgroundImage.GetCropUrl(cropAlias: "top hero mobile", useCropDimensions:true, furtherOptions:"&format=jpeg")">
<img src="@Model.BackgroundImage.GetCropUrl(cropAlias: "top hero", quality:70, useCropDimensions:true, furtherOptions:"&format=jpeg")"
data-src="@Url.GetCropUrl(Model.BackgroundImage, "top hero")"
alt="@(Model.BackgroundImage != null ? Model.BackgroundImage.Value("altText") : "")" />
Any solution? This just started happening for me and I've been using Umbraco for several years.
I figured out my issue. The image blur in my case was being caused by SlickSlider. Setting useTransform: false fixed it for me.
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted