Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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!