css sprite_maker-1
TRANSCRIPT
Combine multiple images and speed up your website with
CSS::SpriteMaker
YAPC::Europe 2013 “Future Perl”Kiev, Monday, 12 August 2013 12:20
Savio DimatteoPerl DeveloperNestoria Property Search
Overview
● CSS Image Sprites
● Existing solutions
● CSS::SpriteMaker
● Future plans
What is an Image Sprite?
● a large image containing many small images
many_pokemons.png
● 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?
● 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?
Making a Sprite
Everyone can make sprites!
Making Sprites Onlinehttp://spritegen.website-performance.org
Making Sprites Online - WYSIWYGhttp://spritepad.wearekiss.com
Making Sprites Online - WYSIWYGhttp://www.spritebox.net
Making Sprites Offline
https://github.com/carrotsearch/smartsprites
● Java-based solution
● provides Eclipse plugin
Making Sprites Offline
https://github.com/jorgebastida/glue
● Python-based solution
● generates .less and .css stylesheets
● command line tool
Making Sprites Offline
https://github.com/jakesgordon/sprite-factory
● Ruby + Rails integration
● Nicely documented, seems easily extensible
and well-designed
Making Sprites... with Perlhttp://www.lemoda.net/perl/css-sprite/index.html
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
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?
Why CSS::SpriteMaker?
● want documented & tested code
● want alternative ways to layout images
● want more organised code
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();
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();
CSS::SpriteMaker - design
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()
● 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
CSS::SpriteMaker::Layout::DirectoryBased
● subdirectories as input● each subdirectory contains images● images in the same directory go on the same
line
● more tests
● more layouts
● abstract imaging library
● abstract stylesheet generator
● binary to make sprites from command line
Future Plans
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