List of Topics

SfC Home > Web Design >

 

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:

This lesson will answer those questions.



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.


Organizing your work makes it easier to do


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


Questions and comments

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


Share this page

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

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

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

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Managing Web Site Images




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



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