I ran a Page Speed review of my website and got a suggestion that I should combine some images on my site into a single image using CSS sprites. I assume it is the mistake of the person who coded the theme, and I cannot recode it due to lack of knowledge. Is there any easier way of achieving this in Drupal? What I am looking for is solutions like this and this that would make the process easy for Drupal 7.
Drupal's primary role is a CMS. For development tooling, it's probably more effective and more efficient if you build sprites without the use of Drupal. Drupal itself already has a very large memory footprint.
How to produce CSS sprites (2013/2014 Edition)
With today's rapid growth in development tooling and technology, here are just some ways of which one can produce sprites for your theme today:
- Manually Manually edit them in photoshop and place them accordingly in the same file and write css for it. If this isn't clear to you. There's a plethora of information on how to do this: here, here, here, and yes there's plenty of more articles out there. Just search for "css sprites" in your favorite search engine.
- Use Compass Compass, a Ruby Gem, allows one to automatically generate sprites. It's very well used and integrated in some themes today. For example, Zurb Foundation.
- Grunt Spritesmith If you're familiar with using Grunt and have node already setup on your local machine Spritesmith is a viable option. Spritesmith allows you to create sprites within a folder for use of your theme.
- CSS Sprite Generator - I quickly googled 'css sprite generator' and found this particular tool. Not sure if it's helpful but it seems as to allow you to build sprites online via upload.
Again, IMHO i'm pretty skeptical and think that outdated Drupal 5 sprite module will improve your front performance when you have to load one more module.