Tips for Using Images

Before you insert a picture into your webpage, you should make sure that the picture is the correct size for users to see. Size in this respect does not only mean the dimensions of your images, but also the file size of the image. Many pictures taken by digital cameras are very large in file size. If these pictures are inserted into a webpage, they make the page load very slowly and for those users on dial-up connections, can mean the page cannot be loaded at all. These pictures need to be resized before they are entered into your webpage. It is also important that the dimensions stated in the HTML code match the size of your image, or the image will be distorted.

Using Paint to Resize an Image

Most computers come with Paint installed.
Here are the steps to resize your image/picture:

Note: Pictures/images should be resized before placing on a webpage or copying them to your web directory due to the fact that the smaller file size does not take as long to upload to the server.
  1. Start the Paint program. Commonly found under Start >> Programs >> Accessories
  2. Open the image/picture located on your hard drive by choosing File >> Open from the menu bar. Choose .jpeg or .gif from the Files of Type drop-down box (.bmp files should NOT be used)
  3. Choose Image >> Stretch/Skew from the menu bar.
  4. Within the Stretch selection, enter your desired shrinkage percentage in the Horizontal and Vertical boxes - these amounts must be the same or your picture will be distorted.
  5. Choose File >> Save As
  6. In the Save In drop-down box, navigate to your preferred location. I
  7. Enter the full file name including the .jpg or .gif extension in the File Name box. Do NOT use spaces in your file names.
  8. You may now insert this image into your webpage.
    Visit our Training Department's Course Handout for step-by-step directions on Using Graphics in MS FrontPage.
  9. Then publish your files (webpages and images) using FTP.

Common Problems and Questions:

  • Image Distorted:
  • This commonly happens because the dimension set in your html source do not match the size of the picture, so the web browser tries to get the picture to match the dimensions set in the html. For example, this picture's dimensions are 277 pixels wide and 185 pixels height. But, my html tag has the wrong dimensions of width="475" and height="100", which distorts the picture. Note: The file size of this flower is 13,982 bytes or approx. 14KB.

    Wrong HTML:
    <img src="flower.jpg" alt="" width="475" height="100" border="0">
    Correct HTML:
    <img src="flower.jpg" alt="" width="277" height="185" border="0">
    How do I find the size of my image?
    • Open your picture file directly from Windows Explorer or My Computer by double-clicking on the file.
    • The picture should open up in a new browser window.
    • Right-click on the picture.
    • Choose Properties - the dimensions of your image are shown in width and height order.
  • Picture takes a long time to load.
  • Although the dimensions of the picture may be small, the picture has not been scaled down in an image program. The browser will then take this large image and try to load it into the dimensions stated in the HTML. An image's dimensions may be only 100 pixels width and height, but if the image is not resized properly, it may be 2 megabytes in file size - too big to even fit on a floppy disk!

    To find the file size of your image:
    • Open your picture file directly from Windows Explorer or My Computer by double-clicking on the file.
    • The picture should open up in a new browser window.
    • Right-click on the picture.
    • Choose Properties - the Size of your image is commonly shown in bytes.
    • If it's larger than 30000 bytes (30KB) - IT'S TOO BIG! The goal is achieve the smallest file size while still maintaining the quality of the picture.
    • Add up the number of pictures on your page and the number of bytes, these all add up to how long it will take for your webpage to load.