Image Thumbnails - CoreLangs.com

How to Thumbnails

Thumbnails are intended to give your readers a quick previews of images (small images) and each Image is linked to the full version of the real Image.

The basic idea of the Thumbnail is that you have to create a low quality version of a picture with smaller dimensions and when the user clicks this Thumbnail Image you should link this low quality image to higher quality image with real dimensions. By crating Thumbnail images you can reduce hugely the download time of a web page, so you can save visitors waiting time.

You can create a Thumbnail image link with the help of HTML link tag.

<a href="real-image.png" ><img src="thumbnail.png"><a>

In the above code we created a Thumbnail image link. When the user click the Thumbnail image link, the page will load the real image.

If you want to load your real image in a new browser window, you can code like this.

<a href="real-image.png"  target="_blank"><img src="thumbnail.png"><a>

In the above code we add a new attribute to html link , target=”_blank” . So when the user click on the Thumbnail image , a new browser window is open and shows your real image.

When you click on thumbnail image it will display real image in a new browser window.

HTML Source Code :

<html>
  <body >
    <a href="real-image.png"  target="_blank"><img src="thumbnail.png"/></a>
  </body>
</html>

You can use the same image for Thumbnail and Real Image by reduce the size of the Real Image for preview purpose.

<a href="real-image.png"  target="_blank">
<img src="real-image.png" height=50 width=50></a>