Module 4 - Working with images


Vector and bitmap images
Image resolution
Monitor size and settings
File size
Bit resolution/color depth
File formats
Conversions and resizing
Importing clip art from the WWW
A word on copyright
Using images in Hyperstudio
Things to do


You will be able to:

  • understand and determine image size and resolution required for producing multimedia
  • understand color depth
  • understand and select various graphics formats
  • resize, scale and convert images
  • produce a high quality scan
  • import clip art from the Internet

Vector and bitmap images

There are two different types of computer graphic images: vector and bitmap.

Vector graphics consist of lines and curves which are defined by mathematical objects or vectors.  Desktop publishing programs and illustration programs concerned with print reproduction usually use vector graphics.  No matter how you change the size of a vector graphic, it always maintains its quality as the information is mathematically recalculated.
Making a small bitmap image larger results in a severe loss of quality.  Notice how the original pixels have seemed to become very large!
Resizing or scaling a bitmap image down is not a problem.  There is no noticeable loss of quality. Remember, always scale down, not up!

Image resolution

Computer display screens are made up of a grid of thousands of pixels. The number of pixels that they can display per inch or ppi, gives us the information we need for determining the size or image resolution our bitmap graphics should have.
A Macintosh computer screen can display *72 pixels per inch.  That’s 72 pixels high by 72 pixels wide, or 5,184 pixels.  This means that our graphic images should be created at 72 ppi.  Any higher setting will not make any difference in quality, as the screen simply cannot display anything greater than 72 ppi.  Anything less and we will loose resolution.

(*PC default is 96 ppi).

Monitor size and settings
Another factor we are concerned with is the size of the monitor our images will be displayed on. The standard image dimensions for a graphic to fill a 13 to 15-inch monitor are 640 by 480 pixels. 

When creating a new file in a program such as Adobe Photoshop, we would select an image size of 640 by 480 pixels with a resolution of 72 ppi. 

Multimedia is usually produced at a screen resolution of 640 by 480 because most people have a 13 to15-inch monitor. 

Larger monitors will accomodate larger image sizes, such as 800 by 600 or even 1024 by 768.  You can also change the settings of a computer monitor, which affects the display size.  This will be demonstrated in class.

File size

Digital image file sizes are measured in standard terms: kilobytes and megabytes.  The more pixels you have in your object, the larger the file size.  File size can be an important consideration when developing a project.  It can determine how fast your images load, how they look and how they can be manipulated in your program.

Bit resolution/color depth

Another factor affecting file size is bit resolution or colour depth , which refers to how much color information, is available for each pixel.  Greater pixel depth means more color information available for each pixel.

The Internet has certain limitations when dealing with color, and I have tried to approximate the effects of using various bit depths here.  Assuming that the images below would be 640 by 480 pixels in size, here are representations of image quality and file size:

A pixel depth of 1 has only two possible values 
(black and white).
640 x 480 approx. 150K

A pixel depth of 4 has 16 possible values or colours.
640 x 480 approx. 350K

A pixel depth of 8 has 256 possible values or colours.
640 x 480 approx. 650K

A pixel depth of 24 has roughly 16 million possible values or colours.
640 x 480 approx. 1 MB


Image file formats

The more popular file formats that we will be dealing with include:

BMP – a standardized and reliable format to use, especially between platforms.  Supports color depths of 1 to 24 bit.

GIF – limited to 256 colors or less.  A poor choice for large images or photographs.  Very popular for small web graphics and animations.

GIF89a – limited to 255 colors or less.  Provides transparency features.  Popular for web graphics and animations.

PSD – this is a raw, proprietary Photoshop format that usually cannot be applied to any other program until it is “flattened” and saved in a common format.

PICT – a reliable format primarily used on the MacIntosh and also supported in some PC programs.

TIFF – an older format becoming less popular for multimedia work but still used extensively in desktop publishing.   File sizes are typically large, as it is an excellent file format for printing high quality photographic images.  Quite often incompatible between platforms or programs.

JPEG – a very common image format for photographic images.  It can maintain a reasonably high quality image with many colors while still compressing file size (the amount of compression is flexible).  There is always some image degradation with this lossy format and image quality can decrease with size or resizing.

PNG – a new format which is lossless but not very popular at the moment.  It incorporates a transparency feature and may someday replace GIF in popularity for web graphics.

AVI - the video and animation standard for Windows.

QT (Quicktime)  - a very good cross-platform movie standard for Macintosh and Windows.

*Remember that Windows requires a file extension after the file name -  i.e. photo.bmp

For more information on these and other file formats, visit the following sites:

The Kodak Digital Learning Centre

Apple's file format site

Martin Reddy's graphics file formats site at U. of Edinburgh


Example of an 8-bit system palette
The Mac, Windows and various internet programs have their own specific 8-bit system palette of colors.  This means that when you use 256 color, 8-bit graphics, you use the same exact same default palette for each image.  In certain programs, this can produce more accurate colors or better transitions between screens. 

Some programs require that both graphic objects and backgrounds use the exact same colors.  In these instances, all graphic images are "matched" to the same palette. There are techniques and programs that can do this. 

Traditionally, multimedia programs were produced using 8-bit graphics. The colors would be accurate on virtually any computer, especially older ones that could not display more than 256 colors. 

24-bit color has much better photorealistic quality and is becoming the new standard in multimedia.

Conversions and resizing

There are many excellent programs available that allow you to convert one file type to another.  One of the easiest ways to do this is to open the original file in Photoshop, then re-save it in the new format you require.  The thing to be on the lookout for is ppi and resizing.  We have already seen an example of what can happen when you increase the size of a bitmap image.

Some programs such as Hyperstudio, will import and automatically convert and even resize a variety of image formats.


Scan resolution is virtually the same as image resolution.  Different software provides various ways for you to select the proper size required for a specific application.

Read this article from Barnard College on image scanning.

Importing clip art from the World Wide Web
There are thousands of free clip art images available on the Internet.  To download a graphic image, simply position the cursor over the image you want and hold down the mouse button (on a PC right-click).  A requestor will appear.  Select "save image as" and a requestor will appear prompting you to save the file. Some images on the web are not free, and you are not allowed to use them without permission or payment.

Go to the resources section of this course and browse through some of the clip art available.  If you see something you like, download it. 

Be sure to always set up proper folders on your hard drive to store your various resources. 

A Word on Copyright

There is much information available on the Internet. This includes textual information as well as audio, photographs, graphics and other images. It is important for you to realize that these things are usually the property of someone else, and using information or materials that belong to someone else can be an infringement of copyright, and against the law. For more information on copyright, visit: A Brief Introduction to Copyright - by Brad Templeton.

Using Images in Hyperstudio

As you have discovered, Hyperstudio has its own drawing tools that you can use to create pages.  You can create all of your pages in Hyperstudio, or you can create them in part or whole in another program (such as Photoshop) and import them into Hyperstudio as a background or a graphic object.  Hyperstudio will accept most popular formats including bmp, jpeg, tiff and pict files.
IMPORTANT - If you create pages of different sizes in another program and import them into Hyperstudio, they will be re-sized to fit the page size you have created in Hyperstudio.  This could result in loss of image quality, so be sure that your page size and number of colours in Hyperstudio matches the page size and number of colors in other programs. 

Use  "about this stack" in the object menu to change the number of colours and/or the size of the cards.  In this course we should be using the thousands or millions of colours mode with 640 X 480 size cards.

Things to do
  • Go to the resources section of this course and browse through some of the clipart sites.  Try downloading a few pieces that appeal to you.

Michael Shaw, 1997