Lesson 3: Cropping and Resizing

Overview

In this lesson you will learn how to use the crop and resize functions of a graphic editing program to size and frame an image so that it fits specific dimensions needed to place it on a web page. You will crop and resize the images you acquired in the previous lesson and then optimize the images for saving in the jpeg format.

Learner Outcomes

At the completion of this exercise, you will be able to:

Activities

Practice resizing an image

Before you can use your images on your web page, you must first resize them to the exact number of pixels in which they will appear on the page.

  1. Read the introduction to resizing images in the online document Resizing a Digital Image. While different graphics software may function slightly differently, nearly all of the applications will let you resize images in a similar manner.
  2. Before creating a final image, practice with your graphics software: Try resizing one of the images to create a 450 pixel wide viewable image.
  3. Now try again, but this time resize the image to a 72 pixel wide thumbnail image (most screens display 72 pixels per inch).

Practice cropping an image

While the resize image function is a useful function, sometimes you will want more control over how the size of the image is reduced. The crop function allows you to cut out a portion of the image or change the image dimensions without distorting the image.

  1. Read the introduction to cropping images in the online document Cropping Photos: Every Picture Tells a Story.
  2. Using the same original image from the previous activity, use the crop function along with the resize function to create a thumbnail image that is 72 x 72 pixels in size and a viewable image that is 450 x 450 pixels in size. Experiment with cropping the image in different ways to create a different look.

Practice saving/exporting an image

Now that you have cropped and resized your image, it is time to save it in a suitable web format. Some graphics applications use the term export to refer to saving to files in any format other than the one primary format supported by that application. In this lesson, these terms mean the same thing.

Remember from Lesson 1 that images with gradations in color or many different colors, such as photographs, are best saved in jpeg format. In this activity, you will learn about how to optimize a jpeg image and then save your cropped and resized image file as a jpeg.

  1. Read the sections on "Image Formats" and "JPG and PNG Basics" in WebMonkey's Site Optimization Tutorial (Lesson 1).
  2. Save the image you cropped and resized in the previous activity as a jpeg. Experiment with different quality settings and then observe the resulting file sizes and image quality. Try and determine what compression setting will achieve the lowest file size while still producing an image of adequate quality.

The Real Thing: Cropping, Resizing, and Saving

Now that you know how to crop and resize images and then save them as jpeg files, you are ready to start preparing your images for your web photo album.

  1. First, crop and resize each of the three original images once more to create viewable images that are 450 x 450 pixels in size.
  2. Next, crop and resize each of the three images to create thumbnail images that are 72 pixels wide.
  3. All of these images should be optimized and exported in the jpeg file format. Once you are done, you will have 6 images. Save the images to the images folder that you created in the early lesson on Pre-coding.

Resources/Online Documents

All done?

Make sure to save your six exported images to your images subfolder. In the next lesson you will add them to a web page to create the web photo album. If you have six web-ready images, you are ready to proceed to Lesson 4.