Westminster College Spring Faculty Workshop

Web Page Images

Software for editing and optimizing images

There are many different programs that can be used to create, compose, edit, and optimize images.  We will use Photoshop and GIMP.

Photoshop:  of the two programs, this is the most sophisticated (but also the most complicated).  It's available in the Faculty Resource Center.  You may also make arrangements to have it installed on the computer in your office.  Just contact the Call Center at -6900 to make arrangements.

GIMP (Gnu Image Manipulation Program):  this free program may be downloaded from http://www.gimp.org/.

Obtaining images

There are many sources of images for web pages.  These are the most common.

Downloaded from digital cameras or similar devices.  The most important thing to remember about these images is that they are rarely "ready to go" in their original state.  In most cases, you will need to edit and optimize those images to make them suitable for display on your web page.

Scanned from images in print.  Depending on the quality of the scanner, this may or may not result in high-quality images.  Unless you produced the original image yourself, you should be very careful about copyright violations.

Copied from the Internet.  Put your mouse above an image, right click, and select "Copy Image" (if you're using Firefox), "Save Picture As..." (Internet Explorer), or "Save Image As..." (Safari).  Be mindful of copyright if you use those images on your own web page.

Created using screen capture.  You can create an image of what appears on your computer screen, then crop it or edit it to create an image.  Here's how to do it: Look for the Print Screen button on the upper row of keys on the right side of the keyboard.  Press the Print Screen button.  It won't look as if anything happened, but your computer has saved an image of what's on your monitor to the Clipboard in the temporary memory of your computer. Start Photoshop. On the menu across the top of the page, select "File."  A dropdown menu will appear. Select "New."  A box will some up in which you can create a name for the image.  You can also specify the height and width of the image if you want to.  The default size is that of the image stored in the Clipboard, so you really don't need to make any changes.   A blank white canvas will appear.  To get the image from the Clipboard into the canvas, just press the control key (Ctrl) and V at the same time.  You can also go to the menu at the top of the page and select "Edit."  A dropdown menu will appear.  Select "Paste." Once you've created the image, you can crop, edit, and eventually save it to use on your web page.

Editing images

Either Photoshop or GIMP can be used to edit newly-acquired images.  Both use a combination of menus and toolboxes.  The most commonly used tools appear when you first start the program.  There are three that are particularly useful for creating new images or editing existing images to create new ones.

The marquee tool:  used to select areas on an existing image which you can then copy and paste to create a new image.  Just hold down the left button on the mouse and draw a box around the desired area on the image.  When you release the button, a moving marquee will mark the area you selected.  To copy that area to the Clipboard, just press the control key (Ctrl) and C at the same time.  You can also go to the menu at the top of the page and select "Edit."  A dropdown menu will appear.  Select "Copy."  Then create a new file and paste the contents of the Clipboard into it.  The lasso tool:  does the same thing as the marquee tool except that it creates a freeform shape rather than a rectangle.  You can use this tool to select irregular areas to copy. The crop tool:  used to modify the original image by cropping out undesired portions.  To use it, just hold down the left button on the mouse and draw a box around the area on the image that you want to keep.  When you release the button, a moving marquee will mark the area you selected. Small boxes on the corners and sides can be used to increase or decrease the size of the area selected.  Once you've selected the desired area, double click inside of that box.  Everything outside of the box will disappear.  The image can then be saved under its original name (in which case the part of the image that was cropped out is lost) or can be saved under a new name.   There's a lot more you can do with Photoshop and GIMP, including inserting text into images, erasing, drawing, changing color, creating effects, rotating, repositioning, and literally hundreds of other things.  If you're interested in finding out more about those things, let me know and we can work together on Thursday.

Saving images

There are several formats used for saving images.  Some of the most commonly-used formats include:

jpeg:  this is the most common format for storing and transmitting photographic images.  It is also the format used by most digital cameras.  JPEGs are good for saving images with millions of colors (e.g., photographs and drawings with many shades).

gif:  these images are saved in a bitmap format, which means that are composed of tiny squares of color called pixels.  They can utilize up to 256 colors.  Pixels may also be transparent which can be useful for images in which you want the background to show through.  GIFs may also contain more than one frame so they can be animated.  GISs are good for images with a relatively small number of colors such as graphs, line drawings, images containing text, and small graphics (e.g., logos, buttons, bullets).     Copyright wikimedia.com

png:  this format was created as a newer and better gif.  These images can have more colors that gifs and can be partially transparent.  However, you need to be careful when using this format as the file sizes may sometimes be quite large.

Optimizing images

One of the biggest mistakes that web page designers make is failing to optimize their images.  Optimization involves decreasing the file size of the images while maintaining their resolution.  Not only do smaller files take up less space on your web site's server, they also load more quickly.  Because images and multimedia can take up a large part of your web page, it's important to pay attention to the number and size of the images that you use, to maximize the download speed.

Note:  file size refers to the amount of memory the file requires, measured in kilobytes.  It does not refer to the physical size of the image on the page.

The following images will demonstrate optimization: image 1;  unoptimized image 2:  high quality (loads in 47 seconds at dialup speed) Image 3:  medium quality (loads in 24 seconds) Image 4:  low quality (loads in 15 seconds)

It is very easy to optimize images in Photoshop: start with image file.  If you just want to practice, you can use the unoptimized image in image 1 On the menu across the top of the page, select "File."  A dropdown menu will appear. On the dropdown menu, select "Save For Web & Devices."   A window with four panels will appear.   Click on the image in the upper lefthand panel.  That's the original image.  Underneath the image, you'll see the name of the file and the file size.  That's the image you're going to optimize. Click on the image in the upper righthand panel.  Then you can use the dropdown menus in the right side of the menu to select what format you would like to save the file as (most likely you'll want it to remain a jpeg) and the quality of the image (low, medium, high, very high, maximum).  You can play around with those options and see how they affect the file size of your image. You can also use this window to resize your image.  Pixels are a measure of the physical size of the image.  If you want to decrease the size of the image, just type a new number in the width box.  The height will automatically resize, to keep the image in proportion.  Common sizes for images are 150 pixels, 390 pixels, and 500 pixels wide. Once you have finished optimizing your image, click the Save button.  A new window will open in which you can rename the file and specify where it will be saved.

Using thumbnails

Thumbnails are reduced-size, low-resolution versions of images used to represent larger images on other web pages.  Anyone using your page can click on the thumbnail to open the larger, high-quality image.  Because that image is on another page, your main page loads more quickly and only those who are interested in seeing that full-size image wll take the time to access it.

click the thumbnail to view the full-size, high-resolution version of the image.  Tumbnails are easy to create on Photoshop.  Just use the "Save for Web and Devices" tool described above.  Set the image quality to low and adjust the size of the image.  Typically, thumbnails are around 100 pixels high.

Resizing images

In some cases, you may want to resize an image (i.e., change its physical size) without changing the file size.  A simple utility on the College's web page will help you do that.  Just browse to select the image you wish to resize, select which size you desire, and click the Submit button.

You can also resize images in Photoshop and GIMP: start with image file.  If you just want to practice, you can use the unoptimized image in image 1. On the menu across the top of the page, select "Image."  A dropdown menu will appear. From the dropdown menu, select "Image size."  A window will open. In the window, you can enter the desired dimensions in pixels.  But you can also enter the dimensions in units such as inches, centimeters, or percents (i.e., percent of the window or table that the image will occupy).  If you enter the height, the width will resize automatically and vice versa.  There is a way you can resize height independently of width or width independently of height, but you have to be very careful with that because it can distort the image.

There's lots more

Both Photoshop and GIMP are very versatile programs.  There's a lot more that you can do with them.  Basically, if there's anything you want to do to your images, these programs can probably do it.  Fortunately, they are both fairly user-friendly and they both have good help files.  The best way to learn to use them is to try.  But if you'd like more help with optimizing images or if you'd like to learn some new tricks, let me know and we can work together on Thursday.