Image Basics

Contents:
Images take up memory based on
How to Check the File Sizes of Your Images
How to Check the Width and Height of Your Images
Reasonable Download Times (DATT 1939 Image size limit)



Images take up memory based on:

  1. dimensions (width and height)
    the bigger the image, the more memory it takes up, the longer it takes to download

  2. resolution/dpi (for the web use 72 dpi)
    the higher the dpi, the more memory it takes up, the longer it takes to download

  3. number of colours in the image
    this does not apply to JPEG images, but it does apply to GIFs
    the more colours, the more memory a GIF takes up, and the longer it takes to download

  4. file format and compression
    JPEG, GIF, and PNG formats are used on the web
    JPEG compression can be adjusted to get images with smaller file sizes (more compression, may not look as good) or larger file sizes (less compression, looks good)

How to Check the File Sizes of Your Images

  1. Find where you have saved your image. Make sure you are in the Finder (or in your OS, not another program).

  2. Click on the image once to select it (it should hilite).

  3. On a Mac, Choose File > Get Info (and, if necessary, choose > General Information)
    (The keyboard shortcut for this is the Command and the i keys held down at the same time.)

  4. A window will open up with information about the file.

  5. You can see how much memory the file takes up, and therefore how long it will take to download.

  6. You can do this not only with image files, but with HTML files, and other multimedia files.


How to Check the Width and Height of Your Images

Easiest option:

  1. select the Image
  2. on a Mac, in the Finder, choose File > Get Info
  3. under the More Info section, the Info window will tell you the pixel dimensions of the image

Using a browser

  1. Open a browser window
  2. open the image in that window
    (you can do this by choosing File > Open, and then choosing the image file itself
    - Or -
    you can right-click (pc) or control-click (mac) in many browsers, which will bring up options including one something like View Image )
  3. At the top of the browser window, the actual width and height of the image will be displayed in pixels.
    Width is the number listed first, and height is the number listed second.

Reasonable Download Times - (DATT 1939 Image size limit)

The total time a page takes to download depends on the speed of the internet connection, plus the size of the HTML file itself, and the sizes of each and every image, sound, video, or other multimedia file that loads onto the page.

It is important to know the file size of all elements on a page and how quickly your pages download (especially the images, etc., loading on to them) because research into user web-browsing habits suggests that people will only wait about 10-15 seconds for the average page to download.

If you were aiming at a slow, very old modem connection, which has a download speed of 5K a second (56K modem), you can calculate that:
      5K/second * 15 seconds = 75K total for an .html page and all the images (and other things) that load on to it.
And note: this is a maximum size for the general time limit of the user's patience using this download speed.

That being said, even for relatively open projects in DATT 1939 it is not reasonable to have images loading on to a page that are 1MB and larger. It is simply and completely excessive in almost all cases! The same goes for animated gifs.

So keep your images and animated gifs _well_ under 1MB each for DATT 1939.