Browse DevX
Sign up for e-mail newsletters from DevX


Reference Guide: Graphics Technical Options and Decisions : Page 12

The decisions you make about file format, compression, palette, resolution, and bit depth effect both quality and download speeds




Building the Right Environment to Support AI, Machine Learning and Deep Learning

A thumbnail is a miniaturized version of a full-sized image.

The use of thumbnails isn't really a technical decision, but we include it here because using many large images on a single page is one of the common mistakes people make when first using graphics.

One way to show several images on a page—without drowing your readers in download time—is to use thumbnails instead. For example, if you are creating an online gallery or photo album, consider displaying thumbnails instead of the full-sized images. Rather than waiting forever for all of the large image files to load, the user will only need to wait a short while for the thumbnails to load. Then he/she can click on a specific thumbnail to see its full-sized version. For example:

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

To create a thumbnail:

  1. Open the full-sized image in your graphics program.

  2. Reduce the image to your desired thumbnail dimensions.

  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. Here's the code to that example above. Click on it for more detail about what it does.

    <a href="../../images/alicew.jpg">
    <img src="../../images/thumb.jpg" width="45" height="50" border="0">

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.

Thanks for your registration, follow us on our social networks to keep up-to-date