 |
Web Pictures Simplified |
Do Your Web Pages Take Forever To Download?
You're doing a web site for your class reunion, and your friends tell you that it takes FOREVER to load. The culprit may be the photographs and graphics on your site. This page is an explanation of why you're having problems and what you can do to fix things. Please be aware that I've purposely avoided using computer terms like pixels, dpi, ppi, bits and bytes.
The impetus for this page was a Highlanders High School web site I visited. It was the web master's first attempt at a web page, and looked very good. There was, however, one big problem with the site - the file sizes for all the images were way too big.
Rule of Thumb #1: Most web pages should load in 30 seconds or less for a visitor using a 28.8 modem - and interesting content should be accessible within 10 to 12 seconds of reaching your site.
Some of the individual images on that Highlanders site took almost 3 minutes to load, which is way too long. Heck, my mom wouldn't wait three minutes online to see a picture of me, much less a picture of my graduating class.
The images on the Highlanders site took so long to download because they weren't sized or formatted for the web. If you take only one thing away from this page, it should be this:
| Your web page images should be formatted in a graphics program so they have a resolution of 72 dots per inch and are the exact same size as they will display on your web page. If you save your images in JPG format, they should be saved at 80% quality. |
Take a close look at these two images:
|
Original Image
File Size: 222.7k
|
Resampled Image
File Size: 10k
|
See any difference in the the two images? Me either. But look at the difference in the download times. The original image will take over a minute to download with a 28.8 modem. The resampled image will download 23 times faster!
Why the difference in download times?
Before I can answer that, you need to know that regardless of the resolution of the original image, computer monitors display images at 72 dots per inch. If a web page uses an image that is 1" wide (72 dots wide) by 1" tall (72 dots tall), our monitors will display 5,184 dots (72 times 72) of information.
And if you have a 72 dots per inch image that is 2" wide (144 dots) by 2" tall (144 dots), the image has 20,736 dots (144 times 144), which is four times as many dots as the 1" wide by 1" wide picture.
Key Concept: Web browser will resize your graphics to fit in a given space, and will always display them at 72 dots per inch resolution.
When you design your web page, you can take that second image (scanned for a 2" by 2" area), and have it display in a 1" by 1" area. Since your monitor displays only 72 dots per inch, the two images will look identical on your computer screen. The 5,184 dot image looks exactly like the 20,736 dot image because your browser displays only 5,184 dots for that 1" x 1" area - regardless of the size of the original image. All the extra dots in the original image are ignored by your browser. The only difference you really notice is that the 20,736 dot image takes four times as long to download.
That's what happened with the images we looked at earlier. The original image was 5" wide by 8.6" high, and was scanned at 200 dots per inch (that's 1,720,000 dots of information). The web page is designed to display the image at 72 dots per inch in an area that is 1.7" wide by 2.9" high, so your browser actually displayed only 21,156 dots of information. The remaining 1,698,844 dots of information were downloaded, but completely ignored by your browser. If you have a 28.8 modem, you spent 66 seconds downloading information that was completely ignored.
As a web page designer, how do you keep things like this from happening? It is a 4 step process:
1) When you place a graphic image on a web page, take a look at the image's dimensions;
2) Open a graphics program and resize the image to the same dimensions used on your web page;
3) In the graphics program, make sure the image resolution is 72 dots per inch (some programs refer to this as "dpi", " pixels per inch" or "ppi")
4) Save the image as either a GIF format or a JPG format. If you use JPG format, set the image quality at 80%. Note: As a rule of thumb, use JPG for photos and photo-like images. Use GIF for line art.
If you want to go one step further, you can find a GIF or JPG optimizing program and process your images through them. I use Macromedia's "Fireworks" to process mine, but there are several free graphics optimizing services on the Internet - just do a search for "free graphics optimize". The optimizing programs compress your images a bit more than the standard JPG or GIF formats, sometimes reducing the file size by 10% or more without any noticeable loss of image quality.
If you're going to be scanning images for your web page, you might want to take a look at the scanning overview I put together for folks submitting class yearbook pictures to wyhs.org. Click here to go to the scanning overview.
Rob Fish
E-mail: robfish@wyhs.org
Crass Commercial Message: If you found this page to be helpful (heck, even if you didn't find it to be helpful), please take a look at our web page about large magnetic-backed dry-erase planning calendars and consider buying one or more. You'll find it at http://www.ccreations.com/planning.htm . The planning calendars are 10" tall by 16" wide, will look great on your refrigerator, and will help keep you and your family organized.
Here's a link to our "Team" page, showing who's helping out with what.