Tip #1: Be Aware of PNG Limitations in Internet Explorer

The Portable Network Graphic (PNG) format is well supported by modern browsers (e.g. IE 6+, Firefox 1+ and Opera 5+), except for two issues with Internet Explorer:

• Graphics tools like Adobe Photoshop save a Gamma correction table in the PNG file that is designed to allow for differences in the brightness of displays. Unlike other browsers, IE uses this table to adjust the brightness of a PNG image and therefore causes color mismatches when viewed alongside CSS colors or images in other formats. This problem is easily corrected by deleting the chunk containing the table with a tool like TweakPNG:
• There is no transparency support for the normal PNG-24 format (24 bit color) in IE 6. However, simple 1 bit transparency, like GIF files, is supported with the PNG-8 format (8 bit color).

Tip #2: Use PNG Images For Screenshots, Buttons and Logos

The Deflate compression algorithm used by PNG always preserves the original image, unlike the JPEG format which allows a trade-off between image quality and size. The screen shots below show how the image can become degraded with JPEG:

300% zoomed view of medium quality JPEG:

300% zoomed view of equivalent PNG:

So, if you need to display screen shots, logos, buttons or other artwork then you should use PNG files to avoid the sort of compression artifacts seen above. It is possible to save a JPEG image with 100% quality (i.e. lossless) but the file ends up being much larger than the equivalent PNG.

Tip #3: Consider Replacing GIFs With PNGs

A GIF file of more than a few hundred bytes will usually be smaller if it is converted to an equivalent PNG.  You can achieve even greater savings if you use the PNG-8 format (8 bits per pixel) compared to the usual PNG-24 (24 bits of color per pixel) format.

However, if you need animated images you’ll have to stick with GIF files because PNG has no animation support.

Tip #4: Don’t Use PNGs For Photos

The compression algorithm used in JPEG was designed for photographic content. Although it does not exactly preserve the original image, very substantial savings can often be achieved without introducing any noticeable degradation. For example, the image shown below is over 10 times smaller as a JPEG rather than a PNG with no noticeable differences:

PNG – 24 bit color, file size 88 KB:

JPEG – saved as medium quality in Photoshop, file size 7 KB:

Tip #5: Not All PNGs Are Created Equal

There is some flexibility in the way the deflate compression is applied to an image in a PNG file. This means that if you save the same image in different graphical tools you’ll often see different files sizes. We tried saving the largest PNG from our web site in three different tools:

File size for 786 x 245 PNG image:

Adobe Photoshop:  104 KB
Paint Shop Pro: 105 KB
MS Paint: 132 KB

The file produced by the Windows built-in Paint program was nearly 30% larger than the output from Adobe Photoshop!

To get the smallest possible file size, use a post processing tool like PNGOut. With our sample image, it produced a PNG file size of 100 KB.

If you’re tuning a web page’s performance there are two types of visitors that you need to be concerned about:

1. A new visitor to your site who won’t have any of your pages, scripts, CSS or images in their browser cache.
2. An existing user of your site who will have your cacheable pages, scripts, CSS or images in their browser cache.

Visitor type 1) is said to be in the Empty Cache state and Vistor type 2) is said to be in the Primed Cache state. Optimizing for visitors with an empty cache is important as their initial impressions of your site will be affected by how quickly its pages are loaded.

The performance of any page is never going to worse for visitors with a primed cache, but minimizing the load on your site caused by existing users through the use of effective caching will reduce your bandwidth costs and server load.

Your can manually simulate these two scenarios with HttpWatch. For example, you could run an Empty Cache test on our home page (www.httpwatch.com) using these steps:

• Open a HttpWatch in IE and click on Tools->Clear Cache or use the keyboard shortcut Alt+C. If you haven’t cleared your browser cache recently this could take a few minutes:
  
• Click on Record and go to www.httpwatch.com
• HttpWatch will then display a time chart with the page load time:
  

To run the Primed Cache test you would first need to ensure that the page has already been visited and then re-visit it in a new instance of IE. You shouldn’t re-use the same instance of IE because there may some images held in memory from the first visit to the page. To perform the Primed Cache test you would need to:

• Visit www.httpwatch.com in IE to prime the cache
• Close down IE and start a new instance
• Open HttpWatch and click on Record
• Go to www.httpwatch.com
• HttpWatch will then display a time chart with the page load time:
  

Of course, with a test like this you really want to run it automatically. The HttpWatch Automation interface (document in the HttpWatch Help file) allows you to do this in a few lines of code. Here’s the code in C# for the Empty Cache test:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
 
using HttpWatch;                
 
namespace EmptyCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();                
 
            // Clear out all existing cache entries
            plugin.ClearCache();                
 
            plugin.Record();
            plugin.GotoURL(url);                
 
            // Wait for the page to download
            controller.Wait(plugin, -1);                
 
            plugin.Stop();                
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;                
 
            System.Console.WriteLine( "The empty cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");                
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");                
 
            plugin.CloseBrowser();
        }
    }
}

and here’s the Primed Cache test. Notice how we use controller.IE.New() a second time to ensure that a new instance of IE is started:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
using HttpWatch;               
 
namespace PrimedCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();               
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();               
 
            // Visit the page to prime the cache
            plugin.GotoURL(url);
            plugin.Record();
            controller.Wait(plugin, -1);               
 
            // Shutdown IE and create a new instance
            plugin.CloseBrowser();
            plugin = controller.IE.New();               
 
            plugin.Record();               
 
            // Visit the page a second time with the cache primed
            plugin.GotoURL(url);
            controller.Wait(plugin, -1);               
 
            plugin.Stop();               
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;               
 
            System.Console.WriteLine( "The primed cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");               
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");               
 
            plugin.CloseBrowser();
        }
    }
}

BTW, everything we’ve mentioned in this blog post works with the free Basic Edition of HttpWatch as well as the Professional Edition.

Have you ever been to a web site and seen this?

This warning is triggered in IE if it is displaying a secure HTTPS page that has caused a non-secure (i.e. HTTP based) resource to be downloaded. The message box doesn’t allow the user to control whether the non-secure content should be downloaded, only whether it should be displayed.

This seems rather pointless as the damage may already have been done if the non-secure content was a picture of your passport, bank statement or credit card! However, this is the default setting in IE so it is best to avoid this warning being generated on your web site.

This setting can be changed in IE by:

1. Going  to Tools->Internet Options->Security
2. Select the Security tab
3. Click on the Internet zone icon at the top of the tab page
4. Click the Custom Level button
5. In the Miscellaneous section change Display mixed content to Enable
6. Repeat steps 1 – 5 for the Local intranet and Trusted sites zones

Recently, we saw this warning in the shopping cart of an  computer store,  so we fired up HttpWatch to see what was causing the problem. A quick search for a URL starting with ‘http:’ should have located the request causing the problem:

No HTTP requests were recorded for this page in HttpWatch. So what was causing the ‘Do you want to display nonsecure items’ message?

It turns out that IE warns about HTTP based content even if it was read from the browser cache or the IE image cache. Requests from the browser cache are shown as (Cache) in HttpWatch, but as we previously described access to the IE image cache is not recorded.

The resource causing the warning on this page must have been read from the image cache. We confirmed this by refreshing the page in IE and performing another search:

The refresh forced IE to download all the embedded resources on the page and it became clear that it was the Google Checkout image that was causing the problem. Changing this image’s URL to use HTTPS would prevent the warning from appearing.