Turn a Photo or Graphic Into a Thumbnail

Hand on computer mouse

Hoxton / Tom Merton / Getty Images

PRODUCT DISCLOSURE $

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 graphics editing program. One of these great programs is 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.

Edit Your Pictures

We're 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 then find the image on your computer you'd like and after selecting it, click Open.

With the image open in your graphics 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 accidentally 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.

Create a Thumbnail

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 lose 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 website 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.

We 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. We like organizing pages and graphics using different folders. This helps keep 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 "thumbnails."

Addressing Your Graphics and Photos

Now you will need the address of your graphic. For 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.

Text for Picture

Where you see graphic.jpg in the 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.