Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Compass Basics Spriting with Compass Creating a Sprite Sheet

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Should I include all images in my site as a single/few sprites?

I was a little confused when Guil introduced image srpites in this video as I had never heard of them before. Now I think I understand what a spritesheet is and why is it for, but...

Should I include all the images (icons, photos) in my site as a singe/few sprites to enhance performance?

When should I include an image directly in the markup?

How is SEO affected if all images are included as sprites via CSS?

1 Answer

You can only sprite background images. As a best practice you'd normally want things like icons and other images that are "part of the design of the page" and NOT content. Content images like photos, diagrams, charts should be called as foreground images by using the img tag and not called via css or sprited. For improved seo make sure the file names are relevant and you have alt attributes that describe the image. For icons you might want to use font icons rather than sprite as those have a lot of additional advantages, like infinite scaling and being able to change color via css. Hope that helps!

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

It helped A LOT! Extremely clear answer! Thank you!