Organizing images on your web space

Usually, web developers keep image files in a separate folder, or folders, on the web server. The number of image files that make up a website can become quite numerous. We'll follow this model and create a folder that is a sub-folder of our "website" folder.

Open "My Documents" then enter your "website" folder as before. You should see that the folder contains only the file called "index" or "index.htm."

Right-click somewhere in the blank area and a context menu should appear. Left-click on "New" then Left-click on "Folder."

A new folder will be created, the name will be "New Folder" and it will be selected (usually means highlighted blue) and surrounded by a small border, meaning you can edit the name simply by typing a new one.

Type the name "images" then press "Enter" on your keyboard. You'll see that the folder is now named images. Now we have a place to put all of the images for the site. Later, when your site grows, you can add more folders such as this to help keep things organized.

Now we have to find the image we downloaded and move it to this folder. Either press the "Back" button or the "Up" button to return to the "My documents" folder.

Double click the "My Pictures" folder to enter it. You should now see the "us-flag.gif" image that we want.

Let's just have a quick look at the properties of this image. Right-click the image, then left-click "properties."

The properties window will appear. Notice the "Size" attribute. This is the size, in bytes, of the file; not the size, in pixels, of the image. Ultimately, this value will give you an idea of how quickly the image will be transferred when someone views the web page. A file with the size of 2.18KB (kilo bytes) should transfer rather quickly, even over a slow connection. In general, you want to keep your pictures small, generally under a few hundred KB. Refer to the discussion of image file size.

Now we want to copy this image to our the "images" folder. Press "OK" to close the properties window.

Right-click the image again, then left-click "copy."

Either press the "Back" button or the "Up" button to return to the "My documents" folder.

Double-click the "website" folder to enter it.

Double-click the "images" folder to enter it.

Right-click somewhere in the blank area and a context menu should appear. Left-click on "Paste."

Now we have the image where we want it.