For a work in progress in my spare time (a WordPress Theme) I decided to implement one quite useful technique for images merging that has the following pros:
- reduces HTTP requests
- usually leads to better compression
- no flickering with onmouseover events
I suggest using it when you have many looking-alike graphical elements (buttons, icons, panels) that you are setting as not-repeating CSS background.
Having prepared your image (merging couple buttons) in this case:
use CSS definitions like the following (notice the background vertical position 0,31,62 )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#button1 a{ background:transparent url(image-optimization.gif) no-repeat 0 0; }#button2 a{ background:transparent url(image-optimization.gif) no-repeat 0 -31px; }#button3 a{ background:transparent url(image-optimization.gif) no-repeat 0 -62px; } |
And as usual everything wrapped in simple example