Css sprite_maker-1

1,618 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,618
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css sprite_maker-1

  1. 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. 2. Overview ● CSS Image Sprites ● Existing solutions ● CSS::SpriteMaker ● Future plans
  3. 3. What is an Image Sprite? ● a large image containing many small images many_pokemons.png
  4. 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. 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. 6. Making a Sprite Everyone can make sprites!
  7. 7. Making Sprites Online http://csssprites.com/
  8. 8. Making Sprites Online http://spritegen.website-performance.org
  9. 9. Making Sprites Online http://css-sprit.es
  10. 10. Making Sprites Online - WYSIWYG http://spritepad.wearekiss.com
  11. 11. Making Sprites Online - WYSIWYG http://www.spritebox.net
  12. 12. Making Sprites Offline https://github.com/carrotsearch/smartsprites ● Java-based solution ● provides Eclipse plugin
  13. 13. Making Sprites Offline https://github.com/jorgebastida/glue ● Python-based solution ● generates .less and .css stylesheets ● command line tool
  14. 14. Making Sprites Offline https://github.com/jakesgordon/sprite-factory ● Ruby + Rails integration ● Nicely documented, seems easily extensible and well-designed
  15. 15. Making Sprites... with Perl http://www.lemoda.net/perl/css-sprite/index.html
  16. 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. 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. 18. Why CSS::SpriteMaker? ● want documented & tested code ● want alternative ways to layout images ● want more organised code
  19. 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. 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. 21. CSS::SpriteMaker - design
  22. 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. 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. 24. CSS::SpriteMaker::Layout::DirectoryBased ● subdirectories as input ● each subdirectory contains images ● images in the same directory go on the same line
  25. 25. ● more tests ● more layouts ● abstract imaging library ● abstract stylesheet generator ● binary to make sprites from command line Future Plans
  26. 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

×