0

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.

Improve this question
4
  • I am looking for specific instructions on how to achieve this in Drupal (any module, library or anything similar).
    – Rana Prathap
    Dec 26, 2013 at 12:21
  • 1
    I do not think there will be module for this.Your themer needs to create a sprite of images and then you have to do css changes to give appropriate positions to images.
    – arpitr
    Dec 26, 2013 at 12:35
  • 3
    @Webmaster Drupal won't help with combining your images and generating CSS. There are tools like sprite.me that can help though
    – Clive ♦
    Dec 26, 2013 at 13:35
  • I am asking if there is anything available like this[drupal.org/project/sprites] and this[drupal.org/project/sprite] that eases the process for drupal 7.
    – Rana Prathap
    Dec 26, 2013 at 14:29

2 Answers 2

Reset to default
2

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.

Improve this answer
0

A quick and dirty alternative to CSS sprites is embedded images in CSS. https://drupal.org/project/css_emimage is the module to use. Be sure to use it along with AdvAgg

Improve this answer
1
  • 1
    I wouldn't recommend that module either because that module forces all your images to be base64'd and baked into your css. Good luck waiting for your pages to paint on mobile browsers: mobify.com/blog/data-uris-are-slow-on-mobile
    – chrisjlee
    Dec 26, 2013 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.