Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss
From the author of 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.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus