Visualforce Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Optimize Images
Images are frequently the largest components of a web page, so they significantly affect
a Visualforce page’s performance.
To minimize the performance impact of images:
- Use fewer images and smaller background textures.
- Use CSS instead of images whenever possible.
- Use CSS sprites instead of individual images. With CSS sprites, you can combine a collection of similarly sized graphics, such as buttons and icons, into a single file. Then you can use the CSS background-image and background-position properties to display portions of the combined image. Because this technique reduces the number of images used, the number of HTTP requests sent also decreases. It’s also more efficient to cache a sprite file than to cache multiple images.
- Use static resources to serve images. Images served this way benefit from the caching and the content distribution network (CDN) built into Salesforce.
- Compress images. Graphics tools often use default settings that favor visual fidelity over compression and add metadata when saving images. Image compression tools can reduce an image’s file size by up to 30% without lowering visual quality.