Image Cropper - how does it manage the cropped images?
Hi
I wonder if anyone can explain how the core image cropper stores the cropped images?
All our image types use Image cropper and in most cases several cropped images are created every time a new image is uploaded, brilliant, everything is working well and it is all nice and easy.
The problem arises because the images uploaded were not optimised in anyway, (yes I did tell them), which is adversely affecting page speeds. Obviously I am looking for an easy way out rather than get the users to optimise the images before re-adding them - if that is at all possible.
I have come across Kraken Image Optimizer which at first glance seemed to be the golden bullet. However there is a caveat in their installation documentation that says:
Crop images produced by the Image Cropper data type are not optimized.
Looking at the Media folder I can see just one image, so have assumed that this is the one that gets sent to the browser no matter what the image size is, the file size would remain the same. Is this assumption correct does anyone know, or do different file sizes get downloaded magically to the browser depending on the media query?
I am coming to the conclusion that the only option we have is that the users will have to re-add the images but optimise before they are uploaded to Umbraco, which is what I was rather hoping to avoid.
I guess if they have to add all the images again it will ensure they never add an un-optimised one again!!
Any helpful suggestions or recommendations would be gratefully recieved.
If you look in the browser's developer tools for your page you will see what is actually downloaded by your browser. I just checked one of my image files that is 4040x2694 and 4,915KB on disk and when loaded to the browser the image is 620x276 and 29.6KB. Yes, they are optimized. They are also cached, the system does it for you and the cached version can be tricky to find, but there is a cache folder in App_Data that stores the cropper images on your server. If there is a cached version of an image when it is requested, that is what is served, otherwise a new version will be generated from the original. All of your images go through the ImageProcessor.Web module and it manages all of this.
Now the cool part. All of the functionality that is available on ImageCropper images is actually available on any image in the system. For example, you can call any image in your media folder and append a few query string parameters and serve an optimized/resized/blurred/etc. version. What the image cropper data type really does is make the those calls easy to manage and reference via an alias.
Check out the link below if you want to learn more about the underlying utility and some of the other cool stuff you can do with it.
I could see that the file sizes were different, but Google's Pagespeed Insights was still saying the files sizes could be reduced further. I have just appended a quality attribute and that has done the trick.
Once I'd read your reply I did recall reading that the ImageProcessor.Web module was used, not sure where or when, but thanks for the link, very useful.
Thanks for taking the time to respond, much appreciated.
Image Cropper - how does it manage the cropped images?
Hi
I wonder if anyone can explain how the core image cropper stores the cropped images?
All our image types use Image cropper and in most cases several cropped images are created every time a new image is uploaded, brilliant, everything is working well and it is all nice and easy.
The problem arises because the images uploaded were not optimised in anyway, (yes I did tell them), which is adversely affecting page speeds. Obviously I am looking for an easy way out rather than get the users to optimise the images before re-adding them - if that is at all possible.
I have come across Kraken Image Optimizer which at first glance seemed to be the golden bullet. However there is a caveat in their installation documentation that says:
Looking at the Media folder I can see just one image, so have assumed that this is the one that gets sent to the browser no matter what the image size is, the file size would remain the same. Is this assumption correct does anyone know, or do different file sizes get downloaded magically to the browser depending on the media query?
I am coming to the conclusion that the only option we have is that the users will have to re-add the images but optimise before they are uploaded to Umbraco, which is what I was rather hoping to avoid.
I guess if they have to add all the images again it will ensure they never add an un-optimised one again!!
Any helpful suggestions or recommendations would be gratefully recieved.
Thanks
Anne
If you look in the browser's developer tools for your page you will see what is actually downloaded by your browser. I just checked one of my image files that is 4040x2694 and 4,915KB on disk and when loaded to the browser the image is 620x276 and 29.6KB. Yes, they are optimized. They are also cached, the system does it for you and the cached version can be tricky to find, but there is a cache folder in App_Data that stores the cropper images on your server. If there is a cached version of an image when it is requested, that is what is served, otherwise a new version will be generated from the original. All of your images go through the ImageProcessor.Web module and it manages all of this.
Now the cool part. All of the functionality that is available on ImageCropper images is actually available on any image in the system. For example, you can call any image in your media folder and append a few query string parameters and serve an optimized/resized/blurred/etc. version. What the image cropper data type really does is make the those calls easy to manage and reference via an alias.
Check out the link below if you want to learn more about the underlying utility and some of the other cool stuff you can do with it.
http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/#methods
Tim you are a star!
I could see that the file sizes were different, but Google's Pagespeed Insights was still saying the files sizes could be reduced further. I have just appended a quality attribute and that has done the trick.
Once I'd read your reply I did recall reading that the ImageProcessor.Web module was used, not sure where or when, but thanks for the link, very useful.
Thanks for taking the time to respond, much appreciated.
Anne
is working on a reply...