3. What is an Image Sprite?
● a large image containing many small images
many_pokemons.png
4. ● Image Sprite + CSS rules
<div id=“pikachu” />
div#pikachu {
background-image:
url('many_pokemons.png');
background-position: -215px -0px;
width: 10px;
height: 10px;
}
What is a CSS Image Sprite?
5. ● Transferring lots of small files over HTTP is
"slow" even if you have a lot of bandwidth
<img src=“pikachu.png”
alt=“Pikachu pokemon”
height=“10”
width=“10”>
Why CSS Sprite Images?
16. Making Sprites... with Perl
● Image::CSSSprite
○ last commit: 3 years ago
○ Japanese comments in code (this is cool)
Warning: Cannot install Image::CSSSprite, don't know
what it is
○ no tests, not a lot of POD
17. Why CSS::SpriteMaker?
● I haven’t found a "real" Perl alternative to
make CSS Sprites.
● why installing Python modules and
dependencies to make an image surrounded
by tons of Perl code?
18. Why CSS::SpriteMaker?
● want documented & tested code
● want alternative ways to layout images
● want more organised code
22. CSS::SpriteMaker::Layout
● base class of a Layout
● implementing a new layout:
○ use base CSS::SpriteMaker::Layout
○ implement the _layout_items method
○ call $self->finalize()
23. ● minimise the 2D space used in the output
● resulting images tend to look like squares
● ported packer.growing.js, a Javascript Binary
Tree packing algorithm
CSS::SpriteMaker::Layout::Packed