L2DP

**Importing images into a folder** Lets say you find copyright free graphic somewhere on the Internet, and you would like to use it in whole or in part in your site. The process is simple: **TASK**: Open up one of the images that you downloaded into your folder from last lesson into a word processor such as Microsoft Word. **Re-sizing Images** When importing graphics into word documents or a graphics program, we tend to worry about file size. So how do you re-size an image? > > > > >
 * 
 * * From within your browser, right click on the graphic that you want and scroll down to "save as".
 * Save the graphic **into a folder of your choice. ie. a folder on your desktop.** || [[image:http://www.saskschools.ca/curr_content/info10/module7a/images/tree.jpg width="113" height="112" caption="importing an image from a web site"]] ||
 * 1) Click on the image that you just opened in your word processor until you get handle bars. (Handle bars are the little squares that appear in each corner of the image when you click on it.)
 * 1) Place your mouse over the handlebars. The cursor should change into two headed arrow.
 * 1) Click and drag the handlebar with that two headed arrow to re-size the image.
 * 1) You may notice that the image can be distorted; that is, made wider/narrower than taller/shorter. In order to re-size in proportion, hold down the Shift key while you drag the handlebars.

 **Notes about re-sizing:** You will notice that by stretching an image larger, it gets fuzzy. This is because the computer just makes a really small square (pixel) of data larger or wider as per your directions. The end result, as you can see is a fuzzy looking image. For this reason, it is easier to start with a large image and make it smaller, than, to go the other way and to try to make a small image larger. <span style="FONT-FAMILY: Arial, Helvetica, sans-serif">One more thing to remember: Compare the two images above. If you were to compare the properties of both images, (by right clicking and scrolling down to properties on each image) you would see that it is the same image, but more importantly they have the same file size, although one is way bigger than the other one. <span style="FONT-FAMILY: Arial, Helvetica, sans-serif">What does this mean? It means that by resizing an image by clicking on the image and moving the handlebar changes the physical size of the image, but does nothing to the actual file size. (Imagine weighing piece of paper, then crumpling it up and weighing it gain. It should weigh less once crumpled, because it is smaller right?) Why do you need to know this? Because if you import an image onto your page, and it is big, and you think that by resizing it by moving the handlebars will make the file smaller and faster to load,

<span style="FONT-FAMILY: Arial, Helvetica, sans-serif">You are wrong!!!
<span style="FONT-FAMILY: Arial, Helvetica, sans-serif">It is just a big picture crammed into small spot. You will need to edit that image in a graphic editing program like Fireworks or Photoshop in order to decrease the actual file size.