Web Page Images – Which Format to Use

Many media specialists also act as the webmaster for their school web site. Some have web design training, some do not, but I think all can benefit from understanding the types of image formats available and when to use each type.

Before tackling the image file formats, you must first decide how you will edit images and make them ready for a web site. First, there are free options for both Windows and Mac computers.

On a Windows computer, I recommend skipping the cumbersome features of Microsoft Paint and Microsoft Office Picture Manager. Instead, take advantage of a fast, free option that is an enhancement from Microsoft for Windows XP as part of the Microsoft PowerToys line of programs. The Image Resizer adds an option to resize an image in a web-ready format by simply right-clicking any image file.

On a Mac, the Preview and iPhoto applications have the features needed to crop, resize, and save images in a web-ready format, but the features are limited.

Rather than limiting yourself to resizing and cropping images, I recommend investing in an image-editing program like Adobe Photoshop Elements or the full version of Adobe Photoshop. If you go to the Adobe Education web site, you can take advantage of the education discount. I find the slimmer Elements version is more than enough for web site images. Not only will you be able to save images for the web, you’ll be able to crop, edit, add text, and transform the images as needed.

Now for the meat of the discussion…

The two main types of images on web sites are GIF (.gif) and JPEG (.jpg) files. Each image is made up of a series of pixels of different colors. GIF files have one value per pixel to make up a whole image. JPEG files compress the image to make the image smaller at the expense of reducing the image quality.

The rules:

Rule 1: Save images that include text as a GIF image file.

The Reason: If you compress an image that is made up of text, what tends to happen is that “blobs” of color appear around the letters. Rather than just keeping one consistent color, the compression causes artifacts around the letters that look blurry. Saving the image as a GIF file prevents these artifacts from appearing because each pixel is given a precise value. Although the differences between these JPEG and GIF images may be subtle, enlarging both shows the issue more clearly.

JPEG Image Enlarged to Show Detail

JPEG Image Enlarged to Show Detail

GIF Image Enlarged to Show Detail

GIF Image Enlarged to Show Detail (Preferred for Text Images)

Rule 2: Save photographs as JPEG image files.

The Reason: Photographs saved as JPEG images appear more crisp and colorful than a GIF image does while reducing the file size to make the image ready for a web site.

GIF Image

GIF Image

JPEG Image

JPEG Image (Preferred for Photographic Images)

Rule 3: Never save a JPEG file over and over again.

The Reason: Each time you save a JPEG file, the image is compressed. The more this happens, the worse the image becomes.

Rule 4: Save JPEG files between 60% and 80% compression.

The Reason: This level of compression is normally not noticeable and keeps the file size small enough to load quickly.

Rule 5: Resize your image to only the size you need on the web page.

The Reason: This rule is affected by two properties of the image: the image dimensions and the image resolution. Digital cameras are typically the cause of large images on web pages. Digital cameras can take photos with large dimensions at high resolutions for printing. To prepare a photo for a web site, you should take two steps that often take place at the same time:

1. Change the resolution down to 72 dots per inch (dpi). 72 dpi is the resolution accepted as a resolution suitable for computer monitors. Since the images are made for viewing more than printing, a lower resolution provides a smaller file size.

2. Resize the image to the size it will be shown on the web page. To give you an idea, the photos above are 400 pixels wide while an image from a digital camera could be 3000 pixels wide. You can add an image from a digital camera to a web page and let the web page resize the image, but why waste time loading a highly detailed image just to reduce its size? Changing the dimensions before placing an image on a web page prevents wasting time loading images.

A last word…
If you invest in an image-editing program and follow these rules, your web site images will be good-looking while your web site will load quickly for your visitors.

Craig Coleman
Media Specialist, Mundy’s Mill Middle School, Clayton County, Georgia
Clayton County Public Schools 2008 Media Specialist of the Year

About Craig Coleman

I am a middle school media specialist in Clayton County, Georgia.

Posted on September 3, 2008, in Technology. Bookmark the permalink. 2 Comments.

  1. Thanks for all of the hard work on this web site. Gloria takes pleasure in participating in investigations and it’s really easy to see why. A lot of people notice all concerning the compelling tactic you present effective solutions on your web blog and in addition encourage response from other individuals on the topic while our princess is certainly discovering a lot of things. Have fun with the remaining portion of the year. You’re performing a tremendous job.

  2. LCD monitors are the de factor standard these days because they do not consume too much electricity-~*

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: