Graphics and Links

Index:

  1. Some good online references
  2. URL creation rules to prevent broken links
  3. Graphic Images linked from an HTML page
  4. Different kinds of Links
  5. File names and extensions advice
  6. Style Consideration
  7. Advice on Images
  8. Image size versus printable size guideline
  9. The 4-GIF rule
  10. Adding white space with "spacer" GIFs
  11. Choosing GIF or JPEG and Optimization Advice
  12. Shareware and Free Graphics Compression Utilities
  13. Imbed Video Clips
  14. Adding Movies to Your Web Page

Some good online references:

Back to the Top

Follow URL creation rules to prevent broken links

Back to the Top

Graphic Images are linked from the HTML page

An inline image in a document. Use height and width to speed page loading.
<img src="URL_of_image.[gif|jpg]"   (use one or the other)
alt="text description of image for people using text only, or sight impaired using speech generator"
align="top|middle|bottom|left|right"   (use one only) (Note: you can move an image to the left or right on the Web page or control its vertical placement with the ALIGN property, but you cannot center it using the ALIGN attribute. align="center" isn't valid HTML. All browsers ignore align="center" when it's part of an IMG tag.)
width="#"   (be careful to preserve aspect ratio)
height="#"   (be careful to preserve aspect ratio)
border="#"   a frame around image, zero is default
hspace="#"   horizontal spacing from text and margin
vspace="#">   vertical spacing below/above text
(above, #=number of pixels.)

Note: align="left"|"right" is what commands text to wrap around image. Without it, the image separates the text. Use <br clear="all|left|right"> to stop text wrap around an image and start a new line.
Always include the alt=" " attribute. Alt should convey the function of the image, not necessarily its description. It helps people with disabilities know what the image is, and tells those who are using browsers with graphics turned off what they are missing. Some HTML validators require alt for every image.

Put an image inside an <a href> tag that uses target="[name|_blank]" to open the image in another window. It's good form to so advise in the image alt= tag that a new window will be opened. For example, you could link from a thumbnail to a high resolution image to avoid using bandwidth unnecessarily.

To display a smaller image but provide a link to larger one you could use the following code:
<a href="URL/LargeImage.jpg"><img src="URL/LargeImage.jpg" width="256" height="192"><br>click for full-size image</a>
width and height are variable, but use integral fractions.
A better solution is to resize a copy as SmallImage that is the size you want to display (e.g. a thumbnail) to reduce bandwidth requirement to preview the small image.
<a href="URL/LargeImage.jpg"><img src="URL/SmallImage.jpg" width="256" height="192"><br>click for full-size image</a>

A simple solution to centering an image on a page is to enclose the image inside a page element that CAN be aligned to the center - such as a paragraph or a DIV tag:
<p align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></p>
<div align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></div>
That solution works in all browsers, but you'll have to contend with the extra spaces that browsers automatically place above and below block-level tags. You'll have less control over page layout and display with this method. And both rely on a deprecated HTML tag or attribute.

Back to the Top

Different kinds of Links

Relative vs. Explicit (absolute path) URL link reference - Use relative paths within your own web site, but explicit (absolute) links for any URL external to your site. If you decide to have subdirectories, study the appropriate reference for relative links - they will cause you confusion and grief if not done correctly. Also, use the same folder layout on your hard drive as on your website, to insure relative links are correct.
<a href="[URL/filename.ext]">Link Description in Browser</a>
<a href="../otherdir/filename.ext]">Link Description in Browser</a>

A JavaScript bug in recent versions (5 and 6) of Internet Explorer may cause problems with JavaScript rollovers. When you use an absolute image path inside your JavaScript rollover code, these versions of Explorer ignore the cached copy and request the file from the browser each time it's needed. This problem only happens when you use an absolute image path to refer to the rollover image. If you use relative links for your rollover images, Explorer checks the cache and retrieves them without a problem.

Back to the Top

File names and extensions are case-sensitive, make sure your FTP program preserves case when it uploads your files. URL's are case sensitive after the domain (after .com .org .net etc.), so http://www.ct-sv.com/family = HTTP://WWW.CT-SV.COM/family, but not http://www.ct-sv.com/Family or http://www.ct-sv.com/FAMILY. Also, text.htm is different from text.html. An email address is usually not case sensitive, so RECIPIENT@DOMAIN.COM is the same as recipient@domain.com.

There is a program to check for broken links: Xenu's Link Sleuth (TM) that is free and fast. Another one is at Net Mechanic, but for large sites has a registration fee. Xenu's site lists even more.

Back to the Top

Style Consideration

When creating navigation links, be brief and to-the-point. Avoid wordiness. Don't make users read something like "click here to get to modems", the link should just say "modems". Sometimes showing the abbreviated URL is good, but sometimes is unnecessary. Note that Atomz and other search engines may not index the text inside tags, so sometimes it is good to have everything you want indexed and searchable to appear as text.
Choose words that convey exactly what is on the other end of the hyperlink. Cute or vague links don't work either. Users want to know exactly where they're going before they click a link. The link language should entice the reader to click, and the link itself should deliver on the promise.
Use labeled links, not directional ones. Directional terms such as back and up have little meaning to users who land smack in the middle of your carefully thought-out hierarchy. Use section names, page titles, and other content-revealing labels on navigational links.
The only exception is with linear presentation, where next and previous can be understood relatively easily, even by someone who didn't come from somewhere else in the section or site.
The link explanation is called a link title and is very easy to encode. For example, the HTML code for adding a link title is <a href="filename.ext" title="A full link explanation is here">. If you rest your cursor on the link, the words "A full link explanation is here" will pop up after about a second if you have a browser that supports link titles (many older versions don't, so don't count on it completely).
Having the title "A full link explanation is here" pop up when the user is thinking about what might be linked gives the user an indication of the type of information he or she can expected to get from following the link. Among other things, it makes it clear that the link is not a "mailto" link that will spawn an email message; and if it will spawn a new page, it can advise how to return to the current page.
A new page can be spawned by using target="name|_blank" inside the a href= tag. The _blank option generates a new page, so if you use multiple a href= tags, each will generate a new window. To cause multiple a href= tags to use the same window, use the same name in each reference. It's good form to warn users that this will happen, and that they can close the windows to return to the current page. Open an article at NetMechanic in a new window.

Back to the Top

Advice on Images

Understanding File Formats

What file format to use, when and how to save your images, and understanding the JPEG format

Why should you change the file format of your photos — usually from JPEG to TIFF, or JPEG to your photo editing application's proprietary format? Usually, to preserve image quality while editing, or to reduce file size for emailing or web posting.

Every time you edit and then re-save an image in JPEG format, it loses a little quality (depending upon how much compression is used in the re-saving, it's "lossy"). A few file formats, though, like TIFF and PSD, don't reduce resolution, they are "lossless". So if you need to edit a photo that was originally shot in JPEG format, you should typically save it in a lossless format before you start editing to preserve the image quality.

If you take most of your photos in your camera's RAW format (if your camera supports it, you probably should). But RAW files are huge and most people can't view them on their computer. So in order to share photos with friends, family, editors, or anyone else who needs a copy, you need to save the final, edited versions as JPEGs.

As you can see, there are some good reasons to occasionally change formats. Here's talk what everyone should know about how, when, and why to change a photo's file format.

File Format Myth

Let's dispel a popular misconception. You probably know that saving JPEG photos can reduce the image quality. Some people take that idea too far and worry that just viewing a JPEG can be hazardous as well.

Not true.

Just looking at a JPEG file doesn't affect its image quality. You can open the file in a photo editor, view it, and close it again without affecting quality—just don't make any changes and click the Save button. If you don't plan to edit an image, you can safely leave it in JPEG format forever and the image quality will never degrade.

Five Reasons to Change File Formats

There are many reasons to change file formats. Here are five of the most common:

  1. You want to edit a photo. If you just adjust the contrast and crop the image, any image quality loss will be almost imperceptible when you resave the photo in JPEG. But if you plan to make a number of changes to the photo and expect to save your changes several times, then you might want to convert the file to TIFF or PSD format first. Make all your changes in that lossless format, and then convert the final image back to JPEG at the end.
  2. You want to save space. If you have your camera configured to record your photos in RAW format, for example, you might want to save the final, edited versions of those images in JPEG to save hard disk space. You might want to archive the RAW images to CD or DVD for permanent storage, much like you used to save the negatives in case you needed anouther copy of the print, or want to do editing later.
  3. You need to share photos or post them on the Web. A camera's RAW format is great if , but it's not easy to share, and is much to big to email. Edit your RAW photos, and then save them as JPEGs so others can enjoy them.
  4. You need to convert an image from an unusual format. Every once in a while someone will send you a photo in an exotic file format like PCX, SFW, bitmap, or TGA. Thank goodness for applications that let you save that file as a JPEG. The free Irfanvue, on many club CDs, will display and convert from most known file formats, if you download and install the free plug-in.
  5. You want to keep your edits intact between editing sessions. If you use Adobe Photoshop Elements or Paint Shop Pro, for example, you can save your photos in their proprietary format to maintain individual layers, and not lose any quality during multiple saves. That way you can fine-tune your photo without starting over from scratch in every editing session.

    6. Changing File Formats

    Saving a photo in a different file format is simple. This is the Adobe Photoshop Elements method, but the procedure is almost exactly the same no matter what program you use.

    Open the photo in the image editor and then choose File, Save As from the main menu. In the Format drop-down menu, choose the file format you need. You'll see options for all the common formats, including TIFF and JPEG. Click OK to save the file.

    You will find that some formats have extra options you need to configure before the save is completed. For a JPEG file, for example, you need to specify how much compression to use. The more compression, the smaller the file will be, but the lower the visual quality. Standard advice is to always use the maximum quality (12 in Photoshop Elements).

    After saving the file, you'll have two copies: the original file, such as myfile.jpg, for instance, and one called myfile.tif. You can keep both copies or delete the older one, depending upon your needs.

    Of course, it can be difficult to tell the two files apart on the Windows desktop if your system is set to hide file extensions. When in doubt, right-click the file and choose Properties from the menu. Be sure to verify the extension before deleting a file.

    To more easily distinguish between files with the same name but different file formats, you can make file extensions visible in Windows. To do that in Windows Vista, open a folder and choose Organize, Search and Folder Options; in Windows XP, choose Tools, Folder Options. Click the View tab and then uncheck "Hide extensions for known file types."

    How to scale an image

  6. Don't try to use the img width="x" height="y" to control an image size. Instead, use an image editor to shrink or expand the image to the size required on the web page. Then use the img width="x" height="y" to define those values for browsers. Web designers generally plan for a screen size of 800 by 600 pixels as the most common denominator, which works for most monitors. To size an image for online display, make a copy of the finished image, and then change the size of the copied image to fit the screen. Set a size that will display the image without crowding out the browser controls or the rest of the Web page elements. For example, to size a picture to fit one-fourth of the total screen area of a 13-inch monitor set to 640 480 pixels, set the size at 320 pixels wide. Also remember that older computer monitors have a resolution of only 72 dots per inch (dpi) while newer monitors have a resolution of 96 dpi. So again, a high-resolution image does not necessarily mean a higher viewing quality on computer monitors.
  7. When shrinking an image, use an image editor that supports antialiasing, such as Photoshop or Paint Shop Pro. (Microsoft Paint--the image program built into Windows--does scaling, but it retains alias.) With antialiasing, the smaller version will still look like the original despite working with fewer pixels. In fact, scaling down is the easiest way to smooth out a jagged image.
  8. Add borders if you must, but keep them uniform between thumbnails so your pictures aren't overwhelmed. Save the image in JPEG format, with a quality setting of 60 to 80 percent.
  9. Resize/Shrink the image to your selected thumbnail size. Keep the sizes standard within the page. Aim for files that are smaller than 5K and go for a higher-quality setting for the thumbnail than for the full-size photo, because the thumbnail will have details affected by JPEG compression. Put an anchor tag around your image to link to the full-size pictures, like so: <a href="meatnpotatoes.html"><img src="meatsmall.jpg"></a>.

    10. Back to the Top

    Image size versus printable size guideline

    This is a basic guideline for printing photos at 300 dots per inch (dpi) from digital images. Read the full article at PCWorld for more guidance and tips

    Clearing the Air About DPI
    I'd like to find out how to take photos at 300 dpi. After I download my photos to my computer, they all report in at 72 dpi. So I'm guessing that if I save them at 300 dpi they will get too small to be useful.... or will they? Can you help clear the air about this?
    I'd love to, Alicia; this is one of my favorite pet peeves.
    Camera makers and software companies alike seem to love to confuse people about dots per inch (dpi) and digital photos. The reality is that dpi is essentially meaningless. There's no such thing as a 72 dpi or a 300 dpi photo--at least not as long as it's stored on your computer. Dots per inch only has meaning when you are about to print, because combining the pixel resolution of the photo with a dpi setting determines the final output size. So a 3000-by-2000-pixel photo (that's 6 megapixels) will be about 10 by 7 inches when printed at 300 dpi. If you print it at 200 dpi, the resulting print would be 15 by 10 inches in size.
    The moral of the story is that you shouldn't worry about dots per inch, even if a program assigns an arbitrary dpi value to a photo. On the computer, it doesn't mean anything. It's a tool for specifying print size. The only thing that matters on the computer is pixels.

    Back to the Top

    The 4-GIF rule

    Most Web servers call up four GIFs at a time, so it's a good idea to limit GIFs to fewer than four per page. By avoiding multiple server calls for GIFs, your pages will load much faster.

    Back to the Top

    Adding white space with "spacer" GIFs

    When using spacer GIFs to add white space around your type or setting table cell widths, adopt the method preferred by most Web designers: incorporate the vspace and hspace attributes.
    For example, rather than laying out your spacer GIFs like this:
        <img src="spacer.gif" width="150" height="100" alt="don't use this style">
    place them this preferred way:
        <img src="spacer.gif" width="2" height="2" hspace="74" vspace="49">
    The second one yields a cleaner, faster page. Use width="2" height="2", then use half the desired width minus one for hspace, and half the desired height minus one for vspace.

    Back to the Top

    Choosing GIF or JPEG and Optimization Advice

    The two types of image formats used by most Web browsers are GIF (CompuServe Graphics Interchange Format, .GIF extension) and JPEG (Joint Photographic Experts Group, .JPG extension). The JPEG format works best for photos and continuous tone images. The GIF format works best for inline images, line art drawings, most logos, contains transparent areas, needs to be animated, and screen dumps (max 256 color palette). Both formats should use a resolution of 72 dpi (dots per inch) and use RGB (red-green-blue) color mapping. However, there's just no easy, universally true answer that's correct 100% of the time. There are some general rules of thumb that can help in selecting a file format, but the only true test is experimentation. Try the image in both formats, and select the one that provides the smallest image without significantly compromising image quality. Shareware programs like Paint Shop Pro, L-View Pro and Graphics Workshop accomplish the task very nicely. For scanned images or photographs, for images that will appear as thumbnails, 100-by-75 dpi should be sufficient. For full-sized images, try 640-by-480 dpi.

    If you're trying to optimize a JPEG, experiment with different compression ratios. Typically, programs will talk about JPEG compression as "high/medium/low," or else as a percentage value. Unhappily, with some programs that use percentages, increasing the percentage value actually decreases compression, whereas with other programs, exactly the opposite is true. Always make a copy of the original image to experiment on, because once compressed, information is lost and cannot be recovered. For more information on re-saving JPEG images, refer to CNET Builder's advice.

    As you increase JPEG compression, many images will suffer unacceptable losses in display quality. Increase compression gradually (in increments of, say, 10%), until you find that image is truly suffering, then ease back up a bit. Again, this is an instance where no hard-and-fast rules exist. You simply have to experiment until you achieve an optimal balance of compression and image quality. JPEGs are notoriously difficult to edit; if you open a JPEG and modify it, you're modifying the interpreted bitmap rather than the JPEG data itself. Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process, and the resulting image will be further degraded. Never resave a JPEG if you don't have to. On the Web, anything over 72 dpi is a waste--there's no benefit to higher resolutions as there is when printing onto paper.

    A GIF can adjust its file size automatically to fit into the smallest possible space, given a specific number of colors in an image. The process of rendering an image in fewer colors is sometimes referred to as "reducing color depth," "dropping color depth," or "palette optimization." By default, GIFs assume that an image has 256 unique colors. But many images (especially buttons, bullets, and the like) don't use more than a handful of unique colors. Many more images look just as good when rendered with fewer colors. When you force a GIF to render with a smaller number of colors to the next lowest factor of two (size savings are achieved at 16, 32, 64, or 128 colors), the overall size of the graphic is automatically reduced.

    Explore options for color, dithering, etc. until you find an optimal balance of color depth and image appearance. (Note: In general, "dithered" images do not optimize as well as non-dithered images.)

    Use the smallest number of colors that render the image acceptably, without compromising its quality. When you save the file in a GIF format, the image will automatically be reduced to the smallest possible size for the color palette you've selected.

    Use the Web-safe palette, which consists of colors that use six equal gradations in each RGB channel: 0, 51, 102, 153, 204, and 255 (seen in HTML as the hexadecimal values 00, 33, 66, 99, CC, and FF). By producing images mainly or entirely from those 216 colors, you can be sure the images look more or less the same on all browsers and platforms.

    Back to the Top

    Shareware and Free Graphics Compression Utilities

    Online compression utilities

    GIF Optimizer by Media Builder
    Jpeg cruncher and GIF Cruncher

    Windows-based compression utilities

    CyberView Image Lite (JPEG Compresser)
    Advanced GIF Optimizer
    Photo Crunch JPEG Compressor
    JPEG image compression FAQ

    Back to the Top

    Imbed Video Clips

    You can embed video clips in your page with this code:
    <embed src="/members_area/walkies.mov" height=108 width=33% controller=false autoplay=true playeveryframe=false pluginspage="redirect_for_plugins.html" loop=false href="buy_me.html">

    The elements above set the movie to play once after the page loads and don't show viewer controls. The href can be linked to a page that shows the whole movie or a place to buy the video. You can also set the loop value to true to continuously run the movie, or you can set the controller value to true to let the viewer stop, restart, and replay at whim. Use QuickTime format--AVI doesn't have as good of a compression rate, a critical point to consider. You can optimize by reducing the frame rate to about 15fps and compressing the finished file using shareware.

    Back to the Top

    Adding Movies to Your Web Page

    simple link to file

    You can provide a link to a movie file and let the user download it, such as <a href="moviename.mov">Play moviename (2 MB)</a> or <embed width="100%" height = "100%" fullscreen="yes" src="[path/]moviename.mov">. When the movie downloads, it can be viewed in the browser window with the QuickTime plug-in or it can be played with another movie-playing helper application. TIP: When linking to an audio or video file, always provide the file size so users can make an informed decision about whether they want to commit to clicking the link.

    Using <object> and <embed>

    To ensure that videos will play properly on all browsers, it is recommended that you place the movie on the page using both the <object> and <embed> tags. The standard, minimum code for doing this is as follows:
    <object width="240" height="196"
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param name="src" value="moviefile.mov">
    <param name="controller" value="true">
    <param name="autoplay" value="false">
    <embed src="moviefile.mov" width="240" height="196"
    autoplay="false" controller="true"
    pluginspage="http://www.apple.com/quicktime/download/">
    </embed>
    </object>
    If you look carefully, you will see that the basic directions are repeated in both the <object> tag and its parameters and the <embed> tag. Apple's tutorial for embedding Quicktime movies is at www.apple.com/quicktime/authoring/embed.html. For a complete discussion of the minimal movie settings, read the article by Jennifer Niederst at O'Reilly. There are also references to other sources of information.

    Valid HTML 4.01!  Valid CSS!