Using Microsoft Office Picture Manager to format and optimize jpeg images for the web.

OverviewThis will step through the image formatting an optimizing steps needed to prepare your photo-

graphic images for use in a web page.

I will provide tips and best practices as well as workarounds to some problematic and unintui-

tive “features” in the Picture Manager application.

Note: This is not the sort of guide that you will need to print out and refer to often.

Once you have been through the steps a few times, you will not need it again. So

please do not print it out unless you really need to -- it is has 15 pages and is image

heavy so will consume a lot of resources.

Instead, I recommend saving it to your Documents library for easy access should

you need a refresher in the future.

Requirements• Windows7

• Office 2010

• Basic computer knowledge (opening and saving files)

Intended audienceWeb content editors for Content Management Systems (CMS) such as Drupal, Sharepoint,

Joomla!, etc. who do not have access to or knowledge of Adobe Photoshop nor the time to

learn the Gimp (a free Photoshop alternative.)

Web image optimization guide.

What to expectThere are quite a few steps involved.

These are all quite simple and the whole process will only take a minute or two once you have

after you have been through this a few time -- so don’t let the length of this tutorial put you off.

I will suggest best practices and settings. You should follow these but are not obliged to do so.

There is one bug and a couple of annoying behaviors to avoid.

I will walk through these, so be sure to follow all of the steps your first time through even if you

are an experienced computer user.

I strongly recommend that you work on a copy of you image rather than the original. You may

need many different sizes and formats of your image at a later date. Optimizing images for the

web downgrades the original image quality for faster web delivery. This can not be undone.

If you are comfortable with making copies you can skip the first step.

Before you start

1. Navigate to the folder containing your images.

2. Make a new folder and name it optimized-images

3. Copy your file(s) to the new folder

Step 1. Make a copy

1. Right click on your image.

2. Select “Open with”.

3. Select “Microsoft Office Picture Manager”.

Step 2. Open with MS Office Picture Manager

MS Office Picture Manager default screen

1. If you are editing a large image, you might want to scale down the view.

This will not alter the image itself, but will make it easier to view on screen.

Step 3. Resize view (optional)

1. Select “File”.

2. Select “Properties”.

Step 4. View properties

Notice the Dimensions:

This example is 1024 wide by 768

Notice the file size:

This example is 759 KB (3/4 of a megabyte)

This file size should be considered unacceptably huge for

web viewing.

(Note: It is very common to find images more than 10

times this size in CMS systems. This causes very slow

page loads for end users and slow editing experiences for

content editors.)

Even if we maintained the current dimensions, this image

should be no more than 100 KB.

For this tutorial we will be resizing the image dimensions

to 300 px wide and targeting a file size of less than 30 KB.

1. Select “Picture”.

2. Select “Resize”.

Step 4. Select “Resize”

The default Resize settings panel.

Step 5. Resize “Bug”

1. Select the “Custom width x height” radio button.

Note: This is where we encounter the “bug” and an

“annoying” behavior mentioned earlier.

Annoying behavior:

Notice the I have entered the width I want (300 pixels)

but the height does not automatically size in propor-

tion (225 pixels for this image) even though automatic

proportional resizing is the default behavior. You can

see the proportional resize happen in the “Size setting

summary” -- that is also where you see the “bug”.

Bug:

Notice that I entered “300” for the width but the “Size

setting summary” shows a width of “400”. If I “OK” this

it will set the image to 400 wide by 300 tall. This is pro-

portional but not what I wanted.

Hopefully, you will not encounter this issue. If you do,

Step 5 shows how to work around it.

How to work around the resize “bug”

Step 5. Resize

1. Select the “Custom width x height” radio button.

2. Enter the desired width in the “height” field.

3. Add the desired width in the “width” field.

Notice that “Size setting summary” “New size:” num-

bers are now correct.

4. Select the “OK” button.

5. Save the file.

Note: Hopefully you are working on a copy of your im-

age as I suggested in step 1.

If not, I would strongly recommend using “Save as”

from the “File” menu. Otherwise your original image at

its original size is gone forever.

Note: Do not use “Compress Pictures” If you trust me and don’t care why you should not use

this then skip to the next step: Step 6. Export (the good

optimizer).

If you do want to know why, then read on.

Take a look at the properties of the newly resized image.

The dimensions are correct at 300 x 225 but the file size

is around double are target size for an image of these

dimensions. We want this to be below 30 KB.

This means that the image needs to be optimized for

web delivery. Optimization simply means compressing

the data in the image. MS Picture Manager has a “Com-

press Pictures” feature. This is quite useless, unless your

picture has dimensions of exactly 448 x 336 (annoying

behavior #2).

Why Compress Pictures must not be used.

If you select “Compress Pictures” from the “Picture”

menu or from the blue panel menu, you get the pane to

the left.

It has a seemingly very appropriate compression op-

tion named “Web pages”. Sounds perfect for our needs.

But! Take a look at the last part of the description. All

pictures are sized to a fixed, arbitrary dimensions. In our

case, this means that the image dimensions are sized up

(a very bad thing). Notice the “Estimated total size”; the

up-sizing has caused our image file size to almost double

-- exactly the opposite of what we need.

So, that is why I recommend that you never use this fea-

ture.

Step 6. Export (the good optimizer)

1. Select “Export” from the panel menu.

2. Select the “JPEG options” link.

Step 6. Export continued

1. Select the “Select a custom compression setting”

radio button.

2. Enter a numeric value for the amount of compression.

“65” is a good generic medium-high value.

For tips on compression values see below.

3. Select “Return to Export”.

The File Format Option panel.

JPEG Compression values

Image must be of very high

quality for marketing or scien-

tific accuracy reasons.

General web use.

Thumbnails.

85

Barely any perceptible loss of quality.

55-75

Noticeable loss of quality varies depending on the visual

content of the image. Text overlays or straight lines may

suffer from artifacting (smooth lines appear to have jagged

edges). So experimenting in this range may be required.

40

Small images usually look fine when heavily compressed.

Appropriate compression values:Image purpose or need:

Step 7. Export (save the optimized file)1. (Optional) Enter a new file name

Uncheck the “Original file names” checkbox and enter a new name.

2. Select the “OK” button.

If you did not enter a new name, then you will need to select the “Replace File” button or one

of the other options.

If you entered a new name, you will only see (probably very briefly) the “Exporting” dialogue

box.

Final step. Verify Image Size1. Navigate to the image file in Windows Explorer

2. Single click on the image

3. Look at the image properties at the bottom of the screen.

In this example the dimensions are correct (300 x 225) and the file size is well under our tar-

get of 30 KB at 17.7 KB

Your image is now ready to uploaded to a Content Management System (CMS) or any other

website.