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: