(module 9)

Using Images on Web Pages

    Pictures, photos and graphics play an important role on your webpages. Used effectively, they can enhance understanding, but you'll have the most success if you can follow a few technical constraints:

  1. Keep file sizes to a minimum

      Pictures contain more data than text, and take longer to be download. To make sure that those with slower connections aren't left waiting, you'll want to make sure that the size of your pictures are at their smallest.

      If you are using Contribute to make your web pages, it will reduce the size of any too-large pictures for you.

      If you are using other programs, check the dimensions of your picture. Picture sizes are measured in pixels, or individual dots on the computer screen. In general, your computer screen has from 72 to 96 pixels per inch. So the whole screen might be around 1000 pixels wide (give or take a few hundred pixels).

      A typical screen is 1000 pixels wide. A typical web browser is about 800 pixels wide. So your images should be no larger than 700 pixels wide.

      Digital cameras will produce pictures that are many thousands of pixels wide. You might have noticed when you've gotten a photo emailed to you, only to open it and see that only a part of someone's nose will fit on your screen, and you had to scroll around to see the full picture. Don't do this on your web page.

      By reducing photos and pictures to their minimum size, you will be being considerate of your visitors using a modem, as well as those with smaller screens.

  2. Layout & Design

      Use pictures and photos that will help to reinforce the content of your web page. For the reasons above, images should contribute to your message to be worth the time it takes to wait for them.

      You can use images to give examples, to give overviews, to draw attention to a concept, to break up the flow of text, to accentuate points, and many other reasons. There should be some reason to include them.

      Keep it Relevant: Images have been shown to improve understanding and cognition, BUT ONLY if they are relevant. Clip are and embellishments are nice, but avoid images that are only distracting. They will most likely impede, not improve, understanding of your material.

  3. Tips

      File Formats: Know the difference between JPEG (works well for photos) and GIF (works well for logos or artwork) and use the appropriate format for each of your images. Most image editors can save to either one of these formats.

  4. How to resize an image in Photoshop

      Open Photoshop, and then open your picture from within Photoshop (choose File -> Open).

      Open up the Image Size box: Image -> Image Size


      Pay attention to the top section, the height and width (in pixels) of the image.

      Remember, 72 pixels = 1 inch on screen.

      For a big image, make it about 700 pixels wide. For a smaller image, try 350 pixels.

  5. How to clean up an image in Photoshop

      The Image menu contains many other useful tools. A useful one is Image -> Adjustments -> Levels...


      This box will let you adjust the values of white, black, and grey in the image. It can be useful for scanned pictures, when ink from the backside of the paper is showing through. You can also do color correction and cleanup of photographic images.

  6. Next steps
      Photoshop is a complex, dense program. Here are a few outside resources explaining common tasks that photoshop can help you with: