How to Create Thumbnail Images

A thumbnail is a small representation of a large image. This kind of image is mainly used by websites that contain many pictures to make page downloads easier and faster. Our snippet will help you create thumbnail images, including ones that act as links.

It’s straightforward, so let’s start to create one together.

Create HTML

Use the <img> tag, choosing the src attribute to specify the image you need.
Set the width attribute to define the width of your image. (Note: For responsive thumbnails, it’s better to set the width in CSS to prevent aspect ratio distortion. Also, loading full-resolution images for thumbnails hurts performance; consider using server-side resized images or the srcset attribute.)
Use the alt attribute to define alternate text for the image.

HTML structure for a thumbnail image

<img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200" />

Add CSS

Add borders to your image with the help of the border property.
Use the padding property to create space on all sides of the image.

CSS styling for borders and padding

img {
  display: inline-block;
  border: 2px solid #C0C0C0;
  padding: 5px;
}

Let’s bring together the parts of our code.

Example of creating a thumbnail image:

Complete example: creating a thumbnail image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        display: inline-block;
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200" />
  </body>
</html>

Try it Yourself »

Result

Making the thumbnail image a link

Use the CSS :hover pseudo-class to select and style the link.
Set the CSS box-shadow property to add a shadow around the image, specifying its color and size.

Adding a hover effect with box-shadow

img:hover {
  box-shadow: 5px 4px 10px #8B0000;
}

Wrap the image in an <a> tag to add a hyperlink, and set the <kbd class="highlighted">_blank</kbd> value for the target attribute to open the link in a new window. (Tip: For better accessibility, ensure the alt text describes the image or the link destination.)

Wrapping the image in a link

<a target="_blank" href="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg">
  <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200">
</a>

Now, we can try some examples.

Example of making the thumbnail image a link opening on a new page:

Example: thumbnail link opening in a new tab

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        display: inline-block;
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
      img:hover {
        box-shadow: 5px 4px 10px #8B0000;
      }
    </style>
  </head>
  <body>
    <a target="_blank" href="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg">
      <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200" />
    </a>
  </body>
</html>

Try it Yourself »

Instead of the <kbd class="highlighted">_blank</kbd> value of the target attribute, you can use other values too, which will open the link of the image in different ways.

Example of making the thumbnail image a link opening on the same page:

Example: thumbnail link opening in the same tab

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        display: inline-block;
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
      img:hover {
        box-shadow: 0px 4px 5px #FFD700;
      }
    </style>
  </head>
  <body>
    <a target="_self" href="https://www.groovypost.com/wp-content/uploads/2019/07/sunset-beach-phone-photos-featured.jpg">
      <img src="https://www.groovypost.com/wp-content/uploads/2019/07/sunset-beach-phone-photos-featured.jpg" alt="photo" width="300" />
    </a>
  </body>
</html>

Try it Yourself »