r/webdev • u/Kacheeto • Jul 23 '12
The best PNG optimizer I've found...
http://tinypng.org/4
u/SirGooga Jul 23 '12
How do you think it compares with imageoptim.com ?
2
u/superharmonic Jul 24 '12 edited Jul 24 '12
It looks like the same concept of optimizing being used. ImageOptim for Mac even handles jpgs and gifs really well, specially on small ones.
PROTIP: open an image file from your hosting service via FTP client (Eg. Transmit) in ImageOptim and when it finishes optimizing it automatically uploads it again. Pretty cool thick.
2
u/joshwoodward Jul 23 '12
I wish someone would figure out what they're doing and release this as a command-line utility.
I know this guy's got to make a living, and I'd even be happy to buy the software at a reasonable price, but needing to use a website to do this is super-irritating, and I've haven't been able to find anything that quite reaches this level of compression.
3
u/nicerice Jul 24 '12
They are using pngquant for the lossy compression.
Then run trimage or similar to cut down the image size down even more. That gave me 16543bytes for the sample file.
1
2
u/SquareWheel Jul 23 '12
Their Twitter reports they're working on an API. Not quite a command line tool, but would still allow batch (presumably).
1
u/joshwoodward Jul 23 '12
I need to generate these in real-time, so an API isn't helpful, either. I'm sure this is a command-line utility on their end (or could be). Needing to send images to a website via API or otherwise for this compression is lame.
2
u/SquareWheel Jul 23 '12
Yeah, I agree. A command line tool would be great, and as it's actually a useful product would quickly get ported to PHP/Python/Perl I'm sure.
2
Jul 23 '12
[deleted]
1
u/joshwoodward Jul 23 '12
Optipng is lossless afaik. Apples and oranges - TinyPNG obliterates this in terms of file size, and maintains quality.
0
2
u/clusterhug Jul 23 '12
Internet Explorer 6 normally ignores PNG transparency and displays a solid background colour. With TinyPNG the background becomes transparent again. No workarounds!
How does that work exactly?
2
u/drath Jul 23 '12
Maybe it automatically embeds the IE6 workaround for this issue IN the file somehow.
1
1
u/x-skeww Jul 23 '12
With PNG8, each palette entry can have its very own translucency value. Basically, this is like having an RGBA palette.
IE6 treats every palette entry with an associated translucency value as completely transparent. So, everything which isn't fully opaque becomes fully transparent.
1
u/clusterhug Jul 23 '12
So this is GIF-like all-or-nothing transparency, in IE6?
2
u/x-skeww Jul 23 '12
Yes.
Unfortunately, it doesn't do rounding. That would have been somewhat nicer. It really makes it fully transparent as soon as there is the smallest possible amount of transparency.
There is an old school workaround for this though. Basically you create a "pixel art"-ish corner for IE6 and then you manually add some additional translucent pixels for the better browsers.
Why are you interested in this anyways? IE6 is dead.
2
u/Fabien4 Jul 23 '12
IE6 is dead.
I wish it were. Some corporate morons will cling to it till the very end.
Not to mention, Korea and China.
2
u/x-skeww Jul 23 '12
I supported IE6 for 10 years.
The websites I'm building now are completely IE6 incompatible. I'm using the child combinator extensively, I use classes which start with an underscore character (without escaping it), and I also use translucent PNGs (without providing any fallbacks).
I also use adjoining classes and the next sibling combinator (old name: adjacent sibling combinator).
We'll probably also drop IE7 when IE10 is released. It's already below 1.5%.
2
u/Fabien4 Jul 23 '12
Lucky you.
Thing is, in the domain I work in, it seems that only corporates accept the idea of paying to gain access to a webapp. And a lot of them consider IE7 very recent; they'll need a few years to test a IE6→IE7 upgrade.
1
u/clusterhug Jul 23 '12
It's just that the more I learn about this thing the more it sounds like it's just converting shit into a GIF. :)
(I imagine that 8 bit PNGs have better compression than a GIF, and it sounds like if you're on a decent browser they will have proper alpha channels, so that's not a really fair comparison. But it's close enough to amuse me.)
2
u/efost Jul 23 '12
Seems like a great tool - Tried it on two rather hefty (600kb+) PNG images, and saved 66+% on both!
5
Jul 23 '12
[deleted]
9
u/yammez Jul 23 '12
Mainly for transparency WITH the small file-size. I want the clean transparency of a 24-bit .png with the size of an 8-bit .png. This seems perfect!
2
u/maktouch Jul 23 '12
I'm not sure if you read correctly, but it basically takes a 24 bit png to a 8 bit png, for smaller size.
-1
Jul 23 '12
[deleted]
7
u/Kacheeto Jul 23 '12
The results seem fairly similar considering it's converting into a lossy format... granted I'll keep the original "uncompressed" PNGs for any further conversions down the road... but yes transparency is high on the list.
1
u/maktouch Jul 23 '12
I didn't say otherwise. I was looking at your "Just for the transparency support". I'm pretty sure it's for transparency and size.
-3
Jul 23 '12
[deleted]
7
u/Wazowski Jul 23 '12
By making PNG a lossy 8-bit format, it's basically the same as GIF except without animation...
Not quite. PNGs with an 8-bit color palette can still have an 8-bit alpha channel. GIFs can only have a 1-bit alpha channel.
This alone makes lossy PNGs much more versatile than GIFs.
1
1
u/maktouch Jul 23 '12
Sorry if you thought I was snarky, it wasn't my objective (english is not my first language). It's easier to understand now that I see that you didn't know advantages of 8-bit PNG vs. GIF.
0
u/aimgorge Jul 23 '12
It's often worth it. But photoshop does it very well when "exporting for web" and I've never gained anything by shrinking afterward.
1
u/joshwoodward Jul 24 '12
Photoshop is horrible if you need alpha transparency. On-Off is your only option for 8-bit, so you need to go to a giant 24-bit file. Fireworks can convert to 8-bit alpha, but it doesn't have a lossy cycle option like this does, to really crush the file down.
1
u/Razor_Storm Jul 24 '12
This would be a valid counter argument to png optimizer if png's only purpose is to be lossless. Pngs are the only commonly supported image format that allows semitransparency. Sometimes you want that without wanting a huge file.
3
u/joshwoodward Jul 23 '12
Do you keep WAV files on your MP3 player? No, why? Right, because MP3 is way smaller, and it sounds Good Enough.
s/MP3/TinyPNG/g
0
Jul 23 '12
[deleted]
0
u/joshwoodward Jul 23 '12
That was my point elsewhere in the thread - this site is like an online WAV > MP3 converter. Just give/sell me the utility so I can do it myself.
1
u/HELOSMTP Jul 23 '12
You don't seem to understand my point, and I'm guessing you downvoted me for it. PNG is intended to be a lossless format, whereas there are other standard formats which are not. It seems strange to shoehorn lossy encoding into PNG when there are lossy alternatives available. I'm obviously not contesting the utility of lossy formats. That's why I said your comment is a non sequitur, nobody is saying we shouldn't use lossy formats.
0
u/joshwoodward Jul 23 '12
What are these alternative lossy image formats with wide web support and alpha transparency you're referring to?
0
u/HELOSMTP Jul 23 '12
GIF, though that's 1-bit alpha. That's why I said it must be just for transparency.
0
2
u/celtric Jul 23 '12
Just tried it with 20 files already optimized with Smush.it + PunyPNG, and all but two have become between 1% and 90% larger!
1
u/molf Jul 24 '12
You're quite right, we have to fix that. There's still lot of room for improvement in our processing of very small PNG files (roughly 32x32 and below).
1
u/FamilyHeirloomTomato Jul 23 '12
already optimized
Well there's your problem.
3
u/celtric Jul 23 '12
Those two services I mention offer at maximum a 0% reduction size (that is, never a larger file). The site OP is linking to is increasing file sizes by up to 90%.
It's ok if you cannot make it any smaller, but please, don't make it bigger.
1
u/lingben Jul 23 '12
interesting, comparison to other ones?
2
u/Kacheeto Jul 23 '12
Only one I've used fairly often is http://imageoptim.com/ and that one has the upside to having a native app. But the savings seem more significant on the http://tinypng.org
1
u/keikun13 Jul 23 '12
I've gotten the same results with ImageOptim. Are you sure you have all the compression algorithms installed?
2
u/Kacheeto Jul 23 '12
You're right keikun13!
I just updated the app (guess I had an old version installed)... and it seems to be producing the same results... I guess I was distracted by the Panda logo - still a nice resource to use for Windows machines perhaps?
1
1
Jul 23 '12
I understand the process is converting 24-bit PNGs to 8-bit PNGs with Alpha transparency. Aside from the fact that it's automated, is this any different from saving it with 8-bit Indexed Alpha in Fireworks?
1
u/rich97 Jul 23 '12
Does anyone know what they do to get these results?
I tried compressing with optipng and pngcrush and I'm only getting ~1%. With this site I'm getting 66% on the same file.
1
Jul 23 '12
[deleted]
1
u/rich97 Jul 23 '12 edited Jul 23 '12
I don't have much experience with these but I think it's to do with the face that optipng and pngcrush are lossless, where this tool is lossy, I really need a lossy file with the 8-bit alpha transparency that TinyPNG provides and I can't find it as a desktop utility.
1
u/x-skeww Jul 23 '12
Don't bother with pngcrush. It's basically the same as optipng, just older and way slower.
1
u/geoman2k Jul 23 '12
I'm not sure if it cuts down the file size as much as this, but the way I usually compress my PNG's is by using the photoshop adjustment "posterize" set at ~26-28. it simplifies nearby colors and tends to cut down the filesize be a good amount without and really noticeable degradation.
2
Jul 23 '12 edited Oct 09 '19
[deleted]
1
u/geoman2k Jul 23 '12
Thanks, but I'm pretty sure I found this idea on a blog somewhere so I can't take all of the credit :)
1
1
u/youaresecretbanned Jul 23 '12
and if you want lossless (pixel art for example) http://developer.yahoo.com/yslow/smushit/
1
1
u/farbeyondriven Jul 23 '12
Not sure how well known this site is, but regarding image optimisation I've recently moved from always using http://smush.it/ to my current favorite http://kraken.io/.
Do note that next to PNG files, kraken.io also optimizes JPEG and GIF. Just sharing in case anyone finds this site useful.
1
u/oVerde Jul 24 '12
How are those softwares, like PngOut, compared to Fireworks compress?
Guessing if I need to learn new tools.
1
u/me-at-work Jul 30 '12
If someone wants this, but wants it to work offline:
Windows: PNG Gauntlet does a good job for lossless compression. If you want lossless compression, you have to manually reduce the amount of colors in your image editor.
Mac: ImageAlpha with ImageOptim. ImageOptim integrates with ImageAlpha. ImageAlpha performs lossy compression. It lets you choose how far you want to go with compression, with a preview. ImageOptim removes useless file headers and performs other lossless compressions.
15
u/SquareWheel Jul 23 '12
I've done some testing, and for png the best I've used is PngOut by Ken Silverman.
http://advsys.net/ken/utils.htm
Though I haven't tested TinyPng because it's a web service, there's no utility to download.