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 138 posts 353 karma points
    Aug 09, 2018 @ 08:07
    Anders Brohus
    0

    ImageCropper makes images look blurry

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

  • Chriztian Steinmeier 2668 posts 7946 karma points MVP 2x admin c-trib
    Aug 09, 2018 @ 09:00
    Chriztian Steinmeier
    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

  • Anders Brohus 138 posts 353 karma points
    Aug 09, 2018 @ 09:02
    Anders Brohus
    0

    It does not help anything :/

  • Chriztian Steinmeier 2668 posts 7946 karma points MVP 2x admin c-trib
    Aug 09, 2018 @ 09:03
    Chriztian Steinmeier
    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

  • Anders Brohus 138 posts 353 karma points
    Aug 09, 2018 @ 09:05
    Anders Brohus
    0

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

  • Nik 854 posts 3387 karma points MVP c-trib
    Aug 09, 2018 @ 09:07
    Nik
    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

  • Anders Brohus 138 posts 353 karma points
    Aug 09, 2018 @ 09:08
    Anders Brohus
    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 :)

  • James Jackson-South 472 posts 1705 karma points c-trib
    Aug 09, 2018 @ 21:06
    James Jackson-South
    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

  • James Jackson-South 472 posts 1705 karma points c-trib
    Aug 10, 2018 @ 08:35
    James Jackson-South
    103

    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.

  • Anders Brohus 138 posts 353 karma points
    Aug 15, 2018 @ 06:16
    Anders Brohus
    0

    Thanks alot :)

    Then we have something to tell the client :)

  • Sumesh KP 19 posts 88 karma points
    Aug 12, 2018 @ 04:01
    Sumesh KP
    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

  • James Jackson-South 472 posts 1705 karma points c-trib
    Aug 12, 2018 @ 14:52
    James Jackson-South
    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

  • John Bergman 359 posts 896 karma points
    Aug 22, 2018 @ 04:05
    John Bergman
    0

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

  • James Jackson-South 472 posts 1705 karma points c-trib
    Aug 24, 2018 @ 21:32
    James Jackson-South
    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.

Please Sign in or register to post replies

Write your reply to:

Draft