image compression in umbraco 7

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

Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 05, 2016 @ 08:59

0

Image compression in Umbraco 7

Using Umbraco And Getting Started

Umbraco 7

Hi,

in previous projects I have used ImageGen to compress my images on the fly.

But if I remender, in Umbraco 7 there is a built-in processor for images.

Where can I find docs about this? Or can someone show me how to use this?

/Michaël

Copy Link
Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Oct 05, 2016 @ 09:14

1

Starting point is here: http://imageprocessor.org/

Copy Link
taimoor 3 posts 72 karma points

Apr 21, 2017 @ 12:11

0

Need plugin in Umbraco for image compression

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Oct 05, 2016 @ 11:22

0

Hi Michaël,

Do you want to resize images or compress?

For compression we need some tool like - https://tinypng.com/

Package for compression - https://our.umbraco.org/projects/backoffice-extensions/official-kraken-image-optimizer-plugin-for-umbraco/

Thanks,

Alex

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 05, 2016 @ 11:43

0

Hi Alex,

is for compression and resizing on the fly, so for images comming from the media section and static images located in the directory images.

/Michaël

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Oct 05, 2016 @ 12:13

0

Than as mentioned Dirk - http://imageprocessor.org/ for you

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 05, 2016 @ 12:34

0

Are there examples by using it in Umbraco?

/Michaël

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Oct 05, 2016 @ 21:46
0
Hi Michaël

Just add params to GET Url of your image :
```
/images/arrow-right.png?width=600&height=250
```
Read more imageProcessor functions - http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/

Thanks,

Alex
Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 08, 2016 @ 12:36
0
Hi Alex,

If I use the following I don't see any difference:
```
<img width="200" src="@_photo.GetPropertyValue("umbracoFile")?quality=90" alt="@_photo.Name" />
```
So I take an image from the media section and set the quality to 90%.

Where is this new image located? Does it get stored in a cache folder?

/Michaël
Copy Link
Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Oct 08, 2016 @ 13:05

1

Michaël,

new image should be in cache folder yes, but will be hard to guess what folder it is, due to how the folder structure gets designed (main reason is to not have to many subfolders as it might crash windows explorer on that)

?quality=X param is fine, but don't see a diff between the original and new one? And what if you lower the quality significantly (ex 25%)?

Any difference then?

--Dirk

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 08, 2016 @ 13:24

0

Hi Dirk,

If I change it to 25% then I see a difference, so its working correctly!

/Michaël

Copy Link
Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Oct 08, 2016 @ 13:31

1

yup, although i'm sure 90% will also make a diff, also in file size on disk

--Dirk

Copy Link
taimoor 3 posts 72 karma points

Apr 21, 2017 @ 12:09

0

I want to implement the image compression. Which plugin is best for umbraco CMS

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Apr 21, 2017 @ 13:11

0

Hi taimoor

I think there no new plugins and you can use only "Kraken Image Optimizer plugin for Umbraco" - https://our.umbraco.org/projects/backoffice-extensions/official-kraken-image-optimizer-plugin-for-umbraco/

Thanks,

Alex

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

Mar 02, 2018 @ 13:34

1

Install the ImageProcessor.Web.PostProcessor plugin from Nuget. It will compress any cropped images.

Copy Link
taimoor 3 posts 72 karma points

Apr 22, 2017 @ 14:35

0

Thanks your comment. Is it free or paid ?

Copy Link
SSA Backend 108 posts 640 karma points

Jul 17, 2017 @ 15:14

1

Hello guys,

We have released a free alternative for Kraken. Tinifier is based on TinyPNG service which was mentioned by Alex.

You can get more and download it from the link https://our.umbraco.org/projects/backoffice-extensions/tinifier/

Thanks, Dmytro

Copy Link
David Armitage 505 posts 2073 karma points

Jul 31, 2018 @ 04:58

0

Hi Guys,

I tested the tinifier @Dmytro suggested and its a pretty good package. It seems to do the trick and has a nice user interface.

It connects on the back of tinypng.com API. I've used this website in the past for compression too and it works good.

I think the tinifier package is a viable option and worth a look. https://our.umbraco.com/projects/backoffice-extensions/tinifier/

Kind Regards

David

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

Jul 31, 2018 @ 08:03

0

How do you then ensure images are compressed when serving them with the cropper?

As soon as you use it the image will be re-encoded, losing any optimization.

Copy Link
David Armitage 505 posts 2073 karma points

Jul 31, 2018 @ 08:27

0

Oh ok. I understand what you mean.

I was just assuming that since the image cropper creates a new file for each crop size these two packages would takes these into consideration and loop through the media folders and compress whatever they find in here.

I'm hoping I'm not wrong or these two packages will be useless.

Kind Regards

David

Copy Link
SSA Backend 108 posts 640 karma points

Jul 31, 2018 @ 08:40

1

Hi all,

We are planning to add image cropper support in the 1.6.0 version.

It's not a one hour task (just make a loop through folders) because we support different media storage providers (e.g. Microsoft Azure Storage) and each new feature shouldn't break it.

Regards, Dmytro

Copy Link
David Armitage 505 posts 2073 karma points

Jul 31, 2018 @ 08:56

0

Ok got ya.

Thanks for the support!

Really looking forward to that feature. I've seen a lot of Umbraco websites and most are making use of the image cropper. This is going to be a much welcomed feature I'm sure.

Kind Regards

David

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

Jul 31, 2018 @ 13:51

0

@Backend Devs

There is no point wasting developer time to do that. The bandwidth overhead will make it unwieldy and you are operating too late in the pipeline process. An image has to be optimized before it is served or else the first request will always receive the unoptimized image. That's why the ImageProcessor.Web.PostProcessor plugin exists. I wish you were more honest with users about the functionality of your package because serving an image without using the cropper is reckless.

@David

Cached files are stored wherever the current ImageProcessor.Web IImageCache implementation chooses to store them. For the disk cache alone this could be either internal or external to the website location with differing folder depths. There are unlimited caching configurations due to the pluggable nature of the ilbrary so supporting all would be impossible.

I'm the author of ImageProcessor.Web, the underlying library the Umbraco Image Cropper uses and I will not provide any technical support requests from developers who doctor a cached/processed image. Manipulating a cached image could potentially violate that cache causing unnecessary overhead.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?