Whether you are creating a website to sell your products or simply showing off where you went on holiday to your friends, a picture's worth a thousand words. Including dozens of large images on a page, though, can make it feel cluttered and frustrate users; the solution is to display smaller versions of the images on your page and use a simple HTML code to link to the larger ones.
Other People Are Reading
Linking Large Images
The basic way to use HTML code to enlarge an image is simply to link to each large image using a smaller version of it, called a "thumbnail." When readers click on a thumbnail, the large image loads on their screen; to return to the previous page, they use their browser's "Back" button. This code makes use of the <a> and <img> HTML tags.
<a href="http://www.yoursite.com/largeimage.jpg"><img src="http://www.yoursite.com/smallimage.jpg"></a>
There are multiple benefits to linking large images through the use of thumbnails. Since the large images are not directly included in the website, each page loads faster, lowering the risk that readers on slow connections will lose their patience and decide to visit a different website instead. Additionally, users are able to decide for themselves whether they want to load larger images rather than having it forced upon them; people who use connections with download limits, as well as those who pay for their connection based on the amount they download, won't run over their limit or have to pay extra if they don't want to.
The basic code relies on readers using their "Back" button to get back to where they were. This might confuse some users, who might close the window containing the large image and thus have no way to get back to the previous page. One alternative is to open each large image in another window, although this may similarly confuse users who don't notice the window opening and find themselves wondering why their "Back" button does not work. Another alternative is to create a HTML file for each larger image and link to this HTML file rather than directly to the image. This allows you to include a link leading back to the previous page with each image, making navigation simpler.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for