How to Display Thumbnails in HTML

If you want to display several images on one page, you can run into problems if the images are large because the amount of file space the images require to load may cause them to load on the page slowly. Replace slow-loading images by instead displaying thumbnails on the page. Including thumbnails allows Web users to scan photos quickly and then click on the desired image.

Instructions

1. Log in to your Web server.

2. Upload the first image you want to make into a thumbnail. The process you follow to upload images can vary greatly depending on which Web server you use. Generally speaking, click "Upload File" and select the image you want to upload to the server. Then click "Publish." Your server will provide you with a URL of the image. Copy this URL. It will look something like "http://www.yourwebsite.com/images/image1.jpg."

3. Click on the HTML page within your server that you want to display the thumbnail images.

4. Click on the page where you want the first thumbnail image to reside and insert the following code:

   <A HREF="http://www.yourwebsite.com/images/image1.jpg">

   <IMG HEIGHT=50 WIDTH=50 SRC="http://www.yourwebsite.com/images/image1.jpg"></A>

5. Replace "http://www.yourwebsite.com/images/image1.jpg" with the actual URL of the image you want to insert as a thumbnail.

6. Repeat Step 2 through Step 5 as many times as needed.

7. Click "Publish" to publish the HTML page.

References

• HTML Goodies: So You Want a Thumbnail Image, Huh?

Resources

• W3 Schools: HTML Tutorial