We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
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:
[code language="php"] > pngcrush -rem alla -brute -reduce original_image.png final_image.png [/code]
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!
The 642-524 tutorial will provide complete information on optimizing pngs images for your web project. Download the 640-721 guide and 350-029 tutorial to learn useful web applications to improve your website.
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 :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
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. : )
I was just listening Matt Cutts from Google webmaster and he also said that if you optimize all site, why are you not optimize images, but he was talking about names of images…it is better name for example “your design” like “pic12345″.
Have a nice day
Hi!
Thanks for this useful information about optimization. It helps a lot. I like your site, very cool and pleasing to the eyes. Keep it up!