2d. How can I optimize images to make my page download faster?
The main thing that increases download time is IMAGES. To reduce image file size, make sure image files are properly optimized as gif or jpg and are as small as possible.
This lesson shows how to optimize images on an actual student project to improve the download time from almost 5 minutes to 11 seconds.
Get information about your image and page size.
The bottom right of the document window shows the total page size (including all image files) and download time for a 56kbs modem connection. Most people will wait about 10 seconds for a page to load, so ideally, you want to get your page size under 40k, ESPECIALLY if it is the home page. In this case, the page size is far too big. When you select the image and view the property inspector, you can see that the image is 1.1 MB. Clearly, this image needs to be optimized.
The Src box shows that this image is a png. Png supports transparency and is sometimes necessary, but most of the time gif and jpg are better formats for the web becasue png will not display on older browsers.
Optimize Image File
One way to optimize the image file is to right click the image and select Optimize. NOTE: Before you do this, make sure you have a copy of the file. Optimizing CHANGES THE FILE (reduces resolution and or color depth).
Choose settings
Choose jpg format for photos and images with gradients or other complex color changes. For line art (images with solid areas), gif format will look better and produce a smaller file. You will have to experiment with settings to get the smallest file size with enough quality to convey the content. Use the magnifying glass to see detail. You can also crop the image here.
Check propeties
1. Notice that this file has gone from 1.1 MB (over 2 minutes) to 17.4 K (2 seconds).
2. The page size is now 891 k, so there are more images on this page to optimize.
Another example
Here's an example of a button image. Not only is it a png, it's also 300 pixels wide and a whopping 87 k. There are 8 buttons this size -- almost 0.7 MB!!
Resize the image
To rezize the button image, select it, hold the shift key, and drag the box on the bottom right. Holding the shift key maintains the aspect ration so the file won't become distorted.
Notice that the file size HAS NOT CHANGED and the image quality is bad.
Optimize
Right click the image and select Optimize. You can compare formats by selecting the 4-up icon and using the pull down menus in each box to select formats. In this example, the jpg is smallest, but the gif is slightly easier to read at 100%.
Check Sizes
After resizing and optimizing all 8 buttons, the total file size is now 239 K. We've gone from almost 5 minutes download time to 25 seconds.
Optimizing 2 more title images brings it down to 11 seconds.