HTML and CSS Reference
In-Depth Information
FIGURE 18.22
DON'T: Images
that are too large.
Remember the hints I gave you in Lesson 9. Consider how important each image is
before you put it on the page. If an image doesn't directly contribute to the content,
consider leaving it out.
Keep Images Small
Keep in mind that each image you use is a separate network connection and takes time to
load over a network. This means that each image adds to the total time it takes to view
the page. Try to reduce the number of images on the page, and keep them small both in
file size and in actual dimensions. In particular, keep the following hints in mind:
The entire page (text, CSS, JavaScript, and images) shouldn't take more than
10 seconds to load; otherwise, your visitors may get annoyed and move on without
reading your page. Strive to achieve that size by keeping your images small and
just as importan, reducing the number of images on your page. The browser has to
open a new connection to your server for every image on your page, and there is
overhead associated with those connections.
For larger images, consider using thumbnails on your main page and then linking
to the images rather than putting them inline.
Save your image in both the PNG and GIF formats to see which creates a smaller
file for the type of image you're using. You might also want to increase the level of
compression for your JPEG images or reduce the number of colors in the palette of
the GIF images to see whether you can save a significant amount of space without
adversely affecting image quality.
Search WWH ::

Custom Search