Is there PNG compression in ImageResizer like tinypng.org?

Question

I have this project that displays a big list of transparent pngs. I use Cloudfront and ImageResizer to serve up my images:

media.mysite.com/Images/imageA.png;w=170

Now here is my pickle.

imageA.png is ~220kb --> After tinypng.org --> ~87kb / ~62% reduction

I have access to png "compression" libraries like that, but the problem is that the ImageResizer bumps the size back up to full (without compression)

imageA.png;w=170 is ~90kb --> After tinypng.org --> ~20kb / ~62% reduction

So even if I run my imageA.png through tinypng.org, then apply the ImageResizer resizing, I loose the png compression. And in the end this makes my page heavy.

(I do think about a workaround to load my images asynchrounously.)

So I'm wondering is ImageResizer can do this png compression "on the fly"?

I'm reading about http://imageresizing.net/plugins/prettygifs but I'm not sure I understand how it works.

Thanks!

Answer 1

This appears to be a duplicate of PNG Compression and ImageResizer.

To sum up - PNG encoding is absolutely nothing like Jpeg encoding.

Fully optimizing the encoding of a PNG file takes lots of time and memory. You can't resize an image without decoding and re-encoding it. ImageResizer prefers to get the image back to you fast (~100-250ms) with a larger file size, instead of taking 5-15 seconds and using all of your server's RAM to generate a smaller PNG. Consider how long tinypng.org takes to optimize your image. Would you be OK with that kind of delay, in real time, on your website?

ImageResizer offers WebP, which can give you a better speed/size balance than PNG.

Basically, you won't get much file size benefit out of using ImageResizer on pre-optimized PNG sprites.

Answer 2

This plugin works great for me

https://github.com/svenrog/ImageResizer.Plugins.PngOptimizer

Just build it (I couldn't find it on nuget) and add the following to your <plugins> section of web.config

    <add name="PngOptimizer" />

Then add &optimized=1 to your URL parameters.

Make sure you are using some kind of cache - Amazon cloudfront works the best because you can point it at your website and serve any file cached.

Important: There's a typo in the example and it should be optimized=1 and not optimize=1