This document provides a guide for optimizing images for the web using Microsoft Office Picture Manager. It outlines 8 steps to resize an image to a smaller size and compress it to reduce the file size. The steps include making a copy of the original image, opening it in Picture Manager, resizing it to a custom width and height while avoiding a known bug, and exporting it as a JPEG file with a custom compression level between 55-75 to balance quality and file size. The final optimized image should be under 30KB in size.

1. Web image optimization guide.
Using Microsoft Office Picture Manager to format and optimize
jpeg images for the web.
Overview
This 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.
Requirements
• Windows7
• Office 2010
• Basic computer knowledge (opening and saving files)
Intended audience
Web 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.)
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.

2. What to expect
There 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.
Before you start
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.

3. Step 1. Make a copy
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

4. Step 2. Open with MS Office Picture Manager
1. Right click on your image.
2. Select “Open with”.
3. Select “Microsoft Office Picture Manager”.

5. MS Office Picture Manager default screen

6. Step 3. Resize view (optional)
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.

7. Step 4. View properties
1. Select “File”.
2. Select “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.

8. Step 4. Select “Resize”
1. Select “Picture”.
2. Select “Resize”.

9. Step 5. Resize “Bug”
The default Resize settings panel.
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.

10. Step 5. Resize
How to work around the resize “bug”
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.

11. 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.

12. Step 6. Export (the good optimizer)
1. Select “Export” from the panel menu.
2. Select the “JPEG options” link.

13. Step 6. Export continued
The File Format Option panel.
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”.
JPEG Compression values
Image purpose or need: Appropriate compression values:
Image must be of very high 85
quality for marketing or scien- Barely any perceptible loss of quality.
tific accuracy reasons.
General web use. 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.
Thumbnails. 40
Small images usually look fine when heavily compressed.

14. 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.

15. Final step. Verify Image Size
1. 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.