Graphics on your application's pages, when done incorrectly, can really affect the perceived performance of your application by significantly increasing bandwidth requirements. Here are some of the best practices for dealing with graphics on your web pages.
When working with images, you should limit yourself to the three major file types: PNG, JPEG, and GIF. You should not use older formats such as BMP that do not compress very well.
GIF stands for Graphics Interchange Format, and is the only format that allows for animated images. It allows an image to reference a palette of up to 256 distinct colors. Because of the color limitation, the GIF format is not the best choice for color photographs. This format is best used for graphics, logos, or other images with solid colors.
JPEG stands for Joint Photographic Experts Group (the group that created the standard). This type is most often used for photographs, which is why the type is used by most digital cameras. It is best suited for images that have smooth variation of tone and color, which is why it is best for photographs.
PNG stands for Portable Network Graphics, and was developed as a replacement for the GIF format. However, PNG does not support multiple images (animation). It supports a wider array of colors than the GIF format does. Many times, an original GIF image stores in a smaller file when stored as a PNG image. If bandwidth is a concern, you should use PNG instead of GIF for your logos, graphics, or other non-photographic images.
There are two types of caching when it comes to images – caching by the Domino server, and caching by the local browser or client. If a URL used to locate an image remains constant, it can be cached by the local browser or client and used on subsequent page requests by the same browser.
To take advantage of Domino server image caching, use Image Resources for your images. You can reference the Image Resource in your XPage designs. These images are cached by the Domino server and improve the performance for subsequent renderings of the page by different users.
If you want to have an image and a thumbnail of the image, use two distinct images instead of trying to scale on the browser. There are no-charge Internet sites where you can convert an image to a thumbnail. The thumbnail does not need to have the same fidelity as the original image, and can therefore be a far smaller file size. If you scale on the browser, you are affecting the performance of your application in two ways:
- The full image has to be sent to the browser, increasing bandwidth over the thumbnail.
- The browser has to do the work of scaling the image down to the right size, which takes CPU cycles on the user's computer to complete.
Using two images does not take advantage of caching on the browser, but the disadvantages of increasing the bandwidth and the browser scaling more than offsets the caching advantage (which is not an advantage when an individual browser first visits a page).
There are two types of image compression: "lossy” and “lossless". When an image is compressed, if done using a "lossless" compression, all the data in the original image is maintained. In a "lossy" compression, some of the data is removed from the original file to achieve a smaller file size. Depending on the image, the changes to the image may be imperceptible. Photographs generally benefit the most from “lossy” compression. There are many web sites on the Internet that compress images that you upload to their server. If you are using graphics in your application, see if you (or a co-worker) notice the difference between the original and the compressed image. If the differences are difficult to distinguish, then you should use the compressed image with the reduced file size in your application – the reduced network traffic will improve the performance of your application.
Parent topic: 6.0 Performance considerations