Optimizing Design: Thumbnails

Optimizing Design: Thumbnails

thumbnail is a miniaturized version of a full-sized image. As a design element it can enable you to show many images without the overhead of full-sized versions.

One way to show several images on a page?without drowning your readers in download time?is to use thumbnails instead of full-sized images. For example, if you are creating an online gallery or photo album, consider displaying a series of thumbnails?you’ll give readers a sense of what is contained within, but readers will only need to wait a short while for the thumbnails to load. For example:

Before she was married, my grandmother traveled to Europe with her best friend. Here is a formal portrait of them in Berlin. Click the thumbnail to see the full-sized image.

You can be creative with thumbnails too?instead of a miniaturized version, you might clip a little piece out of the whole image:

See our favorite vacation photos!
We visited the island:

We hiked:

We played on the beach:

Or use thumbnails as a link to another HTML page with the larger image and some explanatory text. Or as a link to a video; the thumbnail would be one small still from the video. There are lots of creative ways to think about using small versions of images to represent links to larger uses of the image, so don’t be afraid to experiment and see what fits your design and your site’s needs. The trick is thinking beyond one use of one large image!

To create a thumbnail:

  1. Open the full-sized image in your graphics program.
  2. Reduce the image to your desired thumbnail dimensions or crop out a tiny tiny piece of the image that will represent the whole image.
  3. Save your reduced-size thumbnail image as a separate file.
  4. Use the thumbnail images in your page and make it a link to the larger image, page, or other image use. Click on this sample code for more detail about what it does.

Note: Do not create “lazy-thumbnails” by simply reducing the values of an IMG tag’s WIDTH and HEIGHT attributes! This totally defeats the point of using thumbnails, which is to reduce the image file sizes. Reducing WIDTH/HEIGHT to shrink an image doesn’t shrink its file size at all and you won’t save any download time.

Designs and Examples Using Thumbnails
Here’s a few examples of pages, from the Sightings archive, that make nice use of thumbnail images:

Newsphotos uses thumbnails as catalog device. Click a thumbnail and you’ll see a watermarked larger version, with ordering info.

PBS brings us American Quilts and the thumbnail is part of the gallery presentation. And check out the individual quilter’s sites for more samples of good uses of thumbnails.

CalPhotos, done by UC Berkley, makes good use of thumbnails on its results pages.

Share the Post:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as