Html coding to enlarge images for websites

Written by laurel storm Google
  • Share
  • Tweet
  • Share
  • Email

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>

Benefits

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.

Considerations

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.

Alternatives

Both CSS and JavaScript offer ways to enlarge images on the same page rather than force the user to navigate to a new one. The downside of this method is that it relies on including the large images within the page but keeping them hidden until the user interacts with the thumbnails. If a lot of images are on the page, this increases the page's loading time exponentially. This method also may not work for readers who visit your page using an older browser or from their smartphones.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.