• Like
Css  sprite_maker-1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Css sprite_maker-1

  • 682 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
682
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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