Hello and welcome to edition No. 3 of Quick tips, articles on technical documentation best practices. This issue discusses resizing and resampling images in Expressions web to ensure they are clear and easy to read in the final compiled CHM files.

Thank-you and have a great day,

Stefano

Images in Expressions Web or Do I need glasses?

Some of you may have noticed that when you insert an image in Expressions web that is too large, and then resize the image using the handles in Expressions web, that the image loses its sharpness and the results are less than desirable.

Below is a screenshot from SMS Pro, it has been intentionally left at the captured resolution to demonstrate that it is clear and can be easily read. In this case the size isn't too large, but for sake of an example let's assume we wanted to resize this image.

Below is the image after the size was changed. For this example the size reduction has been exaggerated to show the effect, note how the writing is now no longer clear after resizing.

The solution

Users could in principle resize images in a program like Photoshop or other image-editing programs and possibly avoid this issue, but Microsoft Expressions web has a convenient built-in image resampling function to fix this issue and change the resolution of the image so it will regain its sharpness and legibility.

Resizing, resampling and saving images in Expressions web

Changing the size of images within Expressions web is a three-step process, with the last step ensuring that the image is saved in the original folder in which the image was located and overwrites the originally-sized image.

To resize and resample images and change their folder follow the steps below:

1. Insert an image into Expressions web as you would normally.
2. Click the image and resize it by holding down the Shift key and using the lower-right hand corner handle and dragging the handle to resize the image.
   Note: Holding the Shift key ensures that the image retains its aspect ratio as it is resized.
   
3. Once the image has been resized to the desired dimensions, click the image to select it there is now a small icon that appears at the bottom-right hand corner of the image, this is the Picture Actions button and indicates that the image was resized from its original dimensions and needs to be Resampled.
   
4.  To resample the picture, click the Picture Actions icon and then click Resample Picture To Match Size.
5.  Expressions web goes through the image pixel by pixel and changes the overall resolution to fit the size and the image regains its clarity and sharpness.
   
   Below is the same image, at the same size as the one above after the resampling action, it is now legible, although you'd probably need a magnifying glass to read it. :)
   For this example the resize has been exaggerated to show the effect, but even resized by a large amount, Expressions web's resampling function was able to return legibility to the image.
   
6. With the image now resampled, if the HTM file is saved, the Embedded files to save dialog box appears asking to save the images that were resized and resampled.
   
7.  By default Expressions web will try and save the file to the same location as the HTM file and NOT where the original file might have been.
8. To solve this, click Change Folder…, select the folder in which all the other images are located for the document, and click Open.
   
9. At the Embedded files to saver click OK and Expressions web saves the HTM files.