␡
- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
- Summary
Like this article? We recommend
Tip 6: Avoid Using Images and Other Separate Asset Files
Tip 6: Avoid Using Images and Other Separate Asset Files
A significant performance issue comes from having a lot of separate images and other assets used on your site, and therefore having to employ a large number of separate HTTP requests to download them all. To improve the situation, try to cut down on the number of separate files. Several options are available:
- Put large numbers of separate image files into a single image sprite file, and then display the different images using different background-position values.
- Replace images with CSS3 effects such as gradient and border-radius that create graphical effects.
- Use embedded SVG or base64-encoded images to create graphical effects.
- Rather than using lots of small images, use a small number of larger external CSS and JavaScript files.