# Fwd: Automated image combining to improve page load speeds

**URL:** <https://www.ruby-forum.com/t/fwd-automated-image-combining-to-improve-page-load-speeds/186812>\
**Category:** Ruby\
**Created:** [April 12, 2010, 8:05pm UTC](https://www.ruby-forum.com/t/fwd-automated-image-combining-to-improve-page-load-speeds/186812 "2010-04-12T20:05:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![murfhy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/d26b3c/32.png) [@murfhy](https://www.ruby-forum.com/u/murfhy)\
**Post date:** [April 12, 2010, 8:05pm UTC](https://www.ruby-forum.com/t/fwd-automated-image-combining-to-improve-page-load-speeds/186812/1 "2010-04-12T20:05:17Z")

</div>

We’re working with a slow embedded browser and trying to eek as much  
performance out of it as we can. We recently combined all CSS and  
JavaScript files using the excellent Jammit asset packaging tool, a Ruby  
wrapper for the YUI compressor.

I’m wondering if someone has written a similar Ruby wrapper for  
automatically combining multiple images into a single image in such a  
way  
that it fits into a rake workflow. If you’re unfamiliar with this  
technique  
it’s used by YouTube among others. Here’s an example of a single image  
which contains all of the (non-thumbnail) image elements on YouTube:

[![](http://www.sajithmr.com/wp-content/uploads/2008/05/master.jpg) ](http://www.sajithmr.com/wp-content/uploads/2008/05/master.jpg)

From there CSS positioning is used to display the relevant portions of  
this  
image.

Does such a tool exist? Ideally we’d develop with uncombined images,  
then  
switch to combined images in production.

---

<div class="post-metadata">

**Author:** ![murfhy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/d26b3c/32.png) [@murfhy](https://www.ruby-forum.com/u/murfhy)\
**Post date:** [April 12, 2010, 8:29pm UTC](https://www.ruby-forum.com/t/fwd-automated-image-combining-to-improve-page-load-speeds/186812/2 "2010-04-12T20:29:52Z")

</div>

On Mon, Apr 12, 2010 at 11:04 AM, Tony A. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)  
wrote:

> I’m wondering if someone has written a similar Ruby wrapper for  
> automatically combining multiple images into a single image …

> From there CSS positioning is used to display the relevant portions of this  
> image.
> 
> Does such a tool exist? Ideally we’d develop with uncombined images, then  
> switch to combined images in production.

Haven’t had a chance to try it yet, but just saw this the other day:

[http://www.huangzhimin.com/entries/190-css-sprite-best-practices](http://www.huangzhimin.com/entries/190-css-sprite-best-practices)

HTH!

---

<div class="post-metadata">

**Author:** ![murfhy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/d26b3c/32.png) [@murfhy](https://www.ruby-forum.com/u/murfhy)\
**Post date:** [April 12, 2010, 8:33pm UTC](https://www.ruby-forum.com/t/fwd-automated-image-combining-to-improve-page-load-speeds/186812/3 "2010-04-12T20:33:58Z")

</div>

On Mon, Apr 12, 2010 at 12:25 PM, Hassan S. \<  
removed\_email\_address@domain.invalid\> wrote:

> Haven’t had a chance to try it yet, but just saw this the other day:
> 
> [http://www.huangzhimin.com/entries/190-css-sprite-best-practices](http://www.huangzhimin.com/entries/190-css-sprite-best-practices)

Cool, that’s exactly what I’m looking for. Thanks.