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.
- ARC Project. 2013. Survey on Two-Dimensional Packing. Retrieved from http://cgi.csc.liv.ac.uk/∼epa/survey.pdf.Google Scholar
- 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 Scholar
- Thomas Boutell, Pierre Joye, and PHP.net. 2013. GD Graphics Library. Retrieved from http://libgd.bitbucket.org/.Google Scholar
- Kristian Bredies and Martin Holler. 2012. A total variation-based JPEG decompression model. SIAM J. Imaging Sci. 5, 1 (2012), 366--393. Google Scholar
Digital Library
- 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 Scholar
- Bernard Chazelle. 1983. The bottom-left bin-packing heuristic: An efficient implementation. IEEE Trans. Comput. 32, 8 (1983), 697--707. Google Scholar
Digital Library
- 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 Scholar
Digital Library
- Sergey Chikuyonok. 2009a. Clever JPEG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/.Google Scholar
- Sergey Chikuyonok. 2009b. Clever PNG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/.Google Scholar
- N. Christofides and C. Whitlock. 1977. An algorithm for two-dimensional cutting problems. Oper. Res. 25, 1 (1977), 30--44. Google Scholar
Digital Library
- CompuServe Inc. 1990. Graphics Interchange Format. Retrieved from http://www.w3.org/Graphics/GIF/spec-gif89a.txt.Google Scholar
- 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 Scholar
- 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 Scholar
- Michael Eckert and Andrew Bradley. 1998. Perceptual quality metrics applied to still image compression. Signal Processing 70 (1998), 177--200. Google Scholar
Digital Library
- 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 Scholar
Digital Library
- Jake Gordon. 2011. Binary Tree Bin Packing Algorithm. Retrieved from http://codeincomplete.com/posts/2011/5/7/bin_packing/.Google Scholar
- 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 Scholar
Digital Library
- HTTPbis Working Group. 2015. Hypertext Transfer Protocol Version 2. Retrieved from https://tools.ietf.org/html/draft-ietf-httpbis-http2-17.Google Scholar
- 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 Scholar
Digital Library
- Impulse Adventure. 2007. What Is an Optimized JPEG? Retrieved from http://www.impulseadventure.com/photo/optimized-jpeg.html.Google Scholar
- Independent JPEG Group. 2012. Jpegtran. Retrieved from http://jpegclub.org/jpegtran/.Google Scholar
- 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 Scholar
- 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 Scholar
Digital Library
- 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 Scholar
- 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 Scholar
- Richard E. Korf and Eric Huang. 2012. Optimal rectangle packing: An absolute placement approach. J. Artif. Intell. Res. 46 (2012), 47--87. Google Scholar
Digital Library
- Richard E. Korf, Michael D. Moffitt, and Martha E. Pollack. 2010. Optimal rectangle packing. Ann. Oper. Res. 179, 1 (2010), 261--295.Google Scholar
Cross Ref
- Andrea Lodi, Silvano Martello, and Michele Monaci. 2002. Two-dimensional packing problems: A survey. Eur. J. Oper. Res. 141, 2 (2002), 241--252.Google Scholar
Cross Ref
- Cédric Louvrier. 2013. Optimisation Web (Images, Performance). Retrieved from http://css-ig.net/.Google Scholar
- 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 Scholar
Cross Ref
- 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 Scholar
Digital Library
- Jakub Marszałkowski, Jan Mizgajski, Dariusz Mokwa, and Maciej Drozdowski. 2015. Spritepack Resources. Retrieved from http://www.cs.put.poznan.pl/mdrozdowski/spritepack/.Google Scholar
- Larry Masinter. 1998. RFC 2397: The “Data” URL Scheme. Retrieved from https://www.ietf.org/rfc/rfc2397.txt.Google Scholar
- Robert McNaughton. 1959. Scheduling with deadlines and loss functions. Manage. Sci. 6, 1 (1959), 1--12. Google Scholar
Digital Library
- Mozilla Co. 2014. Mozilla JPEG Encoder Project. Retrieved from https://github.com/mozilla/mozjpeg/.Google Scholar
- 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 Scholar
Digital Library
- Nuclex Framework. 2009. Rectangle Packing. Retrieved from http://nuclexframework.codeplex.com/wikipage?title=Rectangle.Google Scholar
- 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 Scholar
- 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 Scholar
Digital Library
- 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 Scholar
- Dave Shea. 2004. CSS Sprites: Image Slicing’s Kiss of Death. Retrieved from http://www.alistapart.com/articles/sprites.Google Scholar
- Ken Silverman. 2013. Ken Silverman’s Utility Page. Retrieved from http://advsys.net/ken/utils.htm.Google Scholar
- Lindsey Simon and Steve Souders. 2015. Browserscope. Retrieved from http://www.browserscope.org/?category=network&v==1.Google Scholar
- Kyle Simpson. 2015. Obsessions: HTTP Request Reduction. Retrieved from http://blog.getify.com/obsessions-http-request-reduction/.Google Scholar
- Petr Staníček. 2003. CSS Technique: Fast Rollovers Without Preload. Retrieved from http://wellstyled.com/css-nopreload-rollovers.html.Google Scholar
- 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 Scholar
- A. Steinberg. 1997. A strip-packing algorithm with absolute performance bound. SIAM J. Comput. 26, 2 (1997), 401--409. Google Scholar
Digital Library
- 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 Scholar
Digital Library
- Gregory K. Wallace. 1991. The JPEG still picture compression standard. Commun. ACM 34, 4 (1991), 30--44. Google Scholar
Digital Library
- WebPageTest. 2015. WebPageTest. Retrieved from http://www.webpagetest.org/.Google Scholar
- 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 Scholar
Cross Ref
Index Terms
Analysis and Solution of CSS-Sprite Packing Problem
Recommendations
An Approach for Color Image Compression of JPEG and PNG Images Using DCT and DWT
CICN '14: Proceedings of the 2014 International Conference on Computational Intelligence and Communication NetworksNow a days image compression has become is an indispensible part of digitized image storage and transmission. Compression of an image is necessary before storing and transmitting it due to its limitation of storage and bandwidth capacity. Wavelet ...
Entropy-constrained predictive residual vector quantization of digital images
ICIP '95: Proceedings of the 1995 International Conference on Image Processing (Vol. 3)-Volume 3 - Volume 3A major problem with a VQ based image compression scheme is its codebook search complexity. Recently, a new VQ scheme called predictive residual vector quantizer (PRVQ) was proposed by Rizvi and Nasrabadi (see Proc. IEEE Int. Conf. Image Processing (...
On performance of lossless compression for HDR image quantized in color space
High dynamic range (HDR) image requires a higher number of bits per color channel than traditional images. This brings about problems to storage and transmission. Color space quantization has been extensively studied to achieve bit encodings for each ...






Comments