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