CSS::SpriteMaker is a Perl module that allows users to combine multiple images into a single sprite image and generate corresponding CSS code. It aims to provide a native Perl solution for creating CSS sprites without relying on other languages. The module implements different layout algorithms to organize images in the sprite and allows users to generate sprites from the command line or integrate it into their applications. Future plans include adding more layouts, tests, abstracting the imaging and stylesheet generation, and a binary for command line usage.

1. Combine multiple images
and speed up your website with
CSS::SpriteMaker
YAPC::Europe 2013 “Future Perl”
Kiev, Monday, 12 August 2013 12:20
Savio Dimatteo
Perl Developer
Nestoria Property Search

2. Overview
● CSS Image Sprites
● Existing solutions
● CSS::SpriteMaker
● Future plans

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?

6. Making a Sprite
Everyone can make sprites!

7. Making Sprites Online
http://csssprites.com/

8. Making Sprites Online
http://spritegen.website-performance.org

9. Making Sprites Online
http://css-sprit.es

10. Making Sprites Online - WYSIWYG
http://spritepad.wearekiss.com

11. Making Sprites Online - WYSIWYG
http://www.spritebox.net

12. Making Sprites Offline
https://github.com/carrotsearch/smartsprites
● Java-based solution
● provides Eclipse plugin

13. Making Sprites Offline
https://github.com/jorgebastida/glue
● Python-based solution
● generates .less and .css stylesheets
● command line tool

14. Making Sprites Offline
https://github.com/jakesgordon/sprite-factory
● Ruby + Rails integration
● Nicely documented, seems easily extensible
and well-designed

15. Making Sprites... with Perl
http://www.lemoda.net/perl/css-sprite/index.html

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

19. CSS::SpriteMaker - SYNOPSIS
use CSS::SpriteMaker;
my $SpriteMaker = CSS::SpriteMaker->new();
$SpriteMaker->make_sprite(
source_images => ['/path/to/pokemon_icons',
'/images/pikachu.png', ...];
target_file => '/tmp/test/many_pokemons.png',
);
$SpriteMaker->print_css();

20. CSS::SpriteMaker - SYNOPSIS
use CSS::SpriteMaker;
...
$SpriteMaker->make_sprite(
source_images => ['/path/to/pokemon_icons',
'/images/pikachu.png', ...];
target_file => '/tmp/test/many_pokemons.png',
layout_name => ‘Packed’,
remove_source_padding => 1,
format => ‘png8’
);
$SpriteMaker->print_html();

21. CSS::SpriteMaker - design

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

24. CSS::SpriteMaker::Layout::DirectoryBased
● subdirectories as input
● each subdirectory contains images
● images in the same directory go on the same
line

25. ● more tests
● more layouts
● abstract imaging library
● abstract stylesheet generator
● binary to make sprites from command line
Future Plans

26. Combine multiple images
and speed up your website with
CSS::SpriteMaker
YAPC::Europe 2013 “Future Perl”
Kiev, Monday, 12 August 2013 12:20
Questions?
● github.com/darksmo
● twitter.com/darksmo