Creating and Optimizing Web Graphics

Optimize PNG files

The most important thing to keep in mind when creating images for the Web is that you want to optimize your images to make your file sizes as small as possible so that they download as quickly as possible. Just be careful, if you reduce the colors in an image too far, you can loose detail, as you see in the fourth image above.

How you optimize an image depends on whether you want to save it as a JPEG, PNG or GIF. The bottom line is this: No matter what program, format, or optimization technique you choose, your biggest challenge is finding the best balance between small file size and good image quality.

Essentially, the more you optimize, the faster the image will download, but the compression and color reduction techniques used to optimize images can make them look terrible if you go too far.

Remember: As a general rule, do any editing, such as resizing, adjusting contrast, retouching, or combining images before you reduce their size or optimize them because you want to work with the highest resolution possible when you’re editing.

Here are the steps you should follow to optimize images:

Choose the best format for your image: JPEG, PNG, or GIF (Tip: Save photos as JPEGs, cartoons and line art at PNG files)
Change image resolution and resize graphics before you optimize
Optimize JPEGs with Photoshop's Save for Web feature
Optimize GIF and PNG files with Photoshop's Save for Web feature

How small is small enough?

Once you learn how to optimize GIFs and JPEGs, you may ask, “How small is small enough?” You want your photos and other images to load fast, but you also want them to look good...

The answer is mostly subjective, but the following points are good to remember:

The larger your graphics files, the longer people have to wait for them to download before they can see them. You may have the most beautiful picture of Mount Fuji on the front page of your Web site, but if it takes forever to download, most people aren’t patient enough to wait to see it.
When you build pages with multiple graphics, you have to consider the cumulative download time of all the graphics on the page. Even if each individual image is a small file size, they can add up. Unlike most things in life, smaller is definitely better on the Web.
Most Web pros consider anything from about 75K to 150K a good maximum cumulative size for all the elements on a given page. With the increasing popularity of DSL and cable modems, many Web sites are starting to become a bit more graphics heavy and go beyond that size limit. However, anything over 150K is pushing the limit, especially if you expect people with dialup modems (56K and under) or those surfing on mobile phones to stick around long enough to view your pages.

Note: To make determining the total file size of the images on your page easy, Dreamweaver includes this information in the status bar at the bottom of the Document window. In the small text at the bottom of any Web page open in Dreamweaver, the status bar shows that the total size of all the images, text, and code on the page and how long it will take to download at the connection at the speed specified in Dreamweaver’s preferences.