imagecropper makes images look blurry

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Anders Brohus 194 posts 475 karma points

Aug 09, 2018 @ 08:07

0

ImageCropper makes images look blurry

Templates, (partial) views and macros

Umbraco 7

Hi Our..

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

"http://localhost:52212/media/1008/imageName1920x800.jpg?anchor=center&mode=crop&width=1920&height=800&rnd=131782805070000000"

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? :/

Copy Link
Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib

Aug 09, 2018 @ 09:00

0

Hi Anders,

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...

/Chriztian

Copy Link
Anders Brohus 194 posts 475 karma points

Aug 09, 2018 @ 09:02

0

It does not help anything :/

Copy Link
Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib

Aug 09, 2018 @ 09:03

0

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).

/Chriztian

Copy Link
Anders Brohus 194 posts 475 karma points

Aug 09, 2018 @ 09:05

0

I'm not quite sure if it's quality or upscaling .. Can i DM you on Twitter with the two urls? :)

Copy Link
Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib

Aug 09, 2018 @ 09:08

0

Yes, no problem!

/Chriztian

Copy Link
Anders Brohus 194 posts 475 karma points

Aug 09, 2018 @ 09:12

0

Thanks alot :)

Copy Link
Nik 1593 posts 7151 karma points MVP 6x c-trib

Aug 09, 2018 @ 09:07

0

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 :-)

Nik

Copy Link
Anders Brohus 194 posts 475 karma points

Aug 09, 2018 @ 09:08

0

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 :)

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

Aug 09, 2018 @ 21:06

0

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

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

Aug 10, 2018 @ 08:35

104

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.

https://en.wikipedia.org/wiki/Chroma_subsampling

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.

Copy Link
Anders Brohus 194 posts 475 karma points

Aug 15, 2018 @ 06:16

0

Thanks alot :)

Then we have something to tell the client :)

Copy Link
Felipe Toffolo 1 post 71 karma points

Jan 16, 2019 @ 12:43

0

Hi. 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

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

Jan 16, 2019 @ 20:57

0

I’m afraid not. The encoder will undo anything you attempt as it stores the pixel data.

Copy Link
Sumesh KP 34 posts 107 karma points c-trib

Aug 12, 2018 @ 04:01

0

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

Ex:- https://localhost:460/media/1128/test.jpg?width=120&height=120&mode=crop

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 :)

@sumeshkp18

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

Aug 12, 2018 @ 14:52

0

@sumeshkp18

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

https://github.com/imazen/resizer/blob/2be2ad19788d45fdaedb6d6425f1fba2d0b143cd/Core/Plugins/Basic/DefaultEncoder.cs#L339

Copy Link
John Bergman 483 posts 1132 karma points

Aug 22, 2018 @ 04:05

0

We solved it on our site by changing to using slimsy for many of the images where the visual impact was important.

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

Aug 24, 2018 @ 21:32

0

No you didn't.

Slimsy dynamically generates urls for ImageProcessor.Web to use based on your viewport dimensions.

https://our.umbraco.com/projects/website-utilities/slimsy/

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.

Copy Link

Thomas 315 posts 602 karma points c-trib

Nov 25, 2019 @ 10:37

Is it possible to get around this ? My images are very blurry when using the slumsy cropping.

<picture>
        <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-srcset="@Url.GetSrcSetUrls(Model.BackgroundImage,"top hero")"
           data-src="@Url.GetCropUrl(Model.BackgroundImage, "top hero")"
           sizes="auto" class="lazyload"
           alt="@(Model.BackgroundImage != null ? Model.BackgroundImage.Value("altText") : "")" />
</picture>

Copy Link

bh 408 posts 1395 karma points

Feb 18, 2021 @ 14:44

0

Any solution? This just started happening for me and I've been using Umbraco for several years.

Copy Link
bh 408 posts 1395 karma points

Feb 18, 2021 @ 15:14

1

I figured out my issue. The image blur in my case was being caused by SlickSlider. Setting useTransform: false fixed it for me.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?