Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css sprite_maker-1

1,743 views

Published on

Published in: Technology, Education
  • Be the first to comment

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

×