Copied to clipboard

Flag this post as spam?

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


  • SSA Backend 108 posts 640 karma points
    Feb 01, 2018 @ 11:32
    SSA Backend
    0

    Image Cropper tricky question

    Hi,

    We are developing Tinifier package and faced on with a next problem. Images uploaded to Umbraco.ImageCropper property located in the media folder but doesn't have any id. All our functional is based on that any image could be found via MediaService. I found out a way how to find Url for such images, but it's quite complicated. I need to get all Contents which have N properties of Umbraco.ImageCropper type, but I can't save any information because they don't have an ID. The question is, does Umbraco have any service to deal with such images? How to get all images which are not media in a simple way which will be supported in next versions?

    Content type in an edit mode

    enter image description here

    Media in a blob storage

    enter image description here

    JSON sample

        {
      "focalPoint": {
        "left": 0.5,
        "top": 0.5
      },
      "src": "http://127.0.0.1:10000/devstoreaccount1/media/1007/png-header-1.jpg",
      "crops": [
        {
          "alias": "Test1",
          "width": 500,
          "height": 500
        },
        {
          "alias": "Test2",
          "width": 300,
          "height": 300
        },
        {
          "alias": "Test3",
          "width": 25,
          "height": 25
        }
      ]
    }
    

    Minor questions:

    1. How to get "_thumb" images without hard-coding?
    2. How to know that non-media image was changed and run own code?
  • James Jackson-South 489 posts 1746 karma points c-trib
    Feb 01, 2018 @ 13:13
    James Jackson-South
    0

    Tinifier optimizes the raw media files from the media section yeah?

    If so then it's pretty much useless as soon as the image is served cropped since the image is re-encoded using System.Drawing and stored in the ImageProcessor.Web cache.

    There's already a postprocessor available for ImageProcessor.Web that optimizes the stream during processing after the initial encoding to optimize the images.

  • Damien (Slipoch) 62 posts 346 karma points
    Feb 01, 2018 @ 22:01
    Damien (Slipoch)
    0

    However that means imageprocessor gets hit with larger files than necessary, increasing load times for large images.

    It also assumes that imageprocessor is more efficient than Tinify, which it may or may not be.

  • James Jackson-South 489 posts 1746 karma points c-trib
    Feb 01, 2018 @ 23:05
    James Jackson-South
    0

    Nope.

    You're confusing over-the-wire speed with decoding speed. ImageProcessor.Web serves the image request, it doesn't receive it from elsewhere.

    A pre-optimized image will still take the same time to decode (unless the optimization is lossy, with which you have to be very careful and test for psychovisual changes). So an optimized image of 5000x5000 will be decoded no faster than an un-optimized one.

    If you want to improve the speed of returning an image to the end user you should process the images in the following order.

    1. Ensure that the image dimensions have been constrained to a maximum set of desired values.
    2. Once scaled/cropped, optimize the encoded image using various specialist tools to improve on the System.Drawing output.
    3. Cache that optimized output for future requests.

    That's precisely what the Image Cropper + ImageProcessor.Web + PostProcessor do.

    BTW. The PostProcessor uses multiple best-in-class tools to do the optimization.

  • Damien (Slipoch) 62 posts 346 karma points
    Feb 01, 2018 @ 23:48
    Damien (Slipoch)
    0

    Assuming the compression changes size as well (which tinify can do), using your example wouldn't a 1920x1920 image be processed faster than a 5000x5000?

    And would the resultant size of image displayed also be smaller if cropped to ratio rather than fixed size? Thus speeding up pageload? ie: the 5k image cropped to 4x3 ratio vs the 1920 image cropped to 4x3?

    Sorry for the query, we are getting off the OT, but just curious as there is bugger all info on using the image processor in c# for Umbraco.

  • James Jackson-South 489 posts 1746 karma points c-trib
    Feb 02, 2018 @ 00:13
    James Jackson-South
    0

    Assuming the compression changes size as well (which tinify can do), using your example wouldn't a 1920x1920 image be processed faster than a 5000x5000?

    If the size changes, yeah you reduce the output since there's less pixel data to decode. Optimizing at that point though still adds no advantage.

    And would the resultant size of image displayed also be smaller if cropped to ratio rather than fixed size? Thus speeding up pageload? ie: the 5k image cropped to 4x3 ratio vs the 1920 image cropped to 4x3?

    Cropping to a ratio is exactly what the ImageProcessor.Web.API + ImageCropper do. Why reinvent the wheel?

    Sorry for the query, we are getting off the OT, but just curious as there is bugger all info on using the image processor in c# for Umbraco.

    There's little Umbraco specific information because ImageProcessor is not an Umbraco plugin/product. ImageProcessor has no awareness of the Umbraco API's.

    If you wanted to call ImageProcessor on upload/save of your images to the media section you would look at binding into the Umbraco MediaService.Saving event.

    Someone has already written a package for this though.

    https://our.umbraco.org/projects/website-utilities/smallerimages/

Please Sign in or register to post replies

Write your reply to:

Draft