Assignment:
Reducing the File Size of an Image

This page has two parts:

  1. A general explanation of image formats
  2. A step-by-step assignment to try

Computer Images

When you use a web site, it's very important that its pages load quickly. A good rule of thumb is that no page should take longer than six seconds to load on a dial-up modem.

Images are what usually makes a web page load slowly. You should know how reduce the file size of images so they load faster.

File sizes are measured in bytes. You will usually see file sizes stated in kilobytes (KB). 1 kilobyte (1 KB) is about 1000 bytes. Bigger file sizes are stated in megabytes (MB). 1 megabytes (1 MB) is about 1000 kilobytes or about one million bytes

Computer pictures can be huge!

My camera takes pictures that are 1600 pixels wide by 1200 pixels tall. That's almost 2 million pixels (2 Megapixels). The image files from my camera average about 1 MB and take about three minutes to load onto a web page using a dial-up modem.

Reducing the file size of an image usually also means reducing the image's quality, but this often isn't noticible.

The two main ways to reduce the file size of an image are to:

Changing the File Format

There are two basic types of file formats:

Lossless format
A lossless format never loses any information, even when it compresses the image. Some lossless formats are GIF, BMP, and PNG.
Losssy formats
A lossy format make a smaller image file but introduces artifacts that change the image. The most common lossy format is JPG. When you save a JPG image you can choose an image quality. The larger the quantity the larger the file.

For more information about image file formats, see this Wikipedia article.

Here's an extreme example. The image on the left is a PNG file that has all the original detail. The image on the right is a highly compressed JPG file. The image file on the left is 90 times larger that the image file on the right.

Lossless compression
Lossless Compression
File Size 179 KB

Lossy compression
Lossy Compression with Artifacts
File Size 2 KB

If you have a GIF, BMP, or PNG file you can make it smaller by converting it to a JPG file. To convert the file, open it in Fireworks and use the Export Wizard as described below.

Rotating and Changing the Size of an Image Using Fireworks

Follow these steps to rotate an image and shrink its file size.

1. Look are the original image

Here's a 1600x1200 image taken by my camera. It's scaled down to thumbnail size so it fits on the page but it's file 1063 KB. You may have seen it being slowly drawn when this page loaded in the browser.

Rotated full resolution mountaints

2. Save the image

a. Click the right mouse button on the image in step 1

b. Choose Save Picture As

c. Save the image to your My Documents folder

 

3. Start Fireworks

a. Click the Windows start button

b. Click Programs

c. Choose Macromedia and then Macromedia Fireworks

  

4. Open the file you saved in step 2

a. Click the File menu and then Open

b. Choose the file you saved above

 

5. Zoom to 100% to see how huge the image really is

a. Find the zoom control just below the image

b. Click the small arrow next the the current zoom percentage (circled in red on the right)

c. Change the zoom to 100%

 

5. Rotate the image so that it's right side up

Click on the Modify menu, then Canvas, and then Rotate 90° CW

  

6. Reduce the image to a manageable size

a. Click on the Modify menu , then Canvas, then Image Size

b. Change the horizontal size from 1600 pixels to 400 pixels. Notice that the vertical size changes automatically to 300 pixels.

c. Click OK

d. Notice that the image looks much smaller

7. Export the image

a. Click on the File menu, then Export Wizard. Do not choose Export or Export Preview.

b. Click Continue

c. Click Continue

d. Click Exit

e. You should now see the Export Preview window as shown.

f. Set the Format to JPEG

g. On the right, under Saved Settings, choose JPEG - Smaller File

f. Notice that Fireworks now says the image is about 10 KB and will load in 1 seconds on a dial-up modem. This is over 100 times smaller than the original image!

8. Click Export  

9. Change the file name to your name plus mountains. For example, if your name is David, change the file name to:

David mountains

 
9. Change the folder to your My Documents folder  
10. Click Save  

11. Exit Fireworks

But don't save the file

 

 

12. Copy the file to your class period's folder in the writeable part of the outbox.