Image Optimization for Web Pages
This tutorial will teach you how to edit and optimize images for use on the web. There are a number of different file-formats that can be used for graphics on the web. In this tutorial, we will focus on .jpg, .gif, and .png. There are also a number of different programs that can be used to manipulate images. We recommend using Picnik, a free and simple online application for resizing and cropping photos.
Image Types
There are a number of different image types that can be used for the web, and each has their use and purpose. All the image formats listed below are compressed formats, meaning the file size is reduced at a cost of quality. Usually the quality loss is not noticible enough to cause concern for use on the web.
- Jpeg Images (.jpg,.jpeg) - Jpegs are a very common file-type for saving photographic image and complex graphics.
- GIF (.gif) - GIFs are popular for images with a low-number of varying colors, such as logos and other sharp-edged graphics.
- PNG (.png) - PNGs are an improved alternative to GIF files. They have a higher color depth, greater compression, and allow transparency.
Image Sizing
It is important to size images correctly for the web to save storage space, increase speed of downloading, and other reasons. Image sizes are mesaured in pixels, which are single points that compose the whole image. The best way to understand sizing is to see some sample sizes of images measured in pixels. These image sizes are examples and not sizing rules you must follow. They provide a range of values to use when sizing images.
200x134 pixels:
This size is useful for thumbnail pictures or pictures in a listing of faculty memebers.
400x267 pixels:
600x400 pixels:
IMPORTANT:
It is important to size images properly before uploading to the web. A common mistakes is to upload an image and resize it in the content management system. Resizing images in the content management system does nothing to the file-size. Instead it creates more work for the browser to scale the image on the fly and display it smaller. It can also take longer for the user to download, especially if they are on a slow internet connection. Please view the link below to understand some reasons why you should resize images outside of the content management system.
Why you should not resize images in the content management system.
This page last updated Dec 29, 2011