Image Output

Now that we have reviewed some of the ways to acquire and manipulate images, let's discuss some of the modes of output. Three of the most common modes of output are through websites, printing and e-mailing The skill development activities in this section include:

Putting Images on the Web

Printing Images

Sending Images via E-mail

Using AOL's Instant Messenger to Transfer Image Files

Inserting Images into Word Documents

Putting Images on the Web

Using images on your website can be an effective way to capture a user's attention or to convey information using a visual medium. Some consideration should be given to what the purpose of the image will be. If the image is simply to enhance the webpage then images should typically be 320 x 240 pixels or smaller. These size images will only use one fourth of the screen and will therefore leave room for the content of the page. If on the other hand, the details of the image are what is important, you may want to create a thumbnail of the image so the user can click on it and view a full sized version of the image. For help with creating thumbnails click here. To include an image on your website, you will need to insert the image into your webpage using an HTML editor. The following link provides a skill development activity on using Dreamweaver 3 to Insert Images into a webpage. For additional information on using Dreamweaver, go to this section on Creating Webpages.

Printing Images

The world of printing images versus viewing images is a mysterious thing. Terms like dpi, resolution and pixel size are often used in different ways by different people. Let's start with some basics. If you are printing an image on 8.5 by 11 inch paper, then your image will need to be smaller than that in order for it to fit on the page. Remember printers have margins, so a good rule of thumb is to assume a 1/2 inch margin. Having said that, an image that is very large on screen may not necessarily have a large print size. This skill development activity will focus on using Adobe Photoshop 5.0 LE to determine and change the size of an image. To check the properties of the image, go to the Image menu and select Image Size.

Notice the Print Size is 4.33 inches wide and 3 inches in height which is small enough to fit on one page. To change the size of the image, make sure the constrain proportions box is checked and then type in the desired height. The width value will change in proportion to the height you indicated. If an image is too large to print, the following warning will appear.

In the Image Size Box above, notice that the Resolution value is 72 dpi (dots per inch) with a print size of 4.33 x 3. On screen the image will appear as below.

Click on the thumbnail below to see what happens to the appearance of the image on screen when we change the resolution to 200 dpi. The print size remains at 4.33 x 3. The image appears much larger but both of these images will print out 4.33 inches wide and 3 inches in height.

Click on the image.

Hopefully this has demonstrated that what you see on screen is not necessarily what you get when you print. The best resolution you can get on screen is 72 dpi, so if the image will only be used on a web page, keep the resolution at 72 dpi. Printers on the other hand can achieve a much higher resolution. When you create images that will be used for printing, a higher resolution will result in a better quality picture. The dpi is essentially how much ink the printer lays out. For example, an image at 72 dpi will get 72 dots of ink per inch vs 200 dpi will have 200 dots of ink per inch. So with regard to the two images above, they will both print out the same size but the image set at 200 dpi will print out with a higher resolution.

Sending Images via E-mail

Another way to share images is by emailing them. Emailing images can be fun and it's easy. You will need an email program that is capable of sending attachments. For this skill development activity we will be using MSN's Hotmail. If you don't have an e-mail account already, you can sign up for a free Hotmail account. For additional information on e-mail, click here.

Step 1

Select Compose Message.

Step 2

After typing in the recipient's address and message select "Attachments."

Step 3

Browse and select the Image you want to send.

Step 4

Change the file type. For images it is usually JPEG.

Step 5

Click "Attach to message" and repeat steps 3-5 for any additional attachments.

Step 6

Click Done when all attachments have been selected and attached. The Compose message window should now indicate any attachments you have included.

Using AOL's Instant Messenger to Transfer Image Files

AOL's Instant Messenger (IM) is a form of synchronous communication, meaning it occurs in real time. Transferring text files or image files using IM is simple. To use IM to chat or transfer files, you must have it downloaded onto your machine. Next, you will need to register it and then you are ready to begin. For help with downloading and registering IM click here.

Step 1

Open IM and sign in.

Step 2

To transfer any type of file (text or image) go to the "People" menu and select "Transfer Files".

Step 3

Select "Send File to Buddy"

Step 4

Type in the screen name of the buddy you are sending the file to.

Step 5

Browse, select the file you wish to transfer and click send. You will get the following message box. The user you are sending the file to will get a message indicating that you would like to send them a file. They must agree to accept the file before you can actually send it.

If they agree to accept the file, it will be transferred and the following message will appear.

Inserting Images into Word Documents

Another mode of output for images, is to insert them into a document that is to be printed out. For this skill development activity, we will insert an image into a Microsoft Word document.

Step 1

Locate and open Microsoft Word.

Step 2

Position your cursor within the document at the location you want the image to be inserted.

Step 3

Go to the Insert menu and select "Picture" "From File".

Step 4

Browse, select the image and click insert.

We have reviewed several ways images can be used. For additional help using images, review the sections on Image Input and Image Manipulation.

| Still Image Input, Manipulation, and Output | Learning to Use Technology | Teaching With Technology |