Optimize Images

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.