After you’ve created a beautiful design for your website, the next step is to make sure that you prepare your image files appropriately. There are a few considerations to making sure that your images are prepared well:
File size: The file size of your images used to be a source of concern. Ages ago, when the Internet was relatively new, most website visitors only had dial-up connections. Since these were so slow, it was very important to make your website images as small as possible – and, this was sometimes accomplished by compressing color palettes to include a very minimal number of colors, or by using the fewest number of images possible on your website.
Luckily, DSL and cable modems have made browsing the Internet much faster. Paring your images down to the smallest possible size is no longer absolutely necessary. But, you still should make sure that your files are somewhat small in size, so that they are still quick-loading for any visitors who may still be using dial-up connections.
No rasterizing: Rasterizing is an effect that you can sometimes get on website graphics when you reduce the number of colors in the color palette. The image will separate out into distinct dots of color, which results in the image looking grainy. Make sure that your images are saved for the web with enough colors in the color palette to make them look smooth.
File formats: There are two very common file formats that can be displayed in a web browser: GIF and JPEG.
- GIF images are best for artwork that has large areas of flat color – like a logo, a stripe of color or a vector image cartoon. Saving those files as GIFs will ensure that the large areas of color remain smooth and solid. GIF images allow for background transparency, which can allow you to place these images inside larger blocks of color and let the background color show through.
- GIF images allow you to reduce your file size by allowing you to choose the number of colors that will appear in the final image. It then compresses the image’s color palette down to the number of colors in that palette. It does this by choosing the most common colors in the image as the colors for the palette and then changing any additional colors into the closest color on the reduced palette. This can result in rasterizing.
- When you create a transparent background on a GIF image, there can sometimes be a halo effect of a background color (also called the Matte color in the “Save to web” palette in Photoshop). Make sure that this color value is set appropriately so that your image will look good on its’ background.
- JPEG images are best used for gradient images or photos because they can smoothly render the whole rainbow of color.
- JPEG images allow you to change the file size by adjusting the quality of the image on a sliding bar. You don’t have to use the highest quality (typically a 10) on the scale to get good results on the web. But, you also shouldn’t use a very low quality like a 2 or 3, either – it will make your image look chunky. An image quality between 6 and 8 typically works well for most web graphics.