Advanced Topic)
You saw in previous sections how to upload images and how to insert them into your web pages. To ensure that your pages with images look good but also load quickly in users' web browsers you need to make sure that the images that you use are not too large. Modern digital camera take photographs that are often 1MB or larger. If you are printing large photographs this high-resolution is desirable, but on web browsers on most monitors it is not necessary, and using images with large file sizes only serves to slow down the loading of your pages.
Images that you upload to the CSM production server should generally be 200KB or smaller, and 100KB or small is preferable. I you have large, high-resolution images you can make the file size smaller by resizing and re-saving them using image processing software such as Google's Picasa or Apple's iPhoto.
Since the main content area of the pages you will be editing is only 695 pixels wide, the images that you upload for your pages should generally be no more than 300 pixels wide. You can re-size your photos using the "constrain proportions" option in Picasa or iPhoto so that the width is no more than 300 pixels. Save your files in JPG or PNG format. After saving, check the file size to make sure the file size is less than 200KB.
To summarize, images that you upload should be:
- 200KB or smaller (100KB or smaller when possible)
- 300 pixels wide or smaller
- JPG or PNG format
Using Picasa, here are the steps:
- Select one or more photos
- Click on Export, at the bottom of the application window
- Choose a folder to export to, and select "Resize to:" 300 pixels, under the Image Size Options.
- Click OK
Using iPhoto, here are the steps:
- Select one or more photos
- Go to File, Export.
- Select "Scale images no larger than:" 300
- Click Export
