While waiting for Streamyx’s arrival to my home, I’ve been logging on to the Internet occassionally using TMNet’s 1315 dialup service. Man, it’s a hellish experience! At 33.6kbps everything takes ages to load and I’m merely visiting web sites!

I tried to visit some friends’ blogs and just couldn’t believe how bloody long it took to render the pages! After a while, I started to wonder how long would HTNet take to load on dial-up connection and I took a peek. I’m glad to find out that it loads pretty quickly.

Optimizing your web site’s loading time isn’t difficult; it’s mostly an excercise of common sense; smaller pages load faster. Hence, we should make our pages as small as possible without sacrificing the information we want to present on them.

When it comes to load time, images are undeniably the biggest culprit. However, in this multimedia age, using images is an almost unavoidable excercise. The key to using images efficiently is to select the right image for a particular purpose.

When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:

  • JPEG
    • Excellent for rich coloured images
    • Decent file size compression to quality ratio
    • Doesn’t support animation
    • Doesn’t support transparency or alpha-blending
  • GIF
    • Small file size
    • Supports transparent regions
    • Supports animation
    • Limited colours (supports up to 256 colours maximum)
    • Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
  • PNG
    • Can be in true or indexed colour format
    • Supports true transparency and alpha-blending
    • Cannot be animated
    • File size can be big
    • Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)

So what functions suit which format? There’s no hard and fast rule when it comes to this issue. However, from my experience JPEGs are best suited for photographs and images with vibrant colours. GIFs on the other hand are ideal for animated icons that brings attention to nearby text content.

PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved. By overlaying PNGs on top of one another, you can achieve pretty stunning visual effects! Better still, most modern browsers support PNGs much better than in the past.

As an owner or maintainer of web sites, one should always experiment with these three formats to get the best visual representation at the smallest size possible. Play around with indexed vs true colours, compression rates and image dimensions. Explore the capabilities of each image format and you’ll make better decisions when it comes to using images in your web pages.

Do you like this post? Please share it with others using the Share It icon below. You should also subscribe to HTNet’s feeds to be notified whenever I post something new.

You can read more about these image formats on Wikipedia:

I’ve been handed the responsibility of redesigning my company’s web site. I’m not really into web design because I’m not really a visual person. I’d rather go through tons of texts rather than spending the exact same amount of time looking at eyecandies.

However, seeing that I’m now netted into “whatever that has anything to do with computers go to the MIS department” trap, I just have to make the best of it.

Basically, I’ve summed up the process to be something along the following lines:

  1. Grab all data to be presented
  2. Organise the data into useful information
  3. Identify grouping criteria for the information
  4. Categorising gathered information into the identified groups
  5. Presenting the information on a web based media

I have no problems with the first four processes. It’s the presentation portion I’m worried about. Sure, I can probably engage a web contractor for that part… but reading between the lines of what management has communicated to me; I get the feeling that they wanted me to do this as well.

A quick google later, I found the following good resources regarding web design… at least I think they’re good. If I’m such a web design expert, I wouldn’t need to look up such information now, ain’t it?

  • Current Style In Web Design: A nice visual tour of “hot” web sites with elaborations on the key design elements that highlights them
  • Web Design Practices: Showcases popular web page elements as well as its adoption rate in percentages; recommended for stats buffs
  • ontoinfo’s Current Trends in Web Design: I remember digging this post. Eventhough it’s posted in September 2006, most of what it highlights remain relevant today

Do you have any other web design resources to recommend?