Using Thumbnails to Speed Up Your Page


Adding pictures to a Web page increases the page's load time. Because Web surfers' annoyance levels rise with every second they must wait for a page to appear on-screen, you're wise to limit the number of pictures to keep the site loading fast.

What if your site relies on pictures? Suppose that you're building an online catalog or a Web-based art gallery. For these sites, the pictures are the main attraction. Are you (and your visitors) doomed to a slow-moving site?

Thankfully, no. Your salvation is a thumbnail, a tiny version of the picture that you want to display in your page. Because a small picture loads faster than a big picture, a thumbnail takes only moments to appear on-screen. The thumbnail is hyperlinked to the full-size picture, so if visitors want to see more detail, they can click the thumbnail. (Presumably, they're willing to wait a few moments for the full-size version to appear.)

Thumbnails are ideal for graphics-heavy sites because visitors wait only for the pictures they really want to see. Furthermore, you can insert several thumbnails into a page and still keep the load time minimal.

Tip 

Keep in mind that a page with bunches of pictures, no matter what their size, slows down the page's loading time. If necessary, break hefty pages into several more sparsely filled pages.

In Expression Web, thumbnails take only moments to create by following these steps:

  1. In the page, insert the picture that you want to turn into a thumbnail.

  2. image from book Click the picture, and then, on the Pictures toolbar, click the Auto Thumbnail button.

    Note 

    If the Auto Thumbnail button appears dimmed, you cannot use the selected picture as a thumbnail. Expression Web gives you the thumbs down on the Thumbnail option in the following cases:

    • The picture is already hyperlinked.

    • The picture's original dimensions are smaller than the thumbnail.

    • The picture is an image map. (We introduce you to image maps in Chapter 4.)

    After you click the Auto Thumbnail button, the picture shrinks, and a colorful border appears around the picture, indicating that it is now a graphical hyperlink.

  3. To see the thumbnail in action, save your changes, preview the page in a browser (we tell you how in Chapter 2), and click the thumbnail.

    When you save the page, the Save Embedded Files dialog box appears, suggesting a name for the thumbnail picture file, like this: barn_small. jpg. Click OK to save the files. We explain how to use this dialog box earlier in this chapter, in the section "Adding a picture from another application or location."

You can control the dimensions, the border thickness, and the bevel setting that Expression Web uses to create thumbnails. To access the Expression Web thumbnail settings, choose Tools image from book Page Editor Options to display the Page Editor Options dialog box. In the dialog box, click the Auto Thumbnail tab.

Tip 

If you don't like the thumbnail pictures that Expression Web creates, turn to your graphics program. Many graphics programs have built-in features for creating and saving thumbnails for Web pages.

GLANCE AT THE CODE 

Here's what the code for a thumbnail picture looks like:

 <a href="images/barn.jpg"> <img alt="old barn" src="/books/1/178/1/html/2/images/barn_small.jpg"            width="100" height="66"  /><!--            MSComment="autothumbnail" xthumbnail-orig-            image="file:///C:/Documents and Settings/My            Name/My Documents/My Web            Sites/travelsite/images/barn.jpg" --></a> 

Remember that a picture on a Web page is nothing more than a reference to the picture file. So, when Expression Web creates a thumbnail, it replaces the original img link to the picture file with a hyperlink to it: <a href=“images/ barn.jpg”>. (We show you the code for hyperlinks in Chapter 4.)

image from book
Photo gallery savvy

You can turn any ordinary Web page into an online photo gallery by using the Expression Web Auto Thumbnail feature to create miniatures from your masterpieces that link to the real photo. Also, many graphics programs have features for creating Web photo gallery pages.

If you don't want to do it yourself, check out some of the great photo-archiving sites and software available on the Web. Here are a few favorites among Web designers: JAlbum (http://www.jalbum.net), Flickr (http://www.flickr.com), and Picasa (http://www.picasa.google.com/features/featuresshare.html).

If you have a site you built in FrontPage with a photo gallery created by the FrontPage Photo Gallery Web Component, don't worry. It still works in Expression Web. You just can't create any new photo galleries for it in Expression Web. (The code for the FrontPage Photo Gallery didn't measure up to the strict Expression Web code standards.)

image from book

The next line contains a new img tag pointing to the new, smaller picture file, complete with width and height dimensions (<img alt=“old barn” src= “images/barn_small.jpg” width=“100” height=“66”). Notice that class=“stylex means that Expression Web has written a style rule for the thumbnail that sets the border style (solid or dotted, for example) and the border width properties. If you scroll to the top of the page, you see this style rule:

 .stylex  {           border-style: solid;           border-width: 2px; } 

We show you how to rename automatically generated styles and change their properties in Chapter 7.

The next bit of information is enclosed in HTML comment tags: <!-- comment -->. If we were to translate this comment into English, it would go something like this: "I created an Auto Thumbnail version of this picture file, found at this location." Notice that the </a> closing tag comes at the end of all this information, completing the hyperlink code. Whew! Aren't you glad you didn't have to type all that into your code?



Microsoft Expression Web for Dummies
Microsoft Expression Web For Dummies
ISBN: 0470115092
EAN: 2147483647
Year: 2004
Pages: 142

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net