TinyPNG: Lossy compression for PNG that preserves full transparency.

by felipellrocha • 14 years ago

184 83 14 years ago

bentruyman• 14 years ago

I'd be curious to know if they have plans to release the source for this. It'd be much more useful to use this in a build step, rather than drag-and-drop into a browser window.

trebor2• 14 years ago

Ditto. I'd like to see some side-by-side comparisons with PNGOUT, PNGCrush, OptiPNG, and AdvPNG. I use ImageOptim on my Mac to automate my PNG optimization—and it can get some impressive gains.

eli• 14 years ago

I think ImageOptim uses the pngcrush library.

This website looks neat, but it seems like a CLI that can become part of my automated workflow would generally be more useful.

molf4• 14 years ago

The tools you mention use lossless compression. For 24-bit PNG files that means they probably won't come close the kind of lossy compression used by TinyPNG.

kizza• 14 years ago

On the Mac I use ImageAlpha to reduce the colours to 256 (it has a preview window so you can see if it's OK), then when saving the file I choose the option to send it to ImageOptim.

On Linux you can get the same by using pngquant, then using trimage. AFAIK there's no GUI frontend for pngquant so I guess how many colours would be ok and check before running trimage.

The reason why I use 2 tools is that ImageAlpha/pngquant is lossy and ImageOptim/trimage is lossless.

bingbing• 14 years ago

I think that http://pngquant.org/ does the same technique.

Also see http://pngnq.sourceforge.net/index.html

There are several other image optimization tools incorporated into a OS X tool http://imageoptim.com/

huhtenberg2• 14 years ago

You don't understand.

It must be a start-up with a freemium model. Soon they will reveal a monthly subscription option with a professional bulk uploader in Flash or even a desktop client. Just wait and see.

simonbrown• 14 years ago

What would be wrong with that?

eridius• 14 years ago

The shadow on that compressed panda has visible artifacts.

berkut• 14 years ago

Yeah, it almost looks like a premultiply issue, but PNG should be non-premultiplied, so...

http://imgur.com/6ovIu

Also, the original has values in the RGB channels for pixels with no alpha that aren't visible (due to the alpha) but need to be compressed, so it's not a fair test (although both do to some degree - turquoise area around the bear), so the new one could be compressed even more.

pornel4• 14 years ago

pngquant backing this service works in premultiplied RGBA colorspace (but with 32-bit floating point per gun).

However the distortion is merely a side-effect of reducing image to 256-colors (from 15k colors).

raquo• 14 years ago

> Internet Explorer 6 normally ignores PNG transparency and displays a solid background colour.

> With TinyPNG the background becomes transparent again. No workarounds!

Um, does anyone know how that works? Does IE6 natively support some kind of png transparency?

EDIT: ah, like that: http://calendar.perfplanet.com/2010/png-that-works/#8bit+alp...

zinssmeister2• 14 years ago

who the heck still cares about what IE6 does?!

grecy2• 14 years ago

Anyone developing for health-care, government, etc.

Heck, I'm sitting here on XP, developing specifically for IE6 and nothing else.

mixmastamyk2• 14 years ago

I think he's just curious about how IE6 was tricked into supporting it.

crazygringo3• 14 years ago

Woah! How is it 2012, and only now I discover that there exist PNG files where transparency works in IE6 ???

What the hell?

I mean, this would have actually been really useful for me... like, five years ago.

amishforkfight• 14 years ago

PNG8 (which IE6 supports) has had support for alpha transparency for a long time, but only Fireworks was able to create those files. I'm guessing that these guys are making PNG8s? I haven't tested the site myself.

simonsarris• 14 years ago

Wow it took my png from 659 bytes to 681 and lets me download the 681 byte one. :(

So I took a PNG from wikipedia:

221.0kb (its actually 215 KB or a little more than 220,000 bytes) to a claimed 47.8 KB (really 46.7 KB). Nice!

Running PNGGauntlet, a lossless compression app, with the same file compressed nothing. Wise wikipedians must have already done that.

But the results from tinypng look awful. Here you can flip between the original and the compressed:

http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_trans...

http://i.imgur.com/QOLo3.png

bosch• 14 years ago

I wouldn't say they look awful, there's a difference in the background part of the image but the main focus has little change.

It's a trade-off, but I would imagine that if there's thousands of files it could be a significant savings on bandwidth, and you could always keep the original for download but not display puroses.

mceachen• 14 years ago

There's very clear posterization in the yellow die and in the green die's highlights.

That shouldn't be surprising -- high color depth images need more than 256 colors to represent their image with fidelity.

See more: http://en.wikipedia.org/wiki/Posterization

fluxon2• 14 years ago

There are _slight_ artifacts on the defocused green die. At typical Wikipedia in-article display sizes (400x300, in this case), this is acceptable. Viewing in Win Firefox 13.01, Windows gamma. I'd use tinypng on large files before downscaling for web use.

ars5• 14 years ago

Use it after downscaling not before.

If you have a good downscaling tool it will create a larger number of intermediate colors when you downscale and you'll actually end up with a larger image!

projct• 14 years ago

Riot[1] (windows) does as good or better than pnggauntlet and lets you preview things. supports the same backends I think (pngout, optipng, advpng, etc) and some extra dithering options... perhaps worth a look, I switched from pnggauntlet. :)

[1] http://luci.criosweb.ro/riot/

ars5• 14 years ago

Here are the results of pngnq which does exactly the same thing as this tool. It created a file size of 46K, (which I was then able to reduce to 41K with pngout followed by advpng).

http://i.imgur.com/VPc2k.png

http://pngnq.sourceforge.net/

256 colors may simply not be enough for this image.

(Incidentally I was able to slightly reduce your image to 46K with pngout.)

rorrr• 14 years ago

It actually increases the size of some files.

http://i.imgur.com/E1mL2.png

10,842 bytes -> 15,863 bytes (a 46% increase).

Which is dumb, in cases like this it's better to return the original file.

netshade• 14 years ago

They're using a quantizer. Likely http://pngnq.sourceforge.net/ .

To compare yourself:

  wget http://tinypng.org/images/example-orig-c549c73a.png
  wget http://tinypng.org/images/example-shrunk-ec364794.png
  pngnq example-orig-c549c73a.png 
  cmp -b example-orig-c549c73a-nq8.png example-shrunk-ec364794.png

I get one byte of difference between what pngnq produces and their example shrunk version.

BTW, I use pngnq all the time in instances where losing some information is okay. It's a great tool.

antimora• 14 years ago

Why is it a service vs. being as software library?

xutopia• 14 years ago

Designers.

georgemcbay2• 14 years ago

I don't mean this as a dig at the developers of this particular site because my annoyance is more of a cumulative thing as opposed to being about this website in general, but IMO this is yet another website that does one simple thing that should be a library (or at the very least a documented web api) and not a website.

Websites of 2012, I am disappoint.

crazygringo3• 14 years ago

What? The designers who will be using this to convert PNG's won't have the slightest idea how to access an API. I, as a programmer, don't want to write code to do this either. I think creating a site for this is awesome.

It would be cool if they created an API as well, and a library (but for what language? so many compatibility issues...), but to say this should "not be a website" is entirely backwards. A website is the most user-friendly and accessible platform possible, and makes perfect sense to be the first step.

georgemcbay2• 14 years ago

"What? The designers who will be using this to convert PNG's won't have the slightest idea how to access an API."

For designers it should be a Photoshop plugin (built on the theoretical library) or just a desktop app that can bulk convert entire directories.

While dealing with 20 images at a time is certainly nicer than one at a time, a drag & drop website UI like this one is an absolute workflow killer on the design side.

jlarocco• 14 years ago

I have to agree with the OP here. Making this a webpage is silly.

If it were a library the program that created the PNG could have saved it in this compressed form in the first place.

Choosing the language isn't an issue, either. The obvious choice is C because that's what regular libpng is written in. And every language in existence provides a way to interface with C.

njharman• 14 years ago

> A website is the most user-friendly and accessible platform possible

A website requires a browser, a human, and bunch of clicking around. Every single time you want to do this.

API / library requires script to be written and added to production pipeline. Once. Then runs without human intervention.

The most human friendly interface is the one that saves humans from doing boring, tedious, automatable tasks.

pornel4• 14 years ago

I believe this website uses pngquant to perform the optimization. You can get the tool from http://pngquant.org (it's open-source and pretty easy to use as a library too).

mrjd• 14 years ago

You're right, it's listed on pngquant's site too as one of the GUI's.

nostromo• 14 years ago

"Write programs that do one thing and do it well."

also: http://en.wikipedia.org/wiki/Worse_is_better

kamakazizuru• 14 years ago

I guess they'll take a freemium approach with time - offer the API and so on as paid models that people can pay for.

prote• 14 years ago

Worked really well for me, took a 238k png down to 106k. I'm not seeing any artifacts.

molf4• 14 years ago

Thanks for all the feedback, everyone! We're still working on making TinyPNG easier to use and removing some of the kinks. Keep the comments coming!

We created this service because we (our web agency) were building a couple of sites that used very large transparent images. Unfortunately the file sizes were also massive, so we went looking for compression mechanisms beyond traditional lossless optimisation tools, which simply did not reduce our files enough. We built TinyPNG around a couple of existing open source quantising and compression tools.

Initially it was an internal tool, but we were extremely surprised by the consistent good quality of the results. So we decided to share it as an online service so that it is as easy as possible for everyone to reduce file sizes. An API will be coming soon!

Is it always a good idea to use lossy compression? No, certainly not. There are some edge cases that perform poorly. But we think the results are impressive. Use your own judgment! :-)

We actually went looking for PNG files on very popular sites (Facebook, Google, Github, Duckduckgo, many others) and almost all of them could benefit from TinyPNG's file size reduction without noticeable quality loss.

willvarfar• 14 years ago

which existing open-source tools?

molf4• 14 years ago

Mostly pngquant (the new version), optipng and advpng. We are still tuning parameters and swapping in and out tools based on our benchmarks and testing suite.

ushi• 14 years ago

It would be great to have this in the rails asset pipeline. Do you plan to open source your compression code?

molf4• 14 years ago

We plan to release an API. The compression code is a combination of a couple of open source tools with some careful tuning and heuristics for optimal result.

jdub• 14 years ago

It's built on existing Open Source tools. Look for OptiPNG, PNGcrush, etc. There are plenty, this is just a pretty web front end.

shocks• 14 years ago

I feel like the supported browser icons should be in colour. To me, back and white represents 'not supported'.

TazeTSchnitzel• 14 years ago

Me too, it's very confusing. It doesn't even saturate-on-hover.

cs7023• 14 years ago

Can't you achieve the same results with ImageMagick? For example, `mogrify -format png8 *.png` converts all png images in the current directory to indexed versions.

Moreover, ImageMagick itself recommends a variety of more advanced lossless and lossy png compression utilites: http://www.imagemagick.org/Usage/formats/#png_non-im

Then I opened the original panda PNG with GIMP, clicked on Image -> Mode -> Indexed -> Optimized palete -> 255 colors, and obtained an even smaller file size.

What's so special about this?

pornel4• 14 years ago

You can generate the same image format with ImageMagick, Fireworks, pngnq and pngquant (the last one seems to be powering the site).

The difference is in quality of quantization. The poorer the algorithm, the more banding artifacts or dithering noise you'll get.

Usually less optimal quantization also gives worse quality/filesize ratio (since palette entries are "spent" on less noticeable areas of the image).

cs7023• 14 years ago

You can generate the same image format with ImageMagick, Fireworks, pngnq and pngquant (the last one seems to be powering the site)

Exactly: I don't see what's special about tinyPNG.

j_s• 14 years ago

nQuant is a similar (C#, Apache 2.0 licensed) re-compressor; it was created by Matt Wrock as an adjustment of Xiaolin Wu’s algorithm to work with the alpha channel.

http://nquant.codeplex.com/

Matt gets into the guts of how this process works here: http://www.mattwrock.com/post/2011/09/05/Convert-32-bit-PNGs...

toblender• 14 years ago

You know you have been working with IE too long when this product brings a smile to your face.

NO MORE GIF's for me!

pygorex• 14 years ago

Wait! I know I've seen this before:

http://www.8bitalpha.com/

pornel4• 14 years ago

Unfortunately 8bitalpha.com uses GD library which has very outdated, crappy quantizer:

http://i.imgur.com/7bq7X.png

nathos• 14 years ago

For those looking for a desktop application with more options (for Mac at least), check out Image Alpha: http://pngmini.com/

(from the creator of the equally awesome ImageOptim: http://imageoptim.com/)

james33• 14 years ago

I've only tried one image so far, but the one I tried showed impressive results. I've always used http://punypng.com, which has always done a great job, but I just ran a file compressed down to 131kb in PunyPNG and TinyPNG took it down to 42kb!

redemade• 14 years ago

$ pngquant -iebug image.png

hamey• 14 years ago

There is no single ultimate solution for image optimisation. This looks like it'll work great for some images.

AshleysBrain• 14 years ago

How does it compare to PNGNQ? http://pngnq.sourceforge.net http://pngnq.sourceforge.net/pngnqsamples.html

hyung• 14 years ago

If you're on a Mac, ImageAlpha provides a good GUI that lets you preview different quality settings:

http://pngmini.com/

Also, ImageOptim provides a GUI that does lossless PNG compression:

http://imageoptim.com/

gcr• 14 years ago

PNG compresses "exact" gradients pretty well. I'd be interested in a tool that not only reduces colors (what this one is doing), but also smooths gradient-like segments of the image to comrpess better.

dunham• 14 years ago

Yeah, I am curious how much you can improve compression by keeping everything 24 bit, but slightly tweaking the color values to make the result more compressible. (PNG applies one of five predictors to each line, takes the difference from the prediction, and deflates the result.)

For example, as a greedy algorithm: find the best predictor for a line, then tweak the line to reduce the alphabet (round off the difference from predicted values) or to get longer deflate matches (substitute values if they're close and match a previous run).

jscheel• 14 years ago

I typically just apply a posterize adjustment layer in photoshop and still save out to 24-bit. More often than not I can get pretty good compression, and I have the ability to mask out different areas of the posterization to achieve varying levels of compression interactively. Kudos for making this website though, seems like a great way to quickly compress images without having to think about it too much.

jewel• 14 years ago

PNG is no longer the only widely supported format with alpha channels. You can use WebP (which has javascript or flash polyfill.) You can fall back to a plain PNG for those with javascript disabled.

Brajeshwar• 14 years ago

Good Application Website. And for those asking for a Desktop Version - AlphaImage - http://pngmini.com/.

AlphaImage will even give you the 'optional' Transparent PNG compatible with IE6.

doomlaser• 14 years ago

8 bit pngs... Can't you just do this in Photoshop? What's the point of this site?

melvinmt• 14 years ago

Uhm, not charging hundreds of dollars for 8bit pngs?

salmanapk• 14 years ago

No, Photoshop doesn't support 8-bit pngs.

rplnt• 14 years ago

What is that logo from (or parody of)? ESET has very similar logo, but I think there was one with these colors.

TinyPNG: Lossy compression for PNG that preserves full transparency.

Related Stories