research-article

Analysis and Solution of CSS-Sprite Packing Problem

Authors:

Jakub Marszałkowski,

Maciej DrozdowskiAuthors Info & Claims

ACM Transactions on the Web (TWEB), Volume 10, Issue 1

Article No.: 1, Pages 1 - 34

https://doi.org/10.1145/2818377

Published: 29 December 2015 Publication History

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/&sim;epa/survey.pdf.

[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.

[3]

Thomas Boutell, Pierre Joye, and PHP.net. 2013. GD Graphics Library. Retrieved from http://libgd.bitbucket.org/.

[4]

Kristian Bredies and Martin Holler. 2012. A total variation-based JPEG decompression model. SIAM J. Imaging Sci. 5, 1 (2012), 366--393.

Digital 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.

[6]

Bernard Chazelle. 1983. The bottom-left bin-packing heuristic: An efficient implementation. IEEE Trans. Comput. 32, 8 (1983), 697--707.

Digital Library

[7]

Tung-Chieh Chen and Yao-Wen Chang. 2006. Modern floorplanning based on B&ast;-tree and fast simulated annealing. IEEE Trans. Comput.-Aided Des. Integr. Circuits Syst. 25 (2006), 637--650.

Digital Library

[8]

Sergey Chikuyonok. 2009a. Clever JPEG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/.

[9]

Sergey Chikuyonok. 2009b. Clever PNG Optimization Techniques. Retrieved from http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/.

[10]

N. Christofides and C. Whitlock. 1977. An algorithm for two-dimensional cutting problems. Oper. Res. 25, 1 (1977), 30--44.

Digital Library

[11]

CompuServe Inc. 1990. Graphics Interchange Format. Retrieved from http://www.w3.org/Graphics/GIF/spec-gif89a.txt.

[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/.

[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.

[14]

Michael Eckert and Andrew Bradley. 1998. Perceptual quality metrics applied to still image compression. Signal Processing 70 (1998), 177--200.

Digital 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.

Digital Library

[16]

Jake Gordon. 2011. Binary Tree Bin Packing Algorithm. Retrieved from http://codeincomplete.com/posts/2011/5/7/bin_packing/.

[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.

Digital Library

[18]

HTTPbis Working Group. 2015. Hypertext Transfer Protocol Version 2. Retrieved from https://tools.ietf.org/html/draft-ietf-httpbis-http2-17.

[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.

Digital Library

[20]

Impulse Adventure. 2007. What Is an Optimized JPEG? Retrieved from http://www.impulseadventure.com/photo/optimized-jpeg.html.

[21]

Independent JPEG Group. 2012. Jpegtran. Retrieved from http://jpegclub.org/jpegtran/.

[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.

[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.

Digital 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.

[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.

[26]

Richard E. Korf and Eric Huang. 2012. Optimal rectangle packing: An absolute placement approach. J. Artif. Intell. Res. 46 (2012), 47--87.

Digital Library

[27]

Richard E. Korf, Michael D. Moffitt, and Martha E. Pollack. 2010. Optimal rectangle packing. Ann. Oper. Res. 179, 1 (2010), 261--295.

[28]

Andrea Lodi, Silvano Martello, and Michele Monaci. 2002. Two-dimensional packing problems: A survey. Eur. J. Oper. Res. 141, 2 (2002), 241--252.

[29]

Cédric Louvrier. 2013. Optimisation Web (Images, Performance). Retrieved from http://css-ig.net/.

[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.

[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.

Digital 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/.

[33]

Larry Masinter. 1998. RFC 2397: The “Data” URL Scheme. Retrieved from https://www.ietf.org/rfc/rfc2397.txt.

[34]

Robert McNaughton. 1959. Scheduling with deadlines and loss functions. Manage. Sci. 6, 1 (1959), 1--12.

Digital Library

[35]

Mozilla Co. 2014. Mozilla JPEG Encoder Project. Retrieved from https://github.com/mozilla/mozjpeg/.

[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.

Digital Library

[37]

Nuclex Framework. 2009. Rectangle Packing. Retrieved from http://nuclexframework.codeplex.com/wikipage?title=Rectangle.

[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.

[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.

Digital 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).

[41]

Dave Shea. 2004. CSS Sprites: Image Slicing’s Kiss of Death. Retrieved from http://www.alistapart.com/articles/sprites.

[42]

Ken Silverman. 2013. Ken Silverman’s Utility Page. Retrieved from http://advsys.net/ken/utils.htm.

[43]

Lindsey Simon and Steve Souders. 2015. Browserscope. Retrieved from http://www.browserscope.org/?category=network&v==1.

[44]

Kyle Simpson. 2015. Obsessions: HTTP Request Reduction. Retrieved from http://blog.getify.com/obsessions-http-request-reduction/.

[45]

Petr Staníček. 2003. CSS Technique: Fast Rollovers Without Preload. Retrieved from http://wellstyled.com/css-nopreload-rollovers.html.

[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/.

[47]

A. Steinberg. 1997. A strip-packing algorithm with absolute performance bound. SIAM J. Comput. 26, 2 (1997), 401--409.

Digital 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.

Digital Library

[49]

Gregory K. Wallace. 1991. The JPEG still picture compression standard. Commun. ACM 34, 4 (1991), 30--44.

Digital Library

[50]

WebPageTest. 2015. WebPageTest. Retrieved from http://www.webpagetest.org/.

[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.

Cited By

Piechowiak KDrozdowski MSanlaville É(2022)Framework of algorithm portfolios for strip packing problemComputers & Industrial Engineering10.1016/j.cie.2022.108538172(108538)Online publication date: Oct-2022
https://doi.org/10.1016/j.cie.2022.108538
Moktan GVaris NManner J(2018)Utilizing Connection Usage Characteristics for Faster Web Data TransportJournal of Computer Networks and Communications10.1155/2018/45203122018Online publication date: 6-Jun-2018
https://dl.acm.org/doi/10.1155/2018/4520312
Wasik SAntczak MBadura JLaskowski ASternal T(2018)A Survey on Online Judge Systems and Their ApplicationsACM Computing Surveys10.1145/314356051:1(1-34)Online publication date: 4-Jan-2018
https://dl.acm.org/doi/10.1145/3143560
Show More Cited By

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 Networks

Now 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 ...
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 ...
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 3

A 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 (...

Comments

Information & Contributors

Information

Published In

cover image ACM Transactions on the Web

ACM Transactions on the Web Volume 10, Issue 1

February 2016

198 pages

ISSN:1559-1131

EISSN:1559-114X

DOI:10.1145/2870642

Editors:
Brian D. Davison
Lehigh University, USA
,
Marianne Winslett
University of Illinois at Urbana-Champaign

Issue’s Table of Contents

Copyright © 2015 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 29 December 2015

Accepted: 01 August 2015

Revised: 01 August 2015

Received: 01 November 2014

Published in TWEB Volume 10, Issue 1

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed

Funding Sources

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

6
Total Citations
View Citations
415
Total Downloads

Downloads (Last 12 months)5
Downloads (Last 6 weeks)2

Reflects downloads up to 12 Nov 2024

Other Metrics

View Author Metrics

Citations

Cited By

Piechowiak KDrozdowski MSanlaville É(2022)Framework of algorithm portfolios for strip packing problemComputers & Industrial Engineering10.1016/j.cie.2022.108538172(108538)Online publication date: Oct-2022
Moktan GVaris NManner J(2018)Utilizing Connection Usage Characteristics for Faster Web Data TransportJournal of Computer Networks and Communications10.1155/2018/45203122018Online publication date: 6-Jun-2018
Wasik SAntczak MBadura JLaskowski ASternal T(2018)A Survey on Online Judge Systems and Their ApplicationsACM Computing Surveys10.1145/314356051:1(1-34)Online publication date: 4-Jan-2018
Marszakowski JMokwa DDrozdowski MRusiecki uNarony H(2017)Fast algorithms for online construction of web tag cloudsEngineering Applications of Artificial Intelligence10.1016/j.engappai.2017.06.02364:C(378-390)Online publication date: 1-Sep-2017
Goncharenko BZaytsev VStorm TBalland EVarro D(2016)Language design and implementation for the domain of coding conventionsProceedings of the 2016 ACM SIGPLAN International Conference on Software Language Engineering10.1145/2997364.2997386(90-104)Online publication date: 20-Oct-2016
Storm TBalland EVarro D(2016)Proceedings of the 2016 ACM SIGPLAN International Conference on Software Language EngineeringundefinedOnline publication date: 20-Oct-2016

View Options

Get Access

Login options

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

Full Access

Get this Article

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Issue’s Table of Contents