Your SlideShare is downloading. ×
0
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Css  sprite_maker-1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css sprite_maker-1

823

Published on

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

No Downloads
Views
Total Views
823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
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

×