Image Manipulation

Image Manipulation When it comes to adding graphics to your documents, it can either be the fun part, or the frustrating part. There are many facets to the manipulation of digital images. The first facet is the actual creation and modification of an image, such as painting, adding text or shapes, layering, or distorting. Two other facets of image manipulation are image resizing, the process of getting your image to be the right size on your page, and image conversion, getting your image into the right format to be viewed on the web.

This document is designed to introduce you to the manipulations needed to include graphics on a web page or in a document. There are several tools that we will discuss. Tools in this case being programs running on your PC or Macintosh computer to prepare your images for viewing. We will use these tools to optimize your graphics for the web. There are several things to consider to include a picture in your web document, especially if you created the picture yourself. However, once you have this knowledge, your job of manipulating graphics will lean more to the fun side, rather than the frustrating side.

Image Creation & Modification

Using a "paint" program on a PC or Macintosh has similarities to using a word processing program. Most people can do the basics, but it takes lots of use to get proficient with a particular program. For the PC, Paint Shop Pro, or Photoshop allow you to do basic painting, adding text, drawing shapes, and producing special effects. For the Macintosh, NIH Image, and Photoshop can be used to create new, or modify an existing, image. NIH Image is a free, public domain program. Paint Shop Pro and Photoshop are commercial programs. Paint Shop Pro started out as a shareware program and retails now for about $100, while Photoshop is about $600 retail. New programs with a web-centric approach include Adobe's Image Ready which is included with Photoshop, and Macromedia's Fireworks. These two programs are loaded with features to aid in the optimization of images to be used on web pages.

The purpose of this document is not to teach you how to draw, or even go into great detail about the tools of each graphics program. Adobe's Photoshop is the premier professional program that can literally transform any graphic image into whatever your mind can think of. People have used Photoshop for years and not mastered all of its features. The other programs approach, but do not match, Photoshop's abilities. Each of these programs is quite powerful, and can do some amazing things to digitally modify your images. They all have a similar set of tools to create simple graphics or spectacular masterpieces.

Image Resizing

You can't just put 8"x10" photos on your web page. Your images are intended to enhance the document, not overpower it. You must consider factors such as how much detail does the viewer need to see in the graphic. The dimensions of the image will directly relate to its file size . The bigger the image, the bigger the file size. You may need to "scale down" your image. Photoshop, Paint Shop Pro, L-View Pro and Graphic Converter will handle this task. Remember to keep the proportions of the image the same or you will get a "skinny" or "fat" image after it is scaled. Images are measured in pixels .

What is a pixel? A pixel, short for Picture Element , is a single dot of color in a graphic image. These dots make up the picture, icon, or piece of "clip art" that you see on your computer screen. A standard Windows 95 or Macintosh computer screen is 640 pixels wide by 480 pixels high. If you were to magnify an area of an image, you would see individual squares. Each square is one pixel.

Pixels Magnified

Show me how image resizing works . . .

Image Conversion

Now that you have produced a graphic in a paint program, and you have scaled it to the proper size, you're ready to include it in your web page . . . almost. When you include a graphic image in a web page, it needs to be in a particular format. The two image formats that are supported by today's web browsers are Gifs (hard or soft G and add "if") and Jpegs (pronounced "jay-pegs"). These computer image files are known by their identifying "extension". For example: mypicture.gif or mypicture.jpg . You might remember that the HTML code to include these images looks like this:

If you acquire your image from another web page (legally, of course), then the picture will most certainly be in either the Gif or Jpeg format. If you use a digital camera, Photo/Picture CD, or scanner to "digitize" your image, it may need to be converted to a Gif or Jpeg format. Photo/Picture CD, scanned, or other digital images are usually quite large in terms of their file size. A scanned 8 x 10" photo can be a megabyte (Mb), or 1,000,000 bytes, or more. The equivalent Gif or Jpeg might be less than 100 kilobytes (Kb) or 100,000 bytes. That's still pretty large for a web graphic, but it would take 1/10th the time to transfer over the internet than the original scanned image. Web graphics (in Gif and Jpeg format) are compressed, which means that some of the data is taken away from, or condensed within, the file. Still, a 100 Kb graphic would take a while to show itself, even with a fast connection. You don't see many 8 x 10" photos on the web. An image that size would need to be "scaled" to a smaller size, which we talked about earlier. To convert your file to a Gif or Jpeg you would use a program such as Paint Shop Pro, Irfanview (for a PC) or Graphic Converter (for Macs). From these programs you would go to the File menu and choose open . Then locate the file that you wish to convert. You would then choose File/ Save As ... and select either the Gif or Jpeg file format.

So which one, Gif or Jpeg?

The decision as to which file format you will use is not arbitrary. Remember that when you convert a file to Gif or Jpeg , you're attempting to reduce its file size. You're doing what is known as image compression . As you reduce, or "compress" an image's file size, there is a trade off when it comes to image quality. Certain images lend themselves to being converted into Gifs , and others into Jpegs . A general rule of thumb is that logos or "line art" images with large blocks of solid colors, do well in the Gif format, while photographs do better in the Jpeg format. Though sometimes the choice gets hazy. You can always save the image in both formats, then weigh the quality of the image versus how large the file is.

Show me some Real World examples...

If you're really picky about how large your images are and want to tweak the settings of the image compression to get the smallest and best looking images possible, you need to optimize. Again Adobe Photoshop has the built in program Image Ready to compare the quality versus size of a given image. You can also try these image optimizing web sites:

JPEG Wizard
Spinwave GIF Cruncher

This is by no means a compendium on web graphics, but hopefully it does get you thinking about the way images "magically" appear in web pages (sorry we spoiled the trick). There are copious amounts of additional information out there if you can't get enough of this stuff. Please feel free to contact Instructional Technology for more information.

Digital Imaging