How to Make Thumbnails Bigger on My Website
Thumbnails offer the website readers a preview of an image without having to load the whole file, giving them the option of clicking the thumbnail image if they wish to see the corresponding higher resolution image. Use them especially for websites with multiple images, such as family picture-sharing or photography-related websites. You can show thumbnail images in any size, keeping in mind the quality of the image with the lower resolution. Experiment with different resolutions and cropping to create a thumbnail that accurately depicts the subject of the image.
Other People Are Reading
Instructions
-
-
1
Open the image in your image editing software program. Save that image, "picture.jpg," as "picture1.jpg."
-
2
Crop the image, showing the part that best depicts the subject. Cropping is optional, but it helps make the file smaller. The smaller thumbnail file will load faster on the website.
-
-
3
Resize the image to a lower resolution. Most image editing software has the option in the Tools menu that will resize the image in relation to inches or pixels. Ideally, make the size the same as you want for your website. However, you can adjust that later.
-
4
Upload both the full image, "picture.jpg," and the smaller image, "picture1.jpg," to your server.
-
5
Edit your html file to include :
<a href="folder/picture.jpg" target="_blank"><img
src="folder/picture1.jpg" width="50" height="50" border="0"
alt="My Picture" align="bottom" /></a>
Substitute "folder" with the directory name in which you uploaded your images.
Substitute "picture.jpg" with your full, higher-resolution image name.
Substitute "picture1.jpg" with your lower-resolution thumbnail image name.
Substitute "My Picture" with a caption for your image that will display your link in case the reader can't display images.
-
6
Adjust the "width=" and "height=" to your desired size in pixels. Preview your website and experiment with these numbers until you reach the results you want.
-
1
Tips & Warnings
If you already have the images on your website and just wish to change their sizes, find the reference to your thumbnails in the html file and see Step 6 on adjusting the width and height.
Save a backup copy of your html file before making changes.
References
Resources
- Photo Credit help in business image by air from Fotolia.com
