Because of what they do, there’s a lot of powerful imagery they would like to share with their visitors. One issue I didn’t have to deal with on this site but did for PAWS New England was the creation of image sprites.
If you’re not familiar with the concept, an image sprite is a single file containing all the graphics you need for a site. These graphics are then placed on the site using the
background tag rather than the
img tag. Even though the resulting file is one large one, it’s actually easier and faster for browsers to download than multiple smaller files, because it requires fewer HTTP requests.
So CSS sprites are good for performance. They’re also a pain to create. Fortunately, there’s an app that makes it a lot easier.
CSS Sprite Generator is awesome. You simply upload your images in a single ZIP file and it does the rest. It combines them into a single PNG file and provides you with the css to use them on your site.
You can specify a prefix, background colors and more.
The one downside to sprites that I’ve encountered is that they don’t resize themselves in fluid layouts. For small icons, this isn’t an issue. But for large full-width graphics, it’s a real problem.
For the few big graphics we’ve used, I’ve had to forgo sprites. If you know a workaround, I’d love to hear about it!
🔥 Hot off the press! I just launched a new pocket guide. Learn about ES6 arrow functions,
const, function hoisting, and more.