Turn a Photo or Graphic Into a Thumbnail

Photos and graphics use a lot of server space. This can make web pages load a lot slower. One solution is to use thumbnails of your pictures instead. A thumbnail is a smaller version of an image that links to the larger original picture. You can fit more graphics on one page when you use thumbnails. Your reader can then pick and choose from all the images and decide which ones they want to see. We'll tell you what you need to create thumbnails and how to edit them.

Download Photo Editing Software

Creating a thumbnail isn't hard and doesn't take very long, but it does require a photo editing program. Luckily, Windows users already have a free one called Paint 3D. It's not as comprehensive as something like Paint Shop Pro or Photoshop but it's good enough for resizing, cropping, and adding some text.

We're going to use Paint 3D for this lesson. The instructions are not that much different if you're using another program.

Edit Your Pictures and Make the Thumbnail

You need to edit your images before you can turn them into thumbnails. Here's how:

Open the image you want to edit.
You can now crop the image or resize it. If you want your thumbnail to focus on a specific part of the photo, we suggest cropping. If you don't want to crop, skip to Step 5.
Select Crop. From here, you can select and drag the various dots to choose the area you want to crop. You can also choose one of the various pre-formatted sizes on the right-hand side.

The 16:9 option is particularly good to use if you're creating a thumbnail for a YouTube video.
Select Done to crop the image.

If you don't like the cropping, select Undo or press CTRL+Z to reverse it and try again.
If you want to add text to your image, select Text to add it. You can choose either 2D or 3D text, and choose from a variety of fonts, sizes, and colors.
To resize your image, select Canvas. Here, you can choose to resize your image by pixels 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're creating the thumbnails to use as a photo gallery, try to make all your images close to the same size so they fit on the page better and make nice straight rows or columns.

Make sure your thumbnail is at least 640 pixels wide and no larger than 2 MB.
If you like what you see, save the image, preferably as a new file. That way, you have a copy of the original, unedited image if you need it.

After Your Thumbnail Is Finished

If your hosting service doesn't have a program to help you easily upload pages and graphics to your website, you need an FTP client to upload them. The hosting service you're with should give you the settings you need to put into the FTP client so you can upload the files. Consider putting it in a separate folder—possibly called "Thumbnails."

Consider 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. This helps keep your site nice and neat so you can find whatever you're looking for quickly and so you don't have long lists of files to comb through when you need something.

Addressing Your Graphics and Photos

Now you need your graphic's address. 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 on your page and add a link to your graphic from your thumbnail. Some hosting services 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.

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're going to use the thumbnails and link to the graphic from there then the code you 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 shows your thumbnail but links to your graphic directly. When someone clicks on the thumbnail for the graphic, they are taken to the original.