HTML Coding to Enlarge Images for Websites


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.

Linking Large Images


  • 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.


  • 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.

Related Searches


Promoted By Zergnet


Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!