Practice exercises
You may find it useful to use some of the following exercises as you work through this resource on Images on the Web.
Exercise 1 – Crop image
- Access the image of Mary Ann (link opens in a new browser window).
- Save the image to your “Editing Images” folder by right-clicking the image and selecting Save Picture As.
- Crop the image to show only Mary Ann’s eyes and spectacles.
Exercise outcome
Your image should look something like this.
- Check the image file size in Windows Explorer. It should be about 11 Kb.
- Check the image dimension in Photo Editor by clicking Image on the tool bar and then Resize. It should be about 301 pixels wide and 130 pixels high.
- Check the resolution in Photo Editor by clicking File on the tool bar and then Properties. The resolution should be 96 Pixels/Inch.
Exercise 2 – Resize image
- Access the image of Gerry (link opens in a new browser window).
- Save the image to your “Editing Images” folder.
- Resize the image to the maximum recommended size outlined in Image size to fit UniSAnet Web pages.
Exercise outcome
Your image should look like this.
- Check the image file size in Windows Explorer. It should be about 31 Kb.
- Check the image dimension in Photo Editor by clicking Image on the tool bar and then Resize. It should be exactly 427pixels wide and 320 pixels high.
- Check the resolution in Photo Editor by clicking File on the tool bar and then Properties. The resolution should be 96 Pixels/Inch.
Exercise 3 – Optimising JPEG
Your edited image of Gerry, from Exercise 2, is larger than the recommended file size for rapid download. You need to optimise it for Web download by reducing the file size to less than 25 Kb.
- Open your edited image of Gerry in Photo Editor.
- Save it as another file name and reduce the JPEG quality factor (only by a small amount).
Exercise outcome
Your image should look like this.
- Check the image file size in Windows Explorer. It should be about 16.5 Kb. This was achieved by reducing the JPEG quality factor to 75.
- There should be no change in the dimension of the image.
Exercise 4 – Save .bmp image as a .jpeg
- Access the image of Mary Ann (link opens in a new browser window), which has been converted to a .bmp file of 9.2 Mb.
Note: This would take an extremely long time to download over a modem. Bitmap (.bmp) images are usually very good quality but very large in file size. They are excellent for print but not for the Web.
- Save the image to your “Editing Images” folder.
- Open the image in Photo Editor and save the image as a .jpg file. The image will still be an extremely large file size, so you will need to complete the following steps.
- Resize the image to the maximum recommended sizes outlined in Image size to fit UniSAnet Web pages. If the file size is still above the recommended, you will need to complete the following step.
- Save it as another file name and reduce the JPEG quality factor (only by a small amount).
Exercise outcome
Your image should look like this.
- Check the image file size in Windows Explorer. It should be about 21.6 Kb.
- Check the image dimension in Photo Editor by clicking Image on the tool bar and then Resize. It should be exactly 427pixels wide and 320 pixels high.
- Check the resolution in Photo Editor by clicking File on the tool bar and then Properties. The resolution should be 96 Pixels/Inch.
This was achieved by saving the file as a .jpg and changing the image dimension. No further optimising using the JPEG quality factor was required to reduce file size.