|
Tutorials
> How to Make the
Pieces > Work with Images >
Optimize Images
Optimizing Images for the Web
A Web page that downloads in a couple of seconds over a
cable modem or DSL line often takes much longer to view with a 28.8 kbps
modem. To avoid frustrating the visitors to your Web site, (1)
be aware of how fast your pages load at different connection speeds, and
(2) optimize your images for the Web.
You don't necessarily
need access to a 28.8 kbps modem to see how fast your Web page will download
on one. There are download speed previews available with most Web page
and graphic editing programs. The chart below shows you how to locate
these tools in Macromedia Dreamweaver, Microsoft FrontPage, and Adobe
Photoshop.
|
Macromedia
Dreamweaver
|
|
At the bottom
of your Dreamweaver Web page, see the K / sec area, shown
below as 4K / 2 sec.
These
numbers are the file size of your Web page and the number of seconds
it will take to download the page from a specified connection speed.
(From the Edit menu, choose Preferences, then select
Status Bar. Select the connection speed of 28.8 and check
Show Launcher in Status Bar.)
|
|
Microsoft
FrontPage
|
|
At the bottom
of your FrontPage Web page the timer icon shows the number of seconds
the page will take to download over a specified connection speed,
shown below as 2 seconds over 28.8. Click on the timer icon
to select a different speed.
If the status
bar is not visible, go to the Tools menu and select Options.
Click the General tab, and then check the Show status
bar box.
|
|
Adobe
Photoshop
|
|
When you select
Save for the Web from the File menu, you will be able
to see the download speed. At the bottom of the Save for the
Web window you can see the file size and downloading speed of
the image. Changing the image size, number of colors, or quality
will dramatically affect these numbers.
|
According to the help
menu in Dreamweaver, "A good guideline to use when checking download
times for a particular Web page is the eight-second rule. That is, most
users will not wait longer than eight seconds for a page to load fully."
To reach this eight-second
goal, limit the file size of your images and Web pages. The larger the
file size of a page, the longer it will take to download.
To reduce the file
size of an image:
1. Reduce the physical
size (dimensions) of the image.
Reduce the dimensions in an image editing program (like Photoshop), not
with a Web page editor (like Dreamweaver). The smaller the dimensions,
the smaller the file size.
2. Set the image
resolution to 72 pixels per inch.
Since computer screens display only about 72 pixels per inch, using a
resolution higher than this will make your file size unnecessarily large.
3. For GIF files,
try reducing the number of colors.
The fewer colors you use, the smaller the file size will be. Start with
256 colors, and reduce the number of colors until just before you notice
a difference in the image. Remember to save your original images separately!
Below, the mountain GIF was saved at five different color levels (note:
JPEG is a better file format for most photos). Which would you choose?
Click on your answer.
4. For JPEG files,
try adjusting the image quality.
The lower the quality, the smaller the file size will be. Start with the
maximum quality and reduce the image quality until just before you notice
a difference in the image. Remember to save your original images separately!
Below, the mountain JPEG was saved at five different quality levels. Which
would you choose? Click on your answer.
Now that you know
how to optimize images, take a look at the download speeds of any video
and animations on your Web site as well.
Print
and Download Versions:
Microsoft Word Format
Instructions
for Downloading and Viewing
Adobe
Acrobat Format
Get Free
Reader
|
