
TinyPNG: Lossy compression for PNG that preserves full transparency. - felipellrocha
http://tinypng.org/
======
netshade
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.

------
georgemcbay
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.

~~~
crazygringo
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.

~~~
georgemcbay
"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.

~~~
crazygringo
Sure, a Photoshop plugin would be great. And a desktop app. And a GIMP plugin.
And a Finder extension. And lots of other things too.

My point is, a website interface the single most accessible way so that 100%
of people can use it, regardless of platform or programming expertise.

It is the obvious first choice. That said, of course I hope all the other
options come along soon...

~~~
ars
GIMP already has an interface to reduce color depth, but it doesn't support
transparency. (Maybe 2.8 does, haven't tried it yet.)

So this should not be a plugin for gimp, but rather a bug fix.

It would also be nice if gimp could open images with indexed transparency.

~~~
shawnz
You're right, proper transparency support is step 1 -- but that isn't to say
that GIMP couldn't have some sort of automatic lossy compression tool (akin to
this) on _top_ of that tech.

EDIT: I suppose this software is equivalent to gimp's "Automatically select
palette" option when converting images to indexed. Perhaps that option could
be replaced with a list of algorithms to choose from, like how the Size dialog
lets you choose your own scaling algorithms.

~~~
ars
Yes, exactly. This tool is simply because "Automatically select palette"
doesn't support transparency. If it did there would be no need for this.

I'm not sure you really need multiple algorithms, the algorithm itself isn't
anything special as far as I know - it just supports transparency that's all.

You can get somewhat similar results by selecting all the transparent and
partially transparent parts and saving the selection. Then flatten the image
(i.e. mix the transparency into the background color), reduce the color depth,
then use the color to alpha option only on the selection (not the whole image)
to subtract the color and bring back the transparency.

Then count how many colors you have, if you have too many, undo everything,
and choose a lower number for color depth and try again. It helps to choose a
color that does not otherwise exist in the image for the background mixing
color.

------
molf
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
_which_ existing open-source tools?

~~~
molf
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.

------
simonsarris
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://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png)

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

~~~
bosch
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
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>

------
raquo
> 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...](http://calendar.perfplanet.com/2010/png-that-
works/#8bit+alpha)

~~~
zinssmeister
who the heck still cares about what IE6 does?!

~~~
grecy
Anyone developing for health-care, government, etc.

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

~~~
noinput
And I hope your rate is doubled, at least.

~~~
grecy
Although IE6 has it's share of problems, it's actually kind of simple
developing for _one single_ version of one browser. Once you get used to the
quirks, they are constants.

(Note: I'm not saying I like it, just that it's become "normal")

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

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

------
bentruyman
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.

~~~
trebor
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.

~~~
molf
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.

~~~
trebor
The comparison will be subjective. One will retain full detail (24-bit color)
and the other will not. The "better" will be subjective, as I said.

I wish Photoshop gave the option to save an 8-bit PNG with a FULL alpha
channel—that's what this seems to do.

------
cs702
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?

~~~
pornel
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).

~~~
cs702
_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.

~~~
mixmastamyk
Looks like it just makes the process accessible to the layman.

~~~
cs702
Most laypeople don't even know what a PNG is...

------
j_s
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...](http://www.mattwrock.com/post/2011/09/05/Convert-32-bit-PNGs-to-high-
quality-8-bit-PNGs-with-C.aspx)

------
jscheel
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.

------
pygorex
Wait! I know I've seen this before:

<http://www.8bitalpha.com/>

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

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

------
hyung
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/>

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

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

------
eridius
The shadow on that compressed panda has visible artifacts.

~~~
berkut
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.

~~~
pornel
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).

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

~~~
xutopia
Designers.

------
james33
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!

------
nathos
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/>)

------
Brajeshwar
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.

------
gcr
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
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).

------
jewel
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.

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

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

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

~~~
molf
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.

------
toblender
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!

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

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

------
redemade
$ pngquant -iebug image.png

------
rorrr
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.

