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?
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.
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.
Ensure that the image dimensions have been constrained to a maximum set of desired values.
Once scaled/cropped, optimize the encoded image using various specialist tools to improve on the System.Drawing output.
Cache that optimized output for future requests.
That's precisely what the Image Cropper + ImageProcessor.Web + PostProcessor do.
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.
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.
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
Media in a blob storage
JSON sample
Minor questions:
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.Drawingand 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.
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.
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.
That's precisely what the Image Cropper + ImageProcessor.Web + PostProcessor do.
BTW. The PostProcessor uses multiple best-in-class tools to do the optimization.
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.
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.
Cropping to a ratio is exactly what the ImageProcessor.Web.API + ImageCropper do. Why reinvent the wheel?
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.Savingevent.Someone has already written a package for this though.
https://our.umbraco.org/projects/website-utilities/smallerimages/
is working on a reply...