9 ms·
TinyPNG: Lossy compression for PNG that preserves full transparency.
- bentruyman 14y agoI'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 14y agoDitto. 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 14y agoI 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.
- molf 14y agoThe 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 14y agoThe 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.
- kizza 14y agoOn 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 14y agoI think that http://pngquant.org/ http://pngquant.org/ does the same technique. Also see http://pngnq.sourceforge.net/index.html http://pngnq.sourceforge.net/index.html There are several other image optimization tools incorporated into a OS X tool http://imageoptim.com/ http://imageoptim.com/
- huhtenberg 14y agoYou 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 14y agoWhat would be wrong with that?
- huhtenberg 14y agoIt's a pipe dream, but otherwise it's fine.
- eridius 14y agoThe shadow on that compressed panda has visible artifacts.
- berkut 14y agoYeah, it almost looks like a premultiply issue, but PNG should be non-premultiplied, so... http://imgur.com/6ovIu 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 14y agopngquant 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 14y 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+alpha http://calendar.perfplanet.com/2010/png-that-works/#8bit+alp...
- zinssmeister 14y agowho the heck still cares about what IE6 does?!
- grecy 14y agoAnyone developing for health-care, government, etc. Heck, I'm sitting here on XP, developing specifically for IE6 and nothing else.
- zinssmeister 14y agoI hope you hate your job a bit :)
- noinput 14y agoAnd I hope your rate is doubled, at least.
- grecy 14y agoAlthough 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")
- mixmastamyk 14y agoI think he's just curious about how IE6 was tricked into supporting it.
- 14y ago
- simonsarris 14y agoWow 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_transparency_demonstration_1.png http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_trans... http://i.imgur.com/QOLo3.png http://i.imgur.com/QOLo3.png
- bosch 14y agoI 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 14y agoThere'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 http://en.wikipedia.org/wiki/Posterization
- fluxon 14y agoThere 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.
- ars 14y agoUse 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!
- rorrr 14y agoIt actually increases the size of some files. http://i.imgur.com/E1mL2.png 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 14y agoThey're using a quantizer. Likely http://pngnq.sourceforge.net/ 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 14y agoWhy is it a service vs. being as software library?
- xutopia 14y agoDesigners.
- georgemcbay 14y agoI 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.
- deleted 14y ago[deleted]
- crazygringo 14y agoWhat? 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 14y 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.
- crazygringo 14y agoSure, 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...
- prote 14y agoWorked really well for me, took a 238k png down to 106k. I'm not seeing any artifacts.
- molf 14y agoThanks 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 14y agowhich existing open-source tools?
- molf 14y agoMostly 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 14y agoIt would be great to have this in the rails asset pipeline. Do you plan to open source your compression code?
- molf 14y agoWe 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 14y agoIt's built on existing Open Source tools. Look for OptiPNG, PNGcrush, etc. There are plenty, this is just a pretty web front end.
- shocks 14y agoI feel like the supported browser icons should be in colour. To me, back and white represents 'not supported'.
- TazeTSchnitzel 14y agoMe too, it's very confusing. It doesn't even saturate-on-hover.
- cs702 14y agoCan'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 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 14y agoYou 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 14y agoYou 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 14y agoLooks like it just makes the process accessible to the layman.
- cs702 14y agoMost laypeople don't even know what a PNG is...
- j_s 14y agonQuant 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/ 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-to-high-quality-8-bit-PNGs-with-C.aspx http://www.mattwrock.com/post/2011/09/05/Convert-32-bit-PNGs...
- toblender 14y agoYou 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 14y agoWait! I know I've seen this before: http://www.8bitalpha.com/ http://www.8bitalpha.com/
- pornel 14y agoUnfortunately 8bitalpha.com uses GD library which has very outdated, crappy quantizer: http://i.imgur.com/7bq7X.png http://i.imgur.com/7bq7X.png
- nathos 14y agoFor those looking for a desktop application with more options (for Mac at least), check out Image Alpha: http://pngmini.com/ http://pngmini.com/ (from the creator of the equally awesome ImageOptim: http://imageoptim.com/ http://imageoptim.com/)
- james33 14y agoI've only tried one image so far, but the one I tried showed impressive results. I've always used http://punypng.com 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 14y ago$ pngquant -iebug image.png
- hamey 14y agoThere is no single ultimate solution for image optimisation. This looks like it'll work great for some images.
- AshleysBrain 14y agoHow does it compare to PNGNQ? http://pngnq.sourceforge.net http://pngnq.sourceforge.net http://pngnq.sourceforge.net/pngnqsamples.html http://pngnq.sourceforge.net/pngnqsamples.html
- hyung 14y agoIf you're on a Mac, ImageAlpha provides a good GUI that lets you preview different quality settings: http://pngmini.com/ http://pngmini.com/ Also, ImageOptim provides a GUI that does lossless PNG compression: http://imageoptim.com/ http://imageoptim.com/
- gcr 14y agoPNG 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 14y agoYeah, 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 14y agoI 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 14y agoPNG 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 14y agoGood Application Website. And for those asking for a Desktop Version - AlphaImage - http://pngmini.com/ http://pngmini.com/. AlphaImage will even give you the 'optional' Transparent PNG compatible with IE6.
- doomlaser 14y ago8 bit pngs... Can't you just do this in Photoshop? What's the point of this site?
- rplnt 14y agoWhat is that logo from (or parody of)? ESET has very similar logo, but I think there was one with these colors.