When you create a great web page, the first thing that people will notice is if the page loads quickly or slowly. The simplest way to make sure that your page loads quickly is to create small images.
Here are three ways to make sure that your images are small and download fast.
Keep the Dimensions Small—Crop Your Images
Professional photographers learn to take photos of exactly what they want in the shot, with no wasted space. However, it is very common to see a scanned photo on the web with one person and a huge expanse of nothing all around them. This makes for an unnecessarily large photo.
For example: The first photo of raccoons swarming into our campsite has a lot of additional scenery around them that doesn't need to be there. If this were a print photo there would be nothing I could do except wish that I was a better photographer under pressure (there were a lot more than three raccoons around). But with a graphics program only the raccoons need to be in the photo (as in the second photo).
How to Crop Images in Photoshop
Use as Few Colors as Possible
When you create GIF images, you are given the choice of what palette to save with your images. Most people are aware of the color-safe palette. This palette has 216 colors in it that most monitors can display correctly. But what you may not realize is that if you have a three color image, by saving your GIF with just three colors, you remove 213 additional colors in your palette that your image does not use.
By leaving your GIF palette with only the colors the image actually uses, this keeps the file size down. You should also look at your palette and see if there are colors that could be combined to reduce the palette size. Often you can remove similar colors and not affect how the image looks at all.
One way to fix this is to convert your GIF images to a limited palette, such as the color-safe palette, and then convert it again to the exact palette of the image. This way you will be sure that your image is browser safe, and only uses the minimum number of colors.Web-based Image Tools for Editing GIFs
Put Your Images Through an Optimization Program
There are lots of programs that will help you optimize your images. Photoshop has a “Save for Web and Devices” option that can help you choose the image type (GIF, JPG, PNG) and see what size the image will display at. This way you can compare how the image looks as well as how big it is. So you can get the image that looks best at the smallest size.
How to Use the Photoshop Save for Web Tool
If you don't have Photoshop, there are also lots of free and inexpensive software tools you can use to optimize your images.
You can find out more about speed and optimizing your web pages in my article How to Speed Up Web Pages or my Optimizing Images Links.
