skip to main content
research-article

Analysis and Solution of CSS-Sprite Packing Problem

Authors Info & Claims
Published:29 December 2015Publication History
Skip Abstract Section

Abstract

A CSS-sprite packing problem is considered in this article. CSS-sprite is a technique of combining many pictures of a web page into one image for the purpose of reducing network transfer time. The CSS-sprite packing problem is formulated here as an optimization challenge. The significance of geometric packing, image compression and communication performance is discussed. A mathematical model for constructing multiple sprites and optimization of load time is proposed. The impact of PNG-sprite aspect ratio on file size is studied experimentally. Benchmarking of real user web browsers communication performance covers latency, bandwidth, number of concurrent channels as well as speedup from parallel download. Existing software for building CSS-sprites is reviewed. A novel method, called Spritepack, is proposed and evaluated. Spritepack outperforms current software.

References

  1. ARC Project. 2013. Survey on Two-Dimensional Packing. Retrieved from http://cgi.csc.liv.ac.uk/∼epa/survey.pdf.Google ScholarGoogle Scholar
  2. Jacek Błażewicz and Jedrzej Musiał. 2010. E-commerce evaluation-multi-item internet shopping, optimization and heuristic algorithms. In Operations Research Proceedings, B. Hu et al. (Ed.). Springer-Verlag, Berlin, 149--154.Google ScholarGoogle Scholar
  3. Thomas Boutell, Pierre Joye, and PHP.net. 2013. GD Graphics Library. Retrieved from http://libgd.bitbucket.org/.Google ScholarGoogle Scholar
  4. Kristian Bredies and Martin Holler. 2012. A total variation-based JPEG decompression model. SIAM J. Imaging Sci. 5, 1 (2012), 366--393. Google ScholarGoogle ScholarDigital LibraryDigital Library
  5. Konstantin Chakhlevitch and Peter Cowling. 2008. Hyperheuristics: Recent developments. In Adaptive and Multilevel Metaheuristics, C. Cotta et al. (Ed.). Studies in Computational Intelligence, Vol. 136. Springer-Verlag, Berlin, 3--29.Google ScholarGoogle Scholar
  6. Bernard Chazelle. 1983. The bottom-left bin-packing heuristic: An efficient implementation. IEEE Trans. Comput. 32, 8 (1983), 697--707. Google ScholarGoogle ScholarDigital LibraryDigital Library
  7. Tung-Chieh Chen and Yao-Wen Chang. 2006. Modern floorplanning based on B*-tree and fast simulated annealing. IEEE Trans. Comput.-Aided Des. Integr. Circuits Syst. 25 (2006), 637--650. Google ScholarGoogle ScholarDigital LibraryDigital Library
  8. Sergey Chikuyonok. 2009a. Clever JPEG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/.Google ScholarGoogle Scholar
  9. Sergey Chikuyonok. 2009b. Clever PNG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/.Google ScholarGoogle Scholar
  10. N. Christofides and C. Whitlock. 1977. An algorithm for two-dimensional cutting problems. Oper. Res. 25, 1 (1977), 30--44. Google ScholarGoogle ScholarDigital LibraryDigital Library
  11. CompuServe Inc. 1990. Graphics Interchange Format. Retrieved from http://www.w3.org/Graphics/GIF/spec-gif89a.txt.Google ScholarGoogle Scholar
  12. Andy Davies, Gregor Fabritius, Neil Jedrzejewski, Alessandro Lenzen, Claus Meteling, André Roaldseth, Christian Schäfer, and Yoav Weiss. 2014. Adept - The Adaptive JPG Compressor. Retrieved from https://github.com/technopagan/adept-jpg-compressor/.Google ScholarGoogle Scholar
  13. Maciej Drozdowski and Jakub Marszałkowski. 2014. On the Complexity of Sprite Packing. Technical report. RA-07/2014, Institute of Computing Science, Poznań University of Technology.Google ScholarGoogle Scholar
  14. Michael Eckert and Andrew Bradley. 1998. Perceptual quality metrics applied to still image compression. Signal Processing 70 (1998), 177--200. Google ScholarGoogle ScholarDigital LibraryDigital Library
  15. P. C. Gilmore and R. E. Gomory. 1965. Multistage cutting stock problems of two and more dimensions. Oper. Res. 13, 1 (1965), 94--120.Google ScholarGoogle ScholarDigital LibraryDigital Library
  16. Jake Gordon. 2011. Binary Tree Bin Packing Algorithm. Retrieved from http://codeincomplete.com/posts/2011/5/7/bin_packing/.Google ScholarGoogle Scholar
  17. Pei-Ning Guo, Toshihiko Takahashi, Chung-Kuan Cheng, and Takeshi Yoshimura. 2001. Floorplanning using a tree representation. IEEE Trans. Comput.-Aided Des. Integr. Circuits Syst. 20, 2 (2001), 281--289. Google ScholarGoogle ScholarDigital LibraryDigital Library
  18. HTTPbis Working Group. 2015. Hypertext Transfer Protocol Version 2. Retrieved from https://tools.ietf.org/html/draft-ietf-httpbis-http2-17.Google ScholarGoogle Scholar
  19. Eric Huang and Richard E. Korf. 2009. New improvements in optimal rectangle packing. In Proceedings of the 21st International Jont Conference on Artificial Intelligence (IJCAI’09). 511--516. Google ScholarGoogle ScholarDigital LibraryDigital Library
  20. Impulse Adventure. 2007. What Is an Optimized JPEG? Retrieved from http://www.impulseadventure.com/photo/optimized-jpeg.html.Google ScholarGoogle Scholar
  21. Independent JPEG Group. 2012. Jpegtran. Retrieved from http://jpegclub.org/jpegtran/.Google ScholarGoogle Scholar
  22. International Telecommunication Union. 1993. Recommendation T.81: Information Technology - Digital Compression and Coding of Continuous-Tone Still Images - Requirements and Guidelines. Retrieved from http://www.w3.org/Graphics/JPEG/itu-t81.pdf.Google ScholarGoogle Scholar
  23. Myeongjae Jeon, Youngjae Kim, Jeaho Hwang, Joonwon Lee, and Euiseong Seo. 2012. Workload characterization and performance implications of large-scale blog servers. ACM Trans. Web (TWEB) 6, 4 (2012), 16. Google ScholarGoogle ScholarDigital LibraryDigital Library
  24. Richard M. Karp. 1972. Reducibility among combinatorial problems. In Complexity of Computer Computations, R. E. Miller and J. W. Thatcher (Ed.). Plenum Press, New York, 85--103.Google ScholarGoogle Scholar
  25. Richard E. Korf. 2003. Optimal rectangle packing: Initial results. In Proceedings of the 13th International Conference on Automated Planning and Scheduling (ICAPS’03). American Association for Artificial Intelligence, Palo Alto, CA, 287--295.Google ScholarGoogle Scholar
  26. Richard E. Korf and Eric Huang. 2012. Optimal rectangle packing: An absolute placement approach. J. Artif. Intell. Res. 46 (2012), 47--87. Google ScholarGoogle ScholarDigital LibraryDigital Library
  27. Richard E. Korf, Michael D. Moffitt, and Martha E. Pollack. 2010. Optimal rectangle packing. Ann. Oper. Res. 179, 1 (2010), 261--295.Google ScholarGoogle ScholarCross RefCross Ref
  28. Andrea Lodi, Silvano Martello, and Michele Monaci. 2002. Two-dimensional packing problems: A survey. Eur. J. Oper. Res. 141, 2 (2002), 241--252.Google ScholarGoogle ScholarCross RefCross Ref
  29. Cédric Louvrier. 2013. Optimisation Web (Images, Performance). Retrieved from http://css-ig.net/.Google ScholarGoogle Scholar
  30. Jakub Marszałkowski and Maciej Drozdowski. 2013. Optimization of column width in website layout for advertisement fit. Eur. J. Oper. Res. 226, 3 (2013), 592--601.Google ScholarGoogle ScholarCross RefCross Ref
  31. Jakub Marszałkowski, Jedrzej M. Marszałkowski, and Maciej Drozdowski. 2014. Empirical study of load time factor in search engine ranking. J. Web Eng. 13, 1&2 (2014), 114--128. Google ScholarGoogle ScholarDigital LibraryDigital Library
  32. Jakub Marszałkowski, Jan Mizgajski, Dariusz Mokwa, and Maciej Drozdowski. 2015. Spritepack Resources. Retrieved from http://www.cs.put.poznan.pl/mdrozdowski/spritepack/.Google ScholarGoogle Scholar
  33. Larry Masinter. 1998. RFC 2397: The “Data” URL Scheme. Retrieved from https://www.ietf.org/rfc/rfc2397.txt.Google ScholarGoogle Scholar
  34. Robert McNaughton. 1959. Scheduling with deadlines and loss functions. Manage. Sci. 6, 1 (1959), 1--12. Google ScholarGoogle ScholarDigital LibraryDigital Library
  35. Mozilla Co. 2014. Mozilla JPEG Encoder Project. Retrieved from https://github.com/mozilla/mozjpeg/.Google ScholarGoogle Scholar
  36. Nthabiseng Ntene and Jan H. van Vuuren. 2009. A survey and comparison of guillotine heuristics for the 2D oriented offline strip packing problem. Discrete Optim. 6, 2 (2009), 174--188. Google ScholarGoogle ScholarDigital LibraryDigital Library
  37. Nuclex Framework. 2009. Rectangle Packing. Retrieved from http://nuclexframework.codeplex.com/wikipage?title=Rectangle.Google ScholarGoogle Scholar
  38. Matt Perdeck. 2011. Fast Optimizing Rectangle Packing Algorithm for Building CSS Sprites. Retrieved from http://www.codeproject.com/Articles/210979/Fast-optimizing-rectangle-packing-algorithm-for-bu.Google ScholarGoogle Scholar
  39. Irina Popovici and Wm. Douglas Withers. 2007. Locating edges and removing ringing artifacts in JPEG images by frequency-domain analysis. IEEE Trans. Image Process. 16, 5 (2007), 1470--1474. Google ScholarGoogle ScholarDigital LibraryDigital Library
  40. Glenn Randers-Pehrson and Thomas Boutell. 1999. PNG (Portable Network Graphics) Specification. http://www.libpng.org/pub/png/spec/1.2/PNG-Contents.html. (1999).Google ScholarGoogle Scholar
  41. Dave Shea. 2004. CSS Sprites: Image Slicing’s Kiss of Death. Retrieved from http://www.alistapart.com/articles/sprites.Google ScholarGoogle Scholar
  42. Ken Silverman. 2013. Ken Silverman’s Utility Page. Retrieved from http://advsys.net/ken/utils.htm.Google ScholarGoogle Scholar
  43. Lindsey Simon and Steve Souders. 2015. Browserscope. Retrieved from http://www.browserscope.org/?category=network&v==1.Google ScholarGoogle Scholar
  44. Kyle Simpson. 2015. Obsessions: HTTP Request Reduction. Retrieved from http://blog.getify.com/obsessions-http-request-reduction/.Google ScholarGoogle Scholar
  45. Petr Staníček. 2003. CSS Technique: Fast Rollovers Without Preload. Retrieved from http://wellstyled.com/css-nopreload-rollovers.html.Google ScholarGoogle Scholar
  46. Stoyan Stefanov. 2008. Image Optimization, Part 3: Four Steps to File Size Reduction. Retrieved from http://yuiblog.com/blog/2008/11/14/imageopt-3/.Google ScholarGoogle Scholar
  47. A. Steinberg. 1997. A strip-packing algorithm with absolute performance bound. SIAM J. Comput. 26, 2 (1997), 401--409. Google ScholarGoogle ScholarDigital LibraryDigital Library
  48. Pedro Velho, Lucas Mello Schnorr, Henri Casanova, and Arnaud Legrand. 2013. On the validity of flow-level TCP network models for grid and cloud simulations. ACM Trans. Model. Comput. Simul. 23, 4 (2013), 23. Google ScholarGoogle ScholarDigital LibraryDigital Library
  49. Gregory K. Wallace. 1991. The JPEG still picture compression standard. Commun. ACM 34, 4 (1991), 30--44. Google ScholarGoogle ScholarDigital LibraryDigital Library
  50. WebPageTest. 2015. WebPageTest. Retrieved from http://www.webpagetest.org/.Google ScholarGoogle Scholar
  51. Bruce D. Weinberg. 2000. Don’t keep your Internet customers waiting too long at the (virtual) front door. J. Interact. Marketing 14, 1 (2000), 30--39.Google ScholarGoogle ScholarCross RefCross Ref

Index Terms

  1. Analysis and Solution of CSS-Sprite Packing Problem

          Recommendations

          Comments

          Login options

          Check if you have access through your login credentials or your institution to get full access on this article.

          Sign in

          Full Access

          PDF Format

          View or Download as a PDF file.

          PDF

          eReader

          View online with eReader.

          eReader
          About Cookies On This Site

          We use cookies to ensure that we give you the best experience on our website.

          Learn more

          Got it!