Turn a Photo or Graphic Into a Thumbnail

A Simple Lesson

Hand on computer mouse
Hoxton/Tom Merton/Getty Images

Photos and graphics use a lot of server space. This can make Web pages load a lot slower. One option you have is to use thumbnails of your pictures instead. A thumbnail is a smaller version of the same picture. From it you link to the original picture.

When you use thumbnails you can fit more graphics on one page. Your reader can pick and choose from all the graphics on the page and decide which ones they want to see.

Creating a thumbnail is not hard and really doesn't take very long. The first thing you will need to do is download a photo or graphic editing program. I use Irfan View. It's free and simple to use. It's not as comprehensive as something like Paint Shop Pro or Photoshop but it's good enough for resizing, cropping and changing the way the colors look.

I'm going to use Irfan View for this lesson. The instructions are not that much different if you are using another program.

The first thing you are going to do is open the image that you want to resize. You do this by clicking "File," "Open," find the image on your computer and click the "Open" button.

With the image open in your graphic editing program you can now crop it or resize it. Cropping is what you do when you have an image that has more on it than what you want to use. Say you have a picture of you and another person but you only want to use the part with you on it and cut off the other person, that's cropping.

To crop it you first need to choose the area you want to keep. Place your mouse cursor at one corner of the area you want to keep, hold down the mouse button and drag your cursor to the opposite corner of the area. You will see a line being created around the area as you do this and a thin border around it when you're done.

Now click on "Edit," "Crop selection." The area you selected will be left and the rest of the picture will be gone. If you like what you see you will want to save the image at this point so you don't accidently close the program and lose the cropping. If you don't like it, click on "Edit," "Undo" and it will go right back to the way it was before you cropped it.

If you want to cut something out of the picture you can do this using the "Cut" feature. You can also add text to your picture at this point using "Insert text into selection". Both of these features are under the "Edit" menu. Remember to save the image after you make a change you like so you don't lose your work.

Now to create our thumbnail. Click on "Image," "Resize/Resample." A box will pop up that will allow you to resize your image. You can choose to resize your image by height and width or by percentage. For example, you can put in a width of 50 pixels or you can have it just make the image 10% of its original size. If you are creating the thumbnails to use as a photo gallery I suggest trying to make all your images close to the same size so they fit on the page better making nice straight rows or columns.

If your image seems to have lost some of its clearness when you resized it you can use the "Sharpen" feature in the "Image" menu. When you save the image after resizing it make sure you use the "Save as" feature, NOT the "Save" feature. You will want to give it a different, yet similar, name. If you just save it, it will overwrite your old image and you will loose the original. If your original was called "picture.jpg" then you could call the thumbnail "picture_th.jpg."

If your hosting service does not have a file upload program to help you easily upload pages and graphics to your Web site then you will need to have an FTP client to upload them. The hosting service you are with should give you the settings you need to put into the FTP client so you can upload the files.

I suggest uploading your graphic or photos to a folder named "graphics" or "photos" so you can keep them separate from your pages and so you can find them easier when you need them. I like organizing pages and graphics using different folders. Keeps your site nice and neat so you can find whatever you are looking for quickly and so you don't have long lists of files that you have to comb through when you need something.

You will also need to upload the thumbnail to your hosting service. Consider putting it in a separate folder possibly called "thumbnail."

Now you will need the address of your graphic. Example: Let's say you host your site at Geocities and your username is "mysite." Your main graphic is in a folder called "graphics" and named "graphics.jpg." The thumbnail is called "thumbnail.jpg" and is in a folder called "thumbnail." The address of your graphic would be http://www.geocities.com/mysite/graphics/graphics.jpg and the address of your thumbnail would be http://www.geocities.com/mysite/thumbnail/thumbnail.jpg.

All you need to do now is add a link to your thumbnail to your page and add a link to your graphic from your thumbnail. Some hosting service offer photo albums. All you have to do is follow their directions to add your photos to the pages.

If you prefer to use HTML to create your photo album you still don't have to start from scratch. Use a photo album template instead. Then all you have to do is add the links and you have a photo album.

If you are just linking to the graphic itself so that the main graphic will show up on your page then the code you need to use is this:

Text for Picture

Where you see graphic.jpg in this code you will change it to http://www.geocities.com/mysite/graphics/graphics.jpg or you can use the short form which looks like this /graphics/graphics.jpg. Then change where it says Text for Picture to whatever you want it to say under the picture.

If you are going to use the thumbnails and link to the graphic from there then the code you will use will be a little different:

Where you see http://address_of_graphic.gif you add the address of your thumbnail. Where you see http://address_of_page.com you add the address of your graphic. Your page will show your thumbnail but will link to your graphic directly. When someone clicks on the thumbnail for the graphic they will be taken to the original.

You will now be able to link to more graphics on one page without bogging down the server causing your page to load slowly. This is not your only option for creating a photo album but it does give you a way to add a whole bunch of pictures to one page so people don't have to click through pages and pages of photos. They will also be able to choose which photos they want to see in regular size instead of having to see all of them if they don't wish to.