Table of ContentsIntroduction2The Performance Penalty of HTTP Requests2Reducing the Number of HTTP Requests3Sprites3How Sprites Work4Image Inlining Using Base-64 Encoding0Disadvantages of Inlined Images1Comparison of Sprites and Inlining2Browser Compatibility2When to Use Image Optimization Techniques2Optimizing Images in ASP.NET3Installing and Configuring the ASP.NET Image Optimization Framework3Preparing Images for Optimization4Adding Images to the App_Sprites Directory4Changing the location of the sprites directory5Granting the ASP.NET worker process write permissions to the sprites directory5Configuring Optimization Settings5How ASP.NET Image Optimization Works6Monitoring the App_Sprites Directory for Changes6How Images Are Displayed by the Built-In Controls7Adding Optimized Images to a Page7ASP.NET4 Web Forms Projects8ASP.NET MVC 3 and ASP.NET Web Pages (Razor) Projects8Using image optimization in .aspx views9Using image optimization in Razor pages9Manually Using Optimized Images in HTML Markup9Image Optimization Quick Reference11Static Fields11Public Methods11Disclaimer12

IntroductionThe ASP.NET image performance optimization framework is designed to decrease the amount of time thats required in order to request and display a page from a web server by performing a variety of optimizations on the pages images.The Performance Penalty of HTTP RequestsWith the prevalence today of high-speed Internet connections, page load speeds are no longer primarily limited by the amount of content that must be downloaded by a web browser. Instead, a limiting factor is the latency caused by the HTTP requests that are used to download each piece of external content on a page. Because images are the most frequently used external elements in web pages, a significant portion of the time required for a web browser to fully load a page is spent sending HTTP requests to the server to download each individual image file. This is particularly true if a page contains many small images, as shown in Figure 1.

Figure 1: Pages on the Northwind Online site include a large number of small images. Without image optimization, these images would cause a page to load slowly as the browser requests each image individually.Most browsers and web servers are configured to allow anywhere between two and six HTTP connections at a time. This resulting HTTP request latency can significantly impact the amount of time that it takes to load a web page that contains many images, because only a limited number of requests can be processed in parallel, as shown in Figure 2.Small interface images much of the time it takes to download each is simply due to latency

Figure 2: A partial analysis of the time spent loading a popular technology news site. The X-axis is the running time, and each piece of content is given its own horizontal series.The graph in Figure 2 shows how inefficiently most web browsers download image-heavy pages. On each data series, the light purple section displays the latency time required in order to initiate each download, while the smaller dark purple segments indicate the actual download time. Additionally, there's a limitation on how many downloads can take place at the same time, which defeats the possible advantages of many images loading in parallel. The grouping of smaller image downloads in the red circle shows how this limitation is particularly wasteful, because each download spends more time waiting for an HTTP response than actually streaming the image data.You can see that reducing this inefficiency can provide large benefits in terms of reduced time waiting for pages to load. It can also diminish the load on the content providers server and network, because the reduced number of HTTP requests lessens the work for load balancers.Reducing the Number of HTTP RequestsTo reduce the number of HTTP requests that a page requires in order to fetch all the images it needs, you can use two methods: sprites and image inlining.SpritesA sprite is a collection of graphics combined into a single image file, from which you can extract individual images using their grid location and size. Using sprites instead of collections of discrete images goes back to the era of 8-bit video games, where programmers found that by merging all of a games individual bitmaps into a single grid-style file, they could significantly reduce the amount of memory required in order to display graphics content. In particular, sprites were efficient because they required only one color palette for the entire graphic, rather than a separate color palette for each individual image. Figure 3 shows how this was done.

Figure 3: An example of a sprite sheet from a 1980s style game. By combining many small images into a single file, programmers were able to save significant amounts of memory. (Figure credited to The Sprite Artists of Game Design Novice.)The same concept can also be applied to web design. In addition to reducing the file size of the images placed on a page (because of the palette issue), using sprites also reduces the number of HTTP requests that are required in order to load set of images to just one request (plus one additional request for a .css file that's also required).How Sprites WorkTo work with sprites, you (or a designer) must merge a collection of images into a single image file, as shown in Figure 4.

Figure 4: A collection of Microsoft icons (on the left) is merged into a single sprite image

After the page and sprites have been downloaded to a browser, the browser can use the individual images in the sprites through settings from the CSS background-position, width, and height descriptors. These settings let you slice an individual image out of a sprite sheet, which is referenced as the value of the CSS background-image property. The following figure shows CSS rules that include background-image descriptors. Notice that in each case the descriptor points to the same image, url(sprite0.png), which is the sprite that contains the combined smaller images. However, each rule includes different dimensions for background-position, width, and height settings.

.azureLogo\.png{width:123px;height:115px;background-image:url(sprite0.png);background-position:0px 0px;}.dotNet\.png{width:310px;height:155px;background-image:url(sprite0.png);background-position:-123px 0px;}.exchange\.png{width:119px;height:138px;background-image:url(sprite0.png);background-position:-433px 0px;}

.mesh\.png{width:307px;height:312px;background-image:url(sprite0.png);background-position:-552px 0px;}.windowsLogo\.png{width:245px;height:210px;background-image:url(sprite0.png);background-position:-859px 0px;}.xbox\.png{width:208px;height:207px;background-image:url(sprite0.png);background-position:-1104px 0px;}In order for the CSS classes to be accessible from a page, the CSS file itself must be referenced in the pages section using the typical element:

In the body of the page, you can display individual images by referencing the appropriate class in any HTML element (not just elements):

The elements in this example will result in the following output:

Image Inlining Using Base-64 EncodingAnother performance optimization technique for images is image inlining. In this technique, you embed image data (using base-64 encoding) directly into HTML or CSS markup instead of referencing it as an external resource, as shown in Figure 5. By embedding images into HTML or CSS markup, you can reduce the number of extra HTTP requests for a pages images to zero (or to one, depending on whether the image data is in a pages HTML or in a linked CSS style sheet). For any given page, the browser downloads the data (the page plus the images), but with embedded images, the entire content can require as little as one download.