Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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


advertisement
Thumbnails
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">
    </a>

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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

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