Speeding Up Your Website: Optimizing PNGs images
February 11th, 2009
Hey guys! We continue the serie of Speeding Up Your Website with a new article focused on the optimization of PNGs images.
We are going to learn how to reduce the file size of our PNGs images without losing quality, removing these chunks of information that we won’t need to display the images.
We will use pngcrush for our purposes but we will share with you other alternatives.
Actually we have published these articles:
- Minimize HTTP Requests
- Selecting the Right Format for your Images
- Optimizing JPEG images
- Optimizing PNGs images
- Optimizing GIFs images
Let’s go guys!
Optimizing with pngcrush
As we said at the introduction, PNGs images store innecesary information that we will remove to reduce the file size without losing quality. There are many tools but we will use pngcrush to strip all these unneeded bytes.
We can use this command:
> pngcrush -rem alla -brute -reduce original_image.png final_image.png
Let’s analyze some of these options that we have used:
- -rem will remove all unnecesary bytes but keeps the one for transparency.
- -reduce will try to remove unused colors from the palette.
- -brute will try over a lot of methods for optimization. It’s slower and most of cases doesn’t improve much… but you know if you are using it in offline it will be good to try it. Remove this option in “online” and performance-sensitive scenarios.
Are we being paranoid with image optimization?
I think optimization must be another rule for web development but certainly sometimes we don’t have time enough to acomplish it. But reading some performance blogs like yui blog from Yahoo we can see that optimization matters:
Running this command -pngcrush- on the PNGs found on Alexa’s top 10 sites gives us an average file size reduction of 16.05%. This means you can easily strip weight off your PNG images, save bandwidth and disk space and improve load times, without sacrificing quality and without even touching a single line of application code.
Need more reasons? 
Alternatives to pngcrush
We have done an example with pngcrush but there are other great alternatives that you can try by yourself like:
In addition, you must try different options for all these commands to know what kind of configuration is the best for you and your scenario. But fortunately there is a lot of information and in most of cases you will find your best option in seconds by using google.
And that’s all guys! Thank you one more time for reading our posts and see you on next tutorial!
Don’t forget follow us on twitter and visit our forums!
optimize, optimize images, optimize png, png, speeding up
Articles, Tutorials
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
Great article Adrián!
But I found an error in this and others articles:
I think it is “Optimizing JPEG images” and not “Optimizing JEPG images”.
Oops! You are right Estevao! My fail, thanks for all!
[...] Speeding Up Your <b>Website</b>: Optimizing PNGs images | yensdesign <b>…<… Other posts in MarketingHow To Write An Article To Promote Your SiteMost webmasters, whether they are experienced or not, know the importance of promoting your website with articles. Unfortunately, many beginners do not realize the importance of a well-written article. Of course you can throw some words together and name your slop something but most article directories will reject it and … [...]
great once again a great optimization tip
@Yoosuf Thank you so much
Thanks for this tip. I didn’t know pngcrush before but after using it on my pngs I will safe bandwith at no cost. Thanks!
Thank you, cause I used Corel Paint Shop Photo Pro to optimize my little PNGs before
What are “purposals”?
Is it different from adobe photoshop “save for web” features?
@Dian Yes it is
http://www.fnordware.com/superpng/
Check that out! You can plug this directly into photoshop and overwrite the original PNG output plugin. Saves you a step!
@Dan Great thanks for sharing!
haha ^^ nice, is there a section to follow the RSS feed
Reading about weight loss tips is always fun. Thanks for the entertainment. Do you mind if I ask for your email address?
@Steven If you will be ask simple questions it’s ok But I don’t have much time these days. We are working hard on http://www.erasmusu.com !!
Your blog post is simple, concise and relevant with very good information. Thank you.
Nice site! Thanks for the great post
[...] [upmod] [downmod] Speeding Up Your Website: Optimizing PNGs images | yensdesign - Tutorials, Web Design and Coding (yensdesign.com) 1 points posted 3 months ago by SixSixSix tags webdesign optimization [...]
Wow! what an idea ! What a concept ! Beautiful .. Amazing
in meinem RSS-Reader ein. Help me, please
Great articles & Nice a site
The general rate of success of these weight loss broadcasts which are forever contending with each other is more or less the identical. And the most comic part is that these programs all choke at the one hurdle in wound of making really tall demands. This passes because the body gets used to the rigorousness through which it is cast and aligns itself to the new routine and the metabolic process slows down. You have to be smarter than nature to be able to illusion the body into turning a loss weight. Without pursuing this measure then you will constantly curiosity why you cannot fall back weightiness.
Hi, I found your blog when i was looking for websites related to this article. I must say, your site is good. I like the layout too, its pleasing. I don’t have much time now to fully read your website but I have noted it and I also signed up for your RSS feed. I will be back in a day or two. Thanks for an useful blog.
Stumbled across your blog while searching through google. I read the first paragraph and its fantastic! I do not have time to finish it now, but I have bookmarked this site and will read the rest later. : )