... save images for
e-mail and websites
(including screen shots)

"How to" Index

Situation:

You have an image -- jpg or gif -- from your camera or scanner. You want to put it into e-mail or on a webpage. For instance, suppose I scan my coffee cup (below):

(If you relate to the sentiment expressed in the image, you may
wish to visit the website of artist Mary Engelbreit or her store.)

Problem:

The scanned image is too large. Here is just a small piece of it:

You've seen this kind of situation, though you may not realize it. Some websites have images which take forever to appear. The images may appear small, but they still download line by line, and take far too long. This is because someone has uploaded a large image, and then asked the browser to display it small.

(Click here for an example. It may take a few seconds to load, because it contains a bad example of the above.)

Or you have friends who send you pictures that are a megabyte or more in size, and when you try to look at them they are huge. You don't want to do that to your friends. You want to send them pictures that are smaller, and display nicely on the screen.

Solution:

Scale the image. By "scale," I mean change the number of dots on each side. I will tell how to do this below. First, consider the following:

• The computer screen you are looking at is made up of a pattern of dots. If you were to look very closely, it would look like this:
  
  
  
  
• The dots are called "pixels." Most screens are
  • 1024 pixels wide by 768 pixels high, or
  • 800 pixels wide by 600 pixels high
• This means that an image which is 600 pixels on each side will look very large on a computer screen.
• Scanners and digital cameras produce pictures that are thousands of pixels wide. Thus, they are too big for e-mail or websites -- unless you scale them down.

Here are some examples:

The image below is another piece of the original scan of my coffee cup. The original is 1525 pixels by 2090 pixels, and more than 3 megabytes in size -- far too big to send in e-mail or put on a web page. Only the upper left corner of the image is shown here. If I tried to show you the whole image, it would go completely off of the screen (and would take forever to download):

Here is the same image, scaled down to 300 x 414 pixels. That's roughly 1/5 the original width and height -- and just 80 kilobytesinstead of 3 megabytes:

And here it is again at 150 x 207 (22KB):

And at 75 x 104 (and a mere 7KB):

How to do this:    

The method behind the above changes is quite easy. First, you need an image editing program. One probably came with your digital camera or scanner.

An excellent and free image editing program is Irfanview, available at:     http://www.irfanview.com   (The program really is free, but the fellow who designed it -- and constantly upgrades it -- asks for a Euro 10 donation via PayPal. If you can afford that, it would be nice to send it to him for his excellent work.)

Image editing programs come with many features. Here, we will be considering just one feature which will be found in all of them: image resizing. Depending upon the program, this feature will be called:

• Image size
• Image > resize/resample
• Modify > Image size

It will usually be found in Edit, or Image or Modify.

Here is the upper left corner of my Irfanview program, with the full-size image loaded:

Click on Image and then Resize/Resample (or just do the shortcut: Ctrl-R) and you get the following pop-up window:

This window is where you do your resizing.

Note the "Preserve aspect ratio" option at the bottom left. That should be left on so that when you change the width of the image the height is automatically changed, too. And vice versa.

You have three choices:

• Set new size. Change the height or the width. (Change one and the other will change automatically.) That's what I did to get the images above (300x414, 150x207, etc.)

You can do this in pixels or centimeters or inches, but pixels are what you want to use if you are preparing for use in e-mail or on a website.

• Set new size as percentage of original. Here you can ask for an image that is 10%, 20%, 30%, etc. of the original size. Again, change either width or height, and the other changes automatically.
  
  
• Some standard dimensions. Here you can use a single click to make the image half (or twice!) as large. Or you can pick some standard full-screen sizes.

  The full-screen sizes are not practical unless you are preparing Desktop wallpaper, etc. Note that they force the image to fit precise width and height dimensions, and this may distort the perspective (aspect ratio) of the image.

Click OK when you have made your choice. Then save the image under a new name, so that you don't overwrite the original, and you are ready to use it in your application.

By the way, it is also very easy to crop (cut) your image in Irfanview. Just drag a box around what you want to crop. (You can adjust the size by clicking on and dragging the edges.) Then click Edit > Crop Selection. (Or press the shortcut: Ctrl-Y).

Screen shots    

Have you ever wanted -- or needed -- to "take a picture" of what you see on your computer screen and send it to someone? It is easy to do. Three steps:

• Press the "Print Screen" (PrtScr) button. That's up at the top of your keyboard, usually to the right. That will take a picture of your screen. This picture is called a "screen shot."
• Open Irfanview and click Edit > Paste (or use the shortcut: Ctrl-V). That will produce a copy of the screen shot in Irfanview.
• Crop and scale -- and then either
  • Copy (Ctrl-C) and then go to your e-mail program and paste the picture into it (Ctrl-V)
  • Save the image to a file.

Here is a screenshot of this screen as I am working on it using the Dreamweaver website building program. I scaled it to 33%:

Those are the basics!

Happy imaging!