Quality Assurance for Webmasters - Make Your Site a Quick Draw Cowboy
(Page 3 of 4 )
Make Your Site a Quick-Draw Cowboy
So far, I’ve let you in on the secret that some users have small screens (some are even using CRT monitors) and that some don’t even view images. I hope you’re sitting down, because this next one might shake you to the core. Here goes: a large number of users still dial up (Double gasp!). For this reason, you need to make sure your page loads as quickly as possible. There are tons of studies on the subject, but some suggest that the average user will only wait about 4 or 5 seconds for a page to load before they leave! Scary stuff for developers who love to slap images all over the place. There is hope, however.
It is common knowledge that images are the number one cause of slow load times. This leaves you with two options: ditch the images or make them load faster somehow. How can you make the images load faster? No, it doesn’t take a magic genie. The first thing you need to do is understand which image formats work best for different scenarios.
The gif format is almost a thing of the past. However, in some cases, it can still be very useful. The gif format doesn’t really have any kind of ‘code’ for images. It is a set of instructions that details the color of every picture, pixel by pixel, left to right. It can be ‘compressed’ if two colors, next to each other, are the same color. Instead of “green green green,” the code will be “3xgreen.” Huge space saver. If you have an image that only uses a few colors in large blocks, use a gif. Logos are the prime candidate.
For more detailed images, you’ll most likely use a jpg. This format allows you to have more detail and color without using as much space.
You can easily control the size and quality of your images using a number of programs. Photoshop is my favorite. It will allow you to simultaneously see 4 copies of the same image. It will tell you how many seconds the image will take to load at different speeds. It also gives you a great amount of control over the quality of an image versus the size. With gifs, it will allow you to choose which colors are included, and what kind of dithering should be used. With jgps, you have a slider that controls image quality.
Another good tip for quick-loading images is to include the pixel dimensions in the code. This will allow the browser to reserve the amount of space it needs and continue to load the page, loading the image later. This will create white boxes around your site, but it will still be useful, even when it is not fully loaded. If you don’t include the dimensions, the browser has to completely load the image before it can continue with the page. If you have a lot of images on a page, look into using thumbnails.
Next: Final Testing >>
More Web Hosting Articles Articles
More By Greg Cugier
