Reduce PNG Files Size & Preserve Full Alpha Transparency: TinyPNG

Posted on October 21, 2012, under General, Web Tools 

Website speed is important nowadays, for both the visitor and in the eyes of search engines. Reducing the size of the images is one of the first steps a webmaster should take when he starts making his websites load faster.

I usually use Yahoo! Smush.it to reduce the size of the images without changing their look or visual quality. However, for compressing PNG image files I’ve found a better tool called TinyPNG.

This online tool uses smart lossy compression methods to decrease the file size of your PNG files. By precisely decreasing the number of colors from the image, less bytes are necessary to store the data. The result is virtually invisible but it makes a substantial difference in file size!


The resulted images are displayed perfectly on all major browsers including mobile devices. Internet Explorer 6 normally disregards PNG transparency and shows a solid background color. With TinyPNG the background results in being transparent again. Binary transparency with no workarounds!

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantisation”. Because the number of colors is reduced, 24-bit PNG files can be converted to much smaller 8-bit indexed colour images. All unnecessary metadata is stripped too. The result: tiny 8-bit PNG files with 100% support for transparency. Have your cake and eat it too!

Comment via Facebook

comments

3 Replies to "Reduce PNG Files Size & Preserve Full Alpha Transparency: TinyPNG"

    1. Just tried it and it’s awesome!

      1. If you shink that first picture (57KB) from tinypgn’s example the result is much better in quality. Especially that gray gradient, it’s softer. And the file itself is smaller, 15KB vs tinypng’s 16KB.

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.