Show HN: Using SVG to Shrink Your PNGs (opens in new tab)

I think I have an idea on how to support IE8 and do this without SVG.

1. Create a JPG of the can and trim the edges off completely

2. Create a PNG of the can and remove the insides completely, leaving only the edges

3. Overlay the JPG on top of the PNG using CSS absolute positioning or background+foreground image or similar

Since the JPEG comprises only the inner part of the image, it doesn't affect anything. The PNG comprises the outer edges of the image and you get the desired transparency on the edges.

There is a tool for that:

https://github.com/mahonnaise/svgjng/

    java -jar svgjng.jar <rgba image> <svgz file name> [color quality] [alpha quality]

It tries PNG and JPEG for RGB and alpha and then uses whichever ended up smaller.

Gallery: http://kaioa.com/b/1102/svgjng/index.html

"SVGZ (auto)" means default parameters. I.e. just:

    java -jar svgjng.jar foo.png foo.svgz

About 3 or so years ago, the senior designer at my previous job submitted a hard design to a client containing a banner with not-quite-rounded-but-almost corners that had to have transparency and would have to change color over time. As senior dev then, I never got to approve the design before it got out and I can still remember the horror when I witnessed what he had done.

I ended up trying a whole bunch of different ways to solve the problem, one of which was very similar to this method. As the author points out however, this does not work in IE8 among other things, and at the time this was a requirement... I ended up using different combinations with different levels of quality depending on the browser, a true nightmare which ended up eating a third of the budget for no justifiable reason.

In any case, the fact that we have to go through tricks like this to achieve both transparency and decent compression is pretty disappointing. But what I find maybe even sadder is the amount of resources we sometimes spend on things which seem incredibly frivolous, to me anyway. I'm sure Sapporo have pretty deep pockets, which the author rightly took advantage of, but that doesn't make it any less superficial.

Misleading title, but this is a really clever hack. I'm surprised I haven't heard of it before, since JPEG's lack of an alpha channel is a common complaint.

Our team used pngquant (http://pngquant.org/) recently to reduce complex, high-res PNGs to about 33% of their original size. It gave us the size benefits of lossy compression while retaining the PNG alpha channel. It seems to be good enough to tide us over until WebP gains traction (not holding my breath).

Nice hack, doesn't work in IE8 but presumably IE8 users get the full-size PNG with transparency.

You aren't really shrinking a PNG though - you're making a JPEG partially transparent.

used to do this all the time back in 30kb banners and flash days. highly compressed jpeg's with vector masks. sure beat transparent png file sizes

Since transparency seems to be off/on, could you use a 1 bit GIF for the mask instead?

I've done this for years in the Mystery Studio game framework. Transparent PNGs were always split into a RGB and an Alpha mask. Most of the time it was fine to save the RGB as a relatively good JPEG (say 90%) but you could go crazy with the alpha mask - maybe JPEG 30% even.

The exceptions were the assets where the alpha channel was used for picking (e.g. to detect drag and drop on a puzzle piece). In that case the settings were overriden for that particular asset to something like PNG8 (which also compresses fine since most alpha masks are mostly black and white with only some grey pixels at the edges due to antialiasing).

That and auto-cropping the assets - the engine has the concept of a "virtual canvas" so we could have full-screen transparent PNGs with only a small button in it, which the pipeline would reduce to the area that had the contents; but on the engine side you just treated it as a full-screen image, so you could place it at (0, 0) and the button would still appear wherever the artist had put it.

We got crazy reductions in file size using this one weird trick! Good times.

This is a clever alternative to PNG8. Even using some trick programs (ImageAlpha and ImageOptim) I could only get the PNG acceptably down to 457KB. Well done!

This is very useful in combination with CSS, http://sarasoueidan.com/blog/css-svg-clipping/

Ah, I figured they were gonna vectorize the PNG ;)

Cool trick, but PNGs can be lossified using a simple lossy averaging filter, using reduced and optimized color palettes etc.

https://tinypng.com/ https://github.com/foobaz/lossypng

A technique I've used in Android apps, is splitting PNG image into two JPGs: one with RGB data, and the other is greyscale with just the alpha channel. Store/transfer them like this, and combine them back into RGBA at runtime.

I wonder how far they'd get by first reducing the image to 8bit with palettes (for example using image magic), and then using pngcrush etc.

This is great!

I though this was going to be about Singular Value Decomposition, a sort of compression technique.