The School for Champions is an educational website that shows you how to achieve your dreams.

Managing Website Images

by Ron Kurtus (revised 13 May 2007)

When a website increases in size, it is important think about a good way to manage the images you have. The first issue is the placement of the images. You should have specific locations for your image files. You also need a scheme for naming your images in order to help keep track of them. Finally, there is the issue of using the same image on several web pages that are not associated.

Questions you may have include:

Where should I put my images?
How should I name the images?
What if an image is used in multiple areas?

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Location of images

Some people put any images they have in their root directory. This is fine if there are only a few images. Once the number becomes great enough, you may want to put the images into their own directory—usually called IMAGES or GRAPHICS.

Although you can put all of your images in one main directory, it may be more effective to place them in various subdirectories—especially if you have distinct topics. This can also be part of an evolution of your web site.

Method used in this site

In the School for Champions website, we have a main IMAGES folder that contains images in the root directory web pages, as well as global images that may be used in pages throughout the website.

There are numbers folders in the site for the various subject matters. Each one of those folders has an IMAGES sub-folder that contains images files specific to that subject. This allows for a logical flow and an easy way to keep track of where images are for each subject.

Image file names

You should name your image files in a manner that you can readily keep track of them. Various organizations have different methods of naming their files. A good way to see how others name their images, is to go to the site, right-click on an image, and select Save Picture As.... You will then see their name for the file. (Obviously, don't bother to continue to save the file, unless you really want a copy of it.)

Washington Post example

For example, the online version of the Washington Post newspaper uses several ways of naming their image files.

They called their company logo wpLogo_250x42.jpg, which is a logical name including the image size (250px by 43px).

Their news pictures include an indication of their date, along with some sort of code indicating where they are or what department they belong to. Examples are hp5-12-07p.jpg and PH2007051101917.jpg. Both of these pictures were news items for May 12, 2007. This method of naming files allows them to sort pictures by date.

School for Champions method

After some iterations, the method of naming image files used by the School for Champions website is the name of the associated file plus descriptive words, separated by a dash. For example an image for the page ac_circuits.htm might be ac_circuits-wiring_diagram.gif. In this way, all the images related to the AC Circuits page in the Science folder are together and easily recognized.

At one time we simply named the files ac_circuits1.gif, ac_circuits2.gif, etc. But that became confusing if we wanted to add an image or change the order. Thus, we went to more descriptive names.

Images used in multiple areas

Suppose you are going to use the same image in more than one place.

Global

If it is a global image, perhaps referring to a logo or some other picture that could be related to the whole site, you can just place it in the IMAGES folder in your root directory. For example, the School for Champions logo is used in many pages throughout the site, so it is located in the root IMAGES folder.

Multiple

But if you use an image in two or more areas, and the image has a special relationship to that particular article, story or page, then you would be better off including versions in each sub-folder, along with a unique name.

For example, I may have a picture of a doctor in both the health and career sections of the site. Thus, in each IMAGE folder, I would have the image with a different name, such as: health_issues-doctor.jpg and medical_career-doctor.jpg.

Summary

It is important to effectively manage the images in your site. Have specific folders for your image files. Have a scheme for naming your images to help keep track of them. You can also use the same file in different folders and different names.

Answers to Readers' Questions

Organizing your work makes it easier to do

Resources

The following resources provide information on this subject:

Websites

Web Page Design Resources

Books

Top-rated books on Website Design

Miscellaneous

Mini-quiz to check your understanding

1. Why should you put image files in sub-folders according to subjects?

2. Would you need to include the date in your image file name?

3. Why would you duplicate a file and give it different names?

If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/web/image_mgmt.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Web Design topics

Managing Web Site Images

The School for Champions helps you become the type of person that can be can be called a Champion.