CWC index .

Image Coding and Optimizing

FAQ about images

  1. What kind of image files can I use on my site?
  2. What is the HTML code for an image?
  3. I don't have an image editor. How do I find the height and width of an image?
  4. Why is my image broken on my website?
  5. How and why should I create thumbnails?
  6. How do I optimize my images?

  1. What kind of image files can I use on my site?
    Crosswinds supports the following image filetypes:  .gif   .jpg   .jpeg   .png

  2. What is the HTML code for an image?
    Here is the HTML coding that will cause the image and page to load as quickly and efficiently as possible. The bold sections between the quotation marks in the code snippet should be changed to fit each image placed on a page. It is recommended to always include the quotation marks. (Remember to close them.)

    <img src="imagename.gif/jpg/png" alt="brief description of image" width="xx" height="yy" border="1 />

    The src spec should look exactly the same as the filename of the image. Remember that names are case sensitive. Note the difference between "image.jpg" and "Image.JPEG". You may find that it is easier to prevent errors if you habitually use lowercase letters only for file names. The alt spec is there for people for people who use text to speech browsers, are sight-impaired, or have text-based browsers. Be brief but descriptive. The width and height specs should be the same as the actual image size that is being loaded. Specifying the height and width means that the rest of the page only has to load once rather than resize around the image once it has loaded. If the image you are putting on your page looks too large for the page, resize the image in your image editor to the size you want. (Always keep a copy of the original!) It is especially important to put these height and width specs in. Your page will load much faster - and that's what it's all about in this impatient world of the internet. The border is a pixel specification for the line around the picture. If you do not want a border, put border="0" The larger the number, the wider the border.

  3. I don't have an image editor. How do I find the height and width of an image?
    If you do not have an image editor on your computer, you can pull the image into a Netscape browser. The height and width specs of the image will appear beside the title of the image at the top of the browser.

  4. Why is my image broken on my website?
    First, make sure that the imagefile has been uploaded to the correct directory. Second, remember that filenames are case sensitive. Note the difference between "image.jpg" and "Image.JPEG". You may find that it is easier to prevent errors if you habitually use lowercase letters only for file names. And third, if you uploaded via FTP and the image is still broken, try uploading the image again. Make sure that you choose "binary" for uploading the image.

  5. How and why should I create thumbnails?
    If you wish to display a number of images on one page, it is a very good idea to make thumbnails. The thumbnail images can act as links to separate pages showing one or two larger images. Rather than resizing a large image by changing the height and width specs in the HTML coding, use your image editor to make a copy. Resize the copy to the size you want for the thumbnail. (Always keep separate copies of the originals!)

    Please bear in mind that not everyone has unlimited hours of highspeed connection. There are still many people with dialup connections at hourly rates. If your pages are too image heavy, the loadtime will be prolonged and many of your visitors will move on to another site rather than wait til your site has loaded.

  6. How do I optimize my images?
    Many images can be reduced in bytesize without really compromising the quality. You can reduce .gifs and .jpgs at NetMechanic's Image Optimizing (free online). If you choose "display both GIF and JPEG" in the dropdown menu beside Output Format you will be presented with .png options as well. (As this FAQ is being prepared, NetMechanic will not optimize .png images from your desktop.)

The following may also be of use:

Ulead WebUtilities: Why Optimize?
Netmechanic's Load Time Tip: Reuse, Optimize, and Preload Images
Can You Over-optimize Images in HTML?

 

© llizard 2003, 2007 ( last modified 28 March 2007)

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page