Web image optimization guide.Using Microsoft Office Picture Manager to format and optimizejpeg 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.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 tolearn 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.
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 haveafter 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 youare an experienced computer user.Before you startI strongly recommend that you work on a copy of you image rather than the original. You mayneed many different sizes and formats of your image at a later date. Optimizing images for theweb 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.
Step 1. Make a copy1. Navigate to the folder containing your images.2. Make a new folder and name it optimized-images3. Copy your file(s) to the new folder
Step 2. Open with MS Office Picture Manager1. Right click on your image.2. Select “Open with”.3. Select “Microsoft Office Picture Manager”.
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.
Step 4. View properties1. Select “File”.2. Select “Properties”.Notice the Dimensions: This example is 1024 wide by 768Notice the file size: This example is 759 KB (3/4 of a megabyte)This file size should be considered unacceptably huge forweb viewing.(Note: It is very common to find images more than 10times this size in CMS systems. This causes very slowpage loads for end users and slow editing experiences forcontent editors.)Even if we maintained the current dimensions, this imageshould be no more than 100 KB.For this tutorial we will be resizing the image dimensionsto 300 px wide and targeting a file size of less than 30 KB.
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.
Step 5. ResizeHow 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.
Note: Do not use “Compress Pictures”If you trust me and don’t care why you should not usethis then skip to the next step: Step 6. Export (the goodoptimizer).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 sizeis around double are target size for an image of thesedimensions. We want this to be below 30 KB.This means that the image needs to be optimized forweb delivery. Optimization simply means compressingthe data in the image. MS Picture Manager has a “Com-press Pictures” feature. This is quite useless, unless yourpicture has dimensions of exactly 448 x 336 (annoyingbehavior #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 tothe 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. Allpictures are sized to a fixed, arbitrary dimensions. In ourcase, this means that the image dimensions are sized up(a very bad thing). Notice the “Estimated total size”; theup-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 continuedThe 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.
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 Explorer2. Single click on the image3. 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.