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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


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