Author: Steven Neiland

Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

Reduce Images to the Minimal Resolution

I always work with png's as they are probably the most compact of the three common browser compatible image types. So the first thing I did after cropping the background was saving as a png. Even with pngs though there is significant room for improvement.

PNG-8 instead of PNG-24

When you save a png with photoshop you can save it in many different web formats. The most common of which are png-8 and png-24. These both save as a png file, but png-8 is a much more compact file as it reduces the image to websafe 256 colors. You can further reduce png-8 to a smaller number of colors. With the background image I was able to reduce it to 64 colours.

PNG Crush

A simple and handy tool to use is "PNGCrush". This tool strips unnecessary data (such as author name, date created etc) from pngs reducing them to the bare minimum dataset. This combined the the step above had the effect of reducing the file size for the background image from 4.5 megabytes to 16 kilobytes (or 0.016 megabytes) nice.

Remove Unnecessary Transparency

If you have an image with a gradiated transparency (a drop shadow for example) it will have been saved using png-24 as png-8 sucks at semi-transparency. If you must have the gradiated shadow then thats what you have to stick with, but you should check every image on your site to see what can be reduced. For example On the hunt club site I was able to convert three 1000x470px png's to png-8 with minimal loss of quality. Each one reduced from 1 megabyte to 254k.

Use Image Sprites

Sprites are a technique of combining several smaller images into one large image. You then selectively display a portion of that image for different elements. This has two benefits.

  1. Reduces Number of Connections: Each time you open a webpage your browser opens a number of connections to download the different resources such as images in parallel(at the same time). However the browser can only handle so many connections at a time. It varies from browser to browser and can be adjusted but the standard number is two connections at once. So even if both the server and the client have enough bandwidth for more connections you are limited to the browsers parallel limits. This means that if you have more resources(images,script files,css files) than the browser has connections then the browser will have to queue up requests for resources. By combining several smaller you can reduce this queueing.
  2. Reduce Extra Info: Each image file contains extra non visible meta data which is used by operating systems to decode and open the file. By combining images into one you reduces the repetion of this meta data. This has only minimal effect but its useful to know.

There are many useful tutorials on sprites on the web. If I write one myself I will add a link here.

Note: You would only combine images into a sprite if they are guaranteed to always be displayed together. A good use of sprites is a menu with rollover effects.

Specify Image Sizes

This does not have any effect on download speed, but specifying the image dimensions in the img tag reduce the work the browser has to do to workout where to place each element. This results in a smoother page load with less redrawing required on the browsers part.

1 2 3 4

Related Blog Postings

What Do You Think?

Reader Comments

Post a Comment

Comment Etiquette:

  • Please keep comments on-topic.
  • Please do not post unrelated questions or large chunks of code.
  • Please do not engage in flaming/abusive behaviour.
  • Comments that contain or appear to be advertisments, will not be published.
  • Comments that appear to be created for the purpose of linkbuilding to commercial sites will be removed.

We are all adults here so play nice.


Archives Blog Listing

Tag Listing

Learn CF In A Week


Fork me on GitHub