Styles and Formating

Image Formatting

Using images on the web is much different than using them in print pieces. The main difference is that every image you include on your website must be downloaded by the user. For this reason, images on the web must be sized appropiatly and optimized to be file-size efficient.

Optimizing an ImageExample

To optimize an image, you will need to have image-editing software installed on your computer. Some options include Adobe PhotoShop, Adobe FireWorks, and GIMP (GNU Image Manipulation Program). GIMP is a good free alternative to the Adobe products. No matter which program you use, here are a few principles to master:

Size the image appropiatly

Images for use in print materials generally have a resolution of around 300 dpi (dots per inch), however, images are viewed online at 72 ppi (pixels per inch). If you were to upload a 300 dpi image to the web, this would waste bandwidth resources and take the user much longer to download. For this reason, the first thing you should do when preparing your image for the web is decrease the resolution to 72 ppi.

After the resolution has been adjusted, the dimensions must be altered. Resize the image to the exact dimensions you plan to use on the web. If you size the image too large and scale it down in the CMS, you will be wasting bandwidth by transmitting an image larger than you needed to your users. For example, the image to the right is 250 pixels wide and 375 pixels high. I am displaying it at exactly the same size, so there was no wasted bandwidth.

Use the right kind of compression for the image

The two most popular image types used on the web are JPG and GIF, both of which are used for different types of images. The goal in image compression is to create a balance between image quality and image file-size. Try to keep an average size image (right) under 40K.

  • Use JPG compression when the image is a photograph or contains gradient color. When saving an image as a JPG, start with the quality at around 50%. Increase or decrease the quality until you reach a happy medium between image quality and file-size. The above image was saved at 50% compression, which resulted in a 29K file.
  • GIF exampleUse GIF compression when the image has large areas of solid color; for example, most illustrations and graphs compress well as GIFs. Instead of using a percentage of quality like JPG compression, GIF compression is based on number of colors. Start out with your image at 32 colors. Increase or decrease the number of colors until you reach a happy medium between image quality and file-size. The image to the right was saved with 16 colors, resulting in a 4K file.

If you need more detailed instructions on how to save images for the web, there are many great tutorials on the web. Including Optimizing Images for the Web with PhotoShop or Getting Images out of Gimp.

Some more tips

  • Make sure your images are in the RGB color mode as opposed to CMYK.
  • Bigger is not always better.

Placing the image in the CMS

Similar to plain paragraph text, images do not need any styles to be applied to them in the CMS aside from alignment. In the image's properties under "Alignment," choose an alignment of none (""), "left" or "right." The other alignment options, such as "middle," are only useful if your image is within an HTML table. If your image is not within a table, please only use alignments of none, left or right. The template's stylesheet will take care of the rest.