1. Save Your Graphics with the "Save for Web & Devices" Command
2. Consider Using Web-safe Colors
Web-safe colors will display correctly in most browsers and on most monitors, ensuring your website looks the same no matter where it’s viewed.The two easiest ways to guarantee that the colors you use are web-safe are as follows.
"Only Web Colors" Option
In the Color Picker dialog window, check the "Only Web Colors" option located at the bottom-left corner. This will limit the colors being displayed in the window to just web-safe colors.
Convert a Color to a Web-safe Color
Convert any color into the closest web-safe color by clicking on the little cube in the Color Picker (next to the "Current" and "New" color boxes).
3. Consider Using the "Progressive Scan" Option for JPG
The JPG file format is ideal for photographic and high-resolution images. Depending on your projected audience, a progressive scan JPG can be the way to go, as the image will gradually render as the site loads (though on modern broadband Internet connections, this type of wait time is rarely an issue). This allows the user the ability to quickly see the image before it fully downloads, making the web page feel more responsive.
4. Save Graphics with Transparency as PNGs
The PNG image format is great for images that need to be rendered with transparency.
PNG transparency is supported in most mainstream browsers but watch out if you find yourself having to cater to IE6: parts of your PNG that are meant to be transparent will show up gray. There are workarounds to avoid this issue (e.g., IE PNG Fix JavaScript library) but they can be a hassle to implement.
For more information on PNGs, read the Web Designer’s Guide to PNG Image Format.
5. Save Animated Graphics as GIFs
The GIF image format, while now mostly replaced with PNG, is still useful for one thing. While they are noticeably grainier than PNG and JPG files, one important feature of the GIF image format is its ability to be animated.
While there is an extension of the PNG image format called APNG (which stands for Animated Portable Network Graphics), it lacks browser support.
If you’re choosing between PNG and GIF, it’s usually a good idea choose PNG unless the image is to be animated.
6. Pay Attention to the "Download Time" Information
It’s vital to make sure that a site loads quickly and looks good, which is why saving and optimizing your graphics is important. Below, see what a simple change in a file-saving option can do to an image’s file size.JPEG at Maximum Quality
JPEG at Low Quality
A good practice to follow is to lower the quality until you visibly notice degradation in image quality.
When you’re optimizing your images, always pay attention to the Download Time, which is displayed on the lower-left corner of the Save for Web & Devices dialog window. Below, you can see that the image being saved will take approximately 2 seconds to download on a DSL Internet connection at its current settings.
