Pictures and other graphics enhance the appearance of your site and provide information that cannot always be conveyed by text alone.
The first and most obvious tip for using graphics is that you should already know where you are going to put them. When you are creating a wireframe for your site, make sure that you add in areas where pictures or other graphics are going to go. Avoid using image attributes to change the size of your pictures: this will greatly deform the images and will not change the actual size of the file. (In general, you are going to want to have the smallest files sizes possible, with the clearest image.) Always resize your pictures or other graphics using a photo editor such as Photoshop.
Tips for Optimizing GIFs
- Reduce colors: since GIFs work best with flat colors and contrast it is possible to reduce the number of colors without affecting the image.
- Reduce dithering: dithering is the pattern you see when the palette is trying to approximate a color that is not actually present.
- Don’t use gradients or blended colors in your GIFs in the first place.
Tips for Optimizing JPEGs
- Compress the image as much as possible, without losing the image.
- Avoid detail. This means that where possible, selectively blur the image.
- Avoid flat colors. When JPEGs are compressed flat colors will tend to warp.
Tips for Optimising PNGs
- Avoid using PNG-24. They are good for preserving quality in an image, but JPEGs will generally have a smaller file size.
- PNG-8s are similar to GIFs, and the strategies for GIFs will apply to PNG-8s.
As a final tip, make sure that you have the right to use the picture or graphic. That means either using your own, getting permission from, and crediting the person who originally created the image or using images or other graphics from a site where you can get stock images. Some sites where you can get stock images include Flickr Creative Commons, Getty Images and Morgue File
Comments