Zoompf is giving away a free ticket to the Web Performance Summit 2011. This is one day conference focused on web performance which is broadcast online around the world. It is a excellent event with lots of direct access to speakers, rich discussion with other attendees, and it covers a wide range of topics. There is an amazing lineup of speakers including: Mathias Bynens, Kyle Simpson, Joshua Bixby, and Aaron Peters. I will be giving a talk on lossy image optimization.

Zoompf has a free ticket and will be giving it away tonight at 9pm EDT. Want a change to get it? Here is what you need to do to be in the drawing:

1. Follow @zoompf on Twitter.
2. Retreet this tweet (also shown below)

That’s it! Simply follow @zoompf on Twitter, retweet our message, and you’re name will be in our drawing. We announce the winner tonight! Good luck and I hope to you can attend the Web Performance Summit 2011.

Today we have two exciting announcements with Zoompf.

2010 State of Web Performance Report

Our first announcement is the release of our 2010 State of Web Performance report. Zoompf used our technology to assess the Alexa Top 1000 for performance defects to determine how well they have implemented proven web performance optimization techniques. Our research shows that even the largest sites on the web have trouble implementing even the most basic of performance optimization. Just consider lossless optimizations like HTTP compression, minification, and image crunching. Zoompf found that had these optimizations been properly implemented, there would be a 20% reduction in bandwidth across the entire Alexa Top 1000. This is a startling number. 1 byte of our every 5 bytes of web traffic is wasted bloat that can be eliminated using common performance optimizations, some of which are over a decade old!

There are way too many findings to reveal them all here. The 2010 State of Web Performance report is over 25 pages long and is packed full of statistics, analysis, and advice on how organizations can learn from the successes and failures of the Alexa Top 1000. Download your free copy now.

Download Zoompf’s 2010 State of Web Performance report.

I will be presenting results and highlights from our 2010 State of Web Performance at the Velocity Conference Tuesday night at the Ignite Sessions. If you are attending come watch a humorous trek through 90,000 URLs of content!

New Product Offering

Our second announcement is that today Zoompf launches a new product: Zoompf Web Performance Optimizer (WPO). Zoompf WPO is a web-based SaaS that allows you to assess any web application for over 300 different performance issues, from anywhere, at anytime. Zoompf WPO goes beyond our free performance assessment in several key ways:

• Coverage: Zoompf WPO Scans your entire application for performance problems.
• Depth: Zoompf WPO tests your app for over 300 problems and provides comprehensive information about each issue. Users receive details about each problem and its causes, complete with graphs and diagrams, as well as full remediation advice including configuration settings, code snippets, and implementation best practices.
• Root Cause: Zoompf WPO allows you to drill down into any performance issues and highlights the text or code in a response that is causing the performance problem.
• Rich Reports: Zoompf WPO offers 10 different reports to help you understand the issues and the impact of your changes. WPO also generates prioritized action plans, so you know exactly what IT operations or the designers should work on first to get the biggest improvement.
• Assessment History: Zoompf WPO keeps track of all your past performance assessments. This allows you to measure and track performance defects across the entire the development and deployment of the application.

Pricing for Zoompf WPO starts at just $99 a month and is available now. Learn more about Zoompf WPO.

We extremely excited and proud to launch our Zoompf Web Performance Optimizer product and release this groundbreaking industry report. Our mission at Zoompf is to enabled web designers, web developers, and IT operations to build fast web applications. The addition of Zoompf WPO to our existing free web performance scanning service and our professional services provides an entire suite of performance products and services to fulfill this mission. I encourage you to take a look at our web performance products and services today and see how Zoompf can help you.

If you are attending the Velocity conference drop by and say hello, or reach out to us for a face-to-face meeting. You can contact us on twitter (@zoompf), through email (info@zoompf.com) or call us at 1-404-414-2000.

Lord Kelvin, the famous British scientist and mathematician, once said: “You cannot improve what you cannot measure.” Just as web developers track the quality of their code using unit testing, regression suites, and bug trackers to improve their work, performance metrics are needed as well.

So we created the Zoompf Performance Rank. This rank easily quantifies the performance status of your website. You can compare Performance Rank across different sites, or track how the performance of the same site varies over time.

Zoompf’s Performance Rank for a website is calculated by scoring each response individually on a scale from 0 to 100. The score of all the responses are averaged together to yield the Zoompf Performance Rank . If a response has no performance problems it scores 100 points. For every performance problem a resource has points are deducted from that resource’s score. The number of points deducted is based on the severity of the performance issue. Critical defects, like not HTTP compression for a compressable response subtract 25 points.High severity issues like Unoptimized images are 15 points. The lowest score any resource can have is a 0. This only happens if the page has a large number of performance issues. No page will have a score less than zero. This means if your website only consists of 2 pages, one that is completely awful and the other is perfect, the lowest Performance Rank you can have is 50, regardless of how awful that awful page is.

Zoompf Performance Rank is a very flexible scoring system that more accurately reflects the performance of a site than other scoring systems. Let’s say you run a photography site that consists of 1 HTML page and 19 images. Let’s say you don’t have HTTP compression turned on so your HTML page receives a score of 75 while the images have no problems and each receive a score of 100. The Zoompf Performance Rank would be 98.75. Other tools might take off a large number of points because such a critical issue as HTTP compression is not turned on. However for this photography site, HTTP compression is not a big concern. The vast majority of the site, both in bandwidth and page count, would not benefit from HTTP compression. Now consider the same photography site. HTTP compression is now turned on for the HTML page (100 points), but all of the images are unoptimized (85 points each). The Zoompf Performance Rank is 85.75. Even though the performance problem is less severe, it affects the vast majority of the photography website and so has a lower Zoompf Performance Rank.

You can find our your Zoompf Performance Rank and test your website for over 300 performance issues right now using our free web performance scanning service. We also setup a Twitter account for the performance scanner (@zoompfauto) which tweets out the Performance Rank and a link to the full Zoompf performance report for every werbsite it scans. This is a great way to see how your site compares with others. As always feedback and questions are always welcome. Enjoy!

It’s human nature: People want to know what they are going to get in return before they do something. This is especially important for web developers and front-end designers concerned about web performance. Knowing the savings benefit from an optimization (along with the effort it takes to implement) is critical information required to properly prioritize your web performance optimization tasks. Its often required information to persuade project managers to devote resources to optimizing a website. Developers and designers need hard data about how much savings they will get when they implement a certain optimization. They don’t want rough estimates, or statements like “typical savings is 15% to 20%.” No, developers and designers want “This file is currently size X. If you make Y optimization, it will be reduced to size Z.”

To address this very issue for we have added a new feature to our free web performance scanning service: Savings Tables. With certain performance issues, the Zoompf report will have a Savings Table. It tells you what URLs were affected by the issue, what optimization tool you should you, and exactly how much savings there will be when you optimize the resource.

Savings Tables cleanly illustrate the benefits of common optimizations like minification and compression. Savings Tables for lesser known optimizations, such as PNG8 candidate images, Oversized Gradients, and reducing JPEG quality, can educate web developers and designers about the significant effects these techniques and how to optimize their websites even further.

Let’s use this Zoompf Performance Report for O’Reilly as an example. The Savings Table shows that HTTP compression can save O’reilly 73%. We see a similar breakdown for CSS minification and JavaScript minification.

Unexpected Savings

Then we come to something interesting: Oversized Gradients. This is where a very thin image is repeated using CSS along the X or Y axis to create a gradient background for some page element. Often web developers believe that converting a 10 pixel by 80 pixel gradient image into a 1 pixel by 80 pixel gradient won’t reduce image size by any reasonable amount. However, the Savings Table shows that O’Reilly could reduce the size of its CSS gradients by 22%! Multiple that out of over a day of traffic and we are taking serious savings. The Savings Tables demonstrate the value of other optimizations as well. Converting the candidate images identified by Zoompf to PNG8 will save 61%. Reducing JPEG quality to 70 would save 30%. And so on.

To justify the cost of implementing performance optimization, web developers and designers need hard numbers. The Savings Table feature of Zoompf’s free web performance scanning service can help you the information you need to fully understand the benefits of optimization. We also hope this new feature helps you discover a new technique to speed up your website that you didn’t even know existed. Remember, our free web performance scanning service is available for anyone to use as much as they want, as often as they want, on any site that they want. Scan your site today and see how you can save.

The last 6 weeks have been a very exciting time for us at Zoompf. 5 weeks ago we passed the 300 check mark for issues we test your website for using our performance scanning technology. Next we went live with a brand new web design and content management system to manage all our online content and make it easier for you to find the latest front-end performance techniques on our site and on our blog.

Less than 1 month ago, we rolled out our free 100% fully automated web performance scanner. This free service would scan whatever website you want, whenever you want, and as often as you want, and email you a web performance optimization report offering clear guidance to make you website blazingly fast. Since then over 400 submitted their email and received a free scan. Then we introduced of our web performance scanning bookmarklet which allowed anyone to check whatever site they were browsing for web performance problems regardless of what web browser or operating system they were using. This milestone made it even easier to use Zoompf’s performance scanning technology and discover how Zoompf can help web developers, designers and IT professionals build faster sites!

Shortcomings Abound

Of course to get a free performance assessment you still had to type in an email address. This was a barrier for some people. Creating the report and delivering it also wasn’t pretty. It could take up to several minutes before you would receive you report. And when you did receive the performance report is was a ZIP file containing some HTML and supporting images. Very cumbersome indeed! All of these factors made it difficult for web developers, designers, and front-end engineers to seamlessly integrate Zoompf’s performance analysis into their everyday workflow or tool chain.

Like Awesome in a can!

That’s right, today we are happy to announce our free performance scanning service is now entirely online! No email address, nothing to install, just sweet web-based performance checking honey. Punch in any URL you want scanned into the system, mash on “go” and in seconds you will be seeing a Zoompf performance report right inside your browser! Doc even made it work on iPhones or IE6 It looks something like this:

(O’Reilly’s woodcut animal‘s eyes are so wide because he’s surprised by the wide range of web performance problems on oreilly.com!)

Now for the cool news. Not sure if you noticed but we actually flipped the switch turned activated the online service very late Friday night/very early Saturday morning (approximately 1:45am EST on April 10th). We are very pleased to say that in the last 55 hours or so, people from around the global have used Zoompf to test the performance of over 800 websites!

Want to try it out? Simply go to zoompf.com/free, type in a URL, and bask in awesomeness of free, comprehensive web performance optimization reports! Help us try and get over 1000 scans in the first 72 hours!

Recap

• We just launch 100% free, 100% online web performance scanning service
• We check your app for over 300 different performance and website issues
• o strings! No email required. Unlimited use. No silly technical prejudices. Any browser. Any OS. Period.

On behalf of the entire Zoompf team, myself, Doc, JR, Tracy, and Brian, we thank you for the bottom of our hearts for your interest, feedback and support. It’s going to be an amazing year as we continue to make Zoompf the source to help your find and fix web performance optimization problems.

Enjoy,

Billy Hoffamn. Zoompf Founder

We have two big announcements for you all today.

The first announcement is that we have finished rolling out a complete web design for Zoompf.com. The awesome folks over at Zero G Creative did the design and we worked with them to get everything tweaked (include the Sisyphean task of making everything look pretty even in dead browsers like IE6) and to hook it into our new backend systems. We are very pleased with the results and we will be implementing addition changes in the coming weeks.If you run into any issues please let us know.

We are very proud of our second announcement. Today we are unveiling Zoompf’s new automated web performance scanning service. Simply plug in a URL and we scan your website for over 300 performance issues and then email you a pretty report in minutes. It’s completely free, so please use it as much as you’d like and as often as you’d like. We are experimenting with new features, such as PDF reports, load graphs, resource hierarchy graphs, and other cool features and will keep you posted.

For now enjoy the new Zoompf website and take your favorite websites for a spin with our free web performance scanning service!

When talking with web developers and front end designers we almost always get asked these two questions: “Do you really have 300 Checks?” and “What performance issues does Zoompf look for?” (The answer to the first question is: No, we actually have 315. However not all of them are specifically for front-end performance issues). In this post we will detail what issues Zoompf detects while assesses your web applications and help illustrated how Zoompf’s deep and broad analysis compares with other front-end performance tools.

(Of course, you can see how awesome Zoompf’s performance analysis is right now! Anyone can receive a free performance scan of their website)

To understand and appreciate the scope of Zoompf’s analysis it is helpful to create categories of different performance issues. This way we can discuss the typical performance issues that people test websites for and showcase all the additional issues Zoompf detects. In our reports, Zoompf groups performance issues into 4 broad categories based on what the desired goal for solving each problem. The four performance categories Zoompf uses are:

• Reducing Response Size
• Reducing Request Count
• Maximizing Browser Performance
• Server and Miscellaneous Issues

Let’s examine what these categories mean and list examples of the performance issues fall into each category.

Reducing Response Size

Reducing response is all about minimizing the number of bytes that have to be pushed down the network pipe to the client. Typically examples for issues in this category are things like using HTTP compression, minifying CSS JavaScript files, and crunching images. Other tools tend to check only for these obvious issues.

Zoompf however goes further to find more bloated content and unnecessary data that can be removed to reduce the of a web response. Zoompf not only has standard HTML minification checks (#38, #44) but also tells you HTML content that should be completely removed such as: <TABLE> tags that are used for layout purposes (#111, #299, #301); unnecessary or redundant content such as <META> tags used for caching, or character set info, or other meta data and multiple page elements like DOCTYPES (#170, #302-305, #97); common style attribute or onX event attributes that can be communized into single declarations (#283, #28-#30); Excessive ASP.NET ViewState (#212); and more.

We find ways to reduce the size of content in other types of files by finding issues like: Unused CSS rules (#33); Flash or Silverlight applications that has not been compressed, or compiled with debugging symbols, or contain uncrunched images, or aren’t using assembly caching (#148, #149,#231 #232, #256 ,#257); content that can be rezipped (#230); Already compressed Content using HTTP compression (#58); PNG8 Candidate images (#284, #285) and more.

As of today Zoompf detects 103 different issues so you can optimize your web content to be as small as possible without sacrificing features or compatibility. Reducing response size provides a good improvement to page load times and a larger impact on operational resources like bandwidth and server load.

Reducing Request Count

Reducing request count issues are all about how to reduce the number of HTTP requests needed to render the page. Typical examples for this category include things like combining CSS or JavaScript files, CSS sprites, and using HTTP caching.

Again Zoompf goes beyond the status quo and detects even more ways that you can reduce the request count for a web page. This includes things like: hyperlinks and images that can be converted to client-side image maps (#185); server–side image maps (#169); wasteful redirects due to no trailing slash, or to a default page, or to the WWW/non-WWW or SSL version of the site (#129, #204, #247, #248); resources that should be cached by caching proxies but aren’t due to query strings, URL contents, or conflicting and misconfigured cache headers (#68, #191-#197, #36); news feeds that aren’t using caching, or blackout periods, or Last-modified support (#225-229, #233, #235); Style sheets that only import other style sheets (#264, #269); external JavaScript files with no executable content (#37); and many more.

As of today Zoompf checks for 70 different issues that will reduce the number of requests your web server must handle per page. These issues have an enormous effect on page load times and an equally massive effect on bandwidth consumption and network usage.

Maximizing Browser Performance

Maximizing browser performance is all about using correct features and organizing content to allow the browsers to render the page and execute the content as fast as possible. This includes obvious things like domain sharding and cookie-free domains, avoiding CSS expressions or AlphaImageLoader, and properly placing reference to external JavaScript or CSS files.

Again Zoompf goes beyond typical front-end tools and detects issues such as: <SCRIPT> that blocks rendering (#286, #152); Images or objects without dimensions (#237 #238, #262); <CANVAS> issues (#291); out-of-date and poorly performance JavaScript libraries like older jQuery or Google Analytic’s urchin.js (#272, #293); downgrades to HTTP/1.0 (#56); JavaScript code performance issues (#158, #160, #221, #222); premature persistent connection closure (#177, #178); and more.

Zoompf currently checks your web application for 41 different issues which decrease the performance of your visitors’ browser and which directly lead to slower page load times and application functionality.

Server and Miscellaneous Issues

The “Server and Miscellaneous Issues” category contains issues which reduce the performance of the web server or which waste the server’s resource. While front-end optimization techniques can offer enormous performance gains there are many easy to fix server issues that can be detected by simply crawling the web server. Missing or misconfigured Robots.txt files with suboptimal rules or no crawl-delay (#7, #289, #102, #91); broken or incorrect content given the way it was references (#40-43, #253-255); application specific issues like misconfigured server-side object caches like memcached or WP Super Cache (CMS or PHP op-code caching systems(#239-#245); and a few more.

As of today Zoompf scans for 36 different issues that decrease the performance of the server or needlessly waste its resources.

Other Issues Zoompf Detects

There are 2 other categories of issues that Zoompf looks for. The first category consists of quality issues. Zoompf classifies quality issues as blatant errors or critical problems with your website’s functionality. We include quality issues because you really shouldn’t be trying to finding and fix performance issues while your web application is fundamentally not working properly. We mentioned quality issues before in our post about supporting other languages. These quality issues detect problems such web server errors (broken status codes, misconfigured modules, SSL certificate issues, etc); application tier issues (stack traces, framework exceptions, and unexecuted server-side source code, etc) and database errors and exceptions. In all Zoompf detects 37 different quality issues. While Zoompf is not meant to replace QA testers we want to alert you to any critical or broken functionality on your website that we detect.

We call the final group “Prototype Checks.” These look for all different kinds of issues, such as obscure or developing performance issues, search engine optimization best practices, usability and accessibility issues, browser compatibility issues, and even web security issues. We have written these checks so we can gather different pieces of data or statistics about these issues in all the web assessments we do. We do not include any of these issues in our web performance reports or in any other public reports (though this might change). Some of these issues do get promoted to performance or quality checks, while others allow us to play with new ideas or technologies.

Follow the Leader

So now you know what performance issues Zoompf checks for and how we provider a richer and deeper analysis of your web application than other tools. In fact, other people are starting taking cues from Zoompf on new performance issues to include in their tools. When Google released version 1.6 of PageSpeed in February they added support to find a new performance issue : Specify a Character Set Early. This is something we researched and blogged about late last year and Google even references Zoompf work as source material for including the new check!

Front-end performance is a very young and exciting space. We will continue to discover and publicize new techniques to optimize your website’s performance. It’s going to be a fun ride!

Experience the Matrix

Much like The Matrix, reading about what performance issues Zoompf detects is nothing compared to experiencing what performance issues Zoompf can detect for yourself. Right now you can go to Zoompf.com can get a free performance assessment of your website. What things will we find that other tools have missed? Think you have a fully optimized website that cannot possibly be improved? Try Zoompf’s free performance assessment today and find out!

Have you heard about PNG8 yet? No? Well, PNG8 is a PNG image that is used an indexed palette of 256 colors instead of a true color PNG which can support several million different colors. There has already been a number of excellent articles and blog posts written about PNG8. These articles have discussed things about PNG8 such as its benefits, how to create PNG8, and using them across different browsers.

But this article isn’t about any of that.

This article is about how to choose PNG images that are good candidates for converting to PNG8. Historically this has not been an easy or a straight forward decision.

We already know that PNG images can be optimized. Crunching PNGs (using pngcrush, or optipng, etc) to reduce their size is a lossless operation. This process removes unnecessary data chucks like comments and recompresses the DEFLATE streams using tweaked settings. When optimizing images by crunching them none of the image data changes. The number of colors in the image does not change and their color values and hues are exactly the same.

But converting a true color PNG to a PNG8 image is a lossly operation. You lose data. PNG8 images can have at most 256 distinct colors while true color PNGs can have several million. Because of this not all PNG images should be converted to PNG8. Some images look absolutely horrible when converted. Working with our clients we have created two guidelines to evaluate whether a PNG image can be converted to PNG8 without any noticeable loss in quality. This is a easier and scalable solution than converting all of the PNG images on your website and then manually verifying the resulting PNG8 images are acceptable.

Guideline #1: Number of Colors

To understand the impact of limiting a PNG image to only 256 distinct colors we must understand how many colors PNG images typically have. Converting to PNG8 can quite significantly reduce the number of colors in the image. A PNG8 version of a true color PNG image with 1,000 distinct colors has 25% as many colors of the original image. A PNG8 version of a true color PNG image with 10,000 colors has only 2.5% as many colors of the original image! So the number of distinct colors in the image (and thus the number of distinct colors you are destroying when converting to PNG8) has a huge impact on how acceptable the resulting PNG8 will be. In plain terms the PNG8 version of a 10,000 color PNG image will look worse than the PNG8 version of a 1,000 color PNG image.

While true color PNGs can have several million distinct colors they rarely do. (If you have a PNG image that has even a few tens of thousands of colors it should probably be saved as a JPEG instead). Examining a sample set of PNG images we found that PNGs tend to have several thousand distinct colors. We also have found that images containing only a few thousand colors will easily convert to a PNG8 image without any noticeable loss in quality. Consider the Zoompf logo:

The Zoompf logo is a true color PNG image consisting of 1999 distinct colors. That sounds like a lot. Let’s convert this to a PNG8 image using pngquant. Here is the original logo and the PNG8 version of the logo side by side for comparison. The original logo is on the top and new PNG8 version is on the bottom.

Wow, They look virtually identical even though the PNG8 version’s file size is over 50% smaller and uses 87% less colors than the original. Only if you zoom in very close do you start to see some differences. The greens are slightly lighter and the gray in the swoosh lines are a little different.

We have found that images will less than 2500-3000 distinct colors tend to provide the best trade off in terms of maximum reduction in file size without any noticeable difference to quality. This is purely subjective. There are some true color PNG images with 6,000 colors or more that look just fine when converted to PNG8. You should experiment and see what works best for you.

Guideline #2: Image Dimensions

Another factor is the dimensions of the image. Small images, even if they have more than 7,500 distinct colors, convert to PNG8 with not visible loss of quality. This is because your brain has trouble detecting some many similar colors in such a small area. Consider this true color PNG image of a cat.

This picture consists of 8,853 distinct colors. That’s an enormous amount when you realize this image has only 9900 pixels total! Almost every pixel is a completely unique color. That’s tons of distinct colors given the area they are displayed in. Again we use pngquant to convert this cat image into a PNG8 image and compare it to the original. The original image is on the top and PNG8 version is on the bottom.

Again, they look virtually identical even though the PNG8 version’s file size is over 50% smaller and uses 97.2% less colors than the original. As if the logo, only if you zoom in very close you can start to see the differences between the original image and the PNG8 version.

We have found that images less than 100 pixels by 100 pixels, or an image whose area is less than 10,000 pixels can easily be converted into a PNG8 without any noticeable difference in quality. This is a purely subjective guideline. Some larger true color PNG images look just fine when converted to PNG8.

Using the Guidelines

These guidelines can be used separately. A PNG image does not have to be both small and not using many colors to be a good candidate for converting to PNG8. As as example, Graphviz, a program that generates node-and-edge style graphs, regularly produces images that are thousands of pixels wide by thousands of pixels tall. This would violate our image area guideline. However these images usually contain a few hundred colors. This satisfies our color count guideline. Sure enough, converting the output of Graphviz to PNG8 saves a lot of space with no perceivable loss of quality.

PNG8 and CSS Sprites

A lot of times people want to combine PNG8′s advantage of a very small file size with CSS Sprite’s’ advantage of reducing the number of HTTP requests. At first glance this makes a lot of sense. Individual CSS background images inside of the sprite are often small images, fitting our image dimensions guideline. Also CSS background images are often icon-style images used on buttons, toolbars, etc. This means each individual image tends to have only several dozen distinct colors fitting our image colors guideline.

Unfortunately this is looking at the trees instead of the forest. That’s because a CSS Sprite saved as a PNG8 image has to use only 256 distinct colors for all the sub-images inside the sprite. So while each sub-image that makes up the CSS Sprite might look fine as an individual PNG8 image (each with its own 256 color palette) all the sub-images together in a single PNG8 CSS Sprite using a single common 256 color palette could not. This is especially true with gradients and othe graphics that use different shades for color transitions. In fact, Stoyan pointed out a recent article talked about how converting a CSS Sprite to PNG8 caused a very noticeable loss in quality. The solution was the hand edit the PNG8′s 256 color palette to preserve as many shades of the gradient as possible to improve quality.

Zoompf Color Counter

Since so much savings can occur from converting from PNG24 to PNG8 where appropriate, developers are left with the challenge of trying to quickly find candidate images. While Zoompf’s free web performance scanning service will detect candidate images developers will also want to test images that are not yet uploaded or test images on a website that is not yet in production. To help developers, Zoompf has released the Zoompf Color Counter.

Zoompf Color Counter is a Windows program that will analyze an image and tell the user how many distinct colors it has. Simply open an image inside Zoompf Color Counter or drag and drop an image on top of Zoompf Color Counter to learn the number of distinct colors. Download Zoompf Color.

Summary

There are a lot of blog posts and articles on the Internet about how converting true color PNG images into PNG8 images is an excellent optimization technique. However knowing how to choose true color PNG images that are good candidates to convert to PNG8 can be difficult and time consuming. In this post we provide 2 guidelines to help:

1. Images with less than 2500 to 3000 distinct colors can usually be converted to PNG8 without any noticeable differences
2. Image less than 100 pixels by 100 pixels (or an image whose area is less than 10,000 pixels) can usually be converted to PNG8 without any noticeable differences.

In addition we have release Zoompf Color Counter to help developers find candidate images. Remember that converting to PNG8 is a lossly process. How much loss is tolerable will vary from person to person. You should use our guidelines but also experiment to see if you will tolerate more. Finally, be careful converting your CSS Sprites image into PNG8, especially if you use images with gradients.

Want to see what performance problems your website has? Finding Candidate PNG8 Images based on color count or image dimensions are just two of the 300+ performance issues Zoompf detects when checking your web applications. You can sign up for a free mini web performance assessment at Zoompf.com today!